WEBアプリの HTML 側の発射台の FORM と INPUT の属性の関係の整理

現在最も信頼性の高い HTML や JavaScript のオンラインドキュメントは MDN です。

なので、例えば FORM に関して Google で調べる場合には最初に MDN のキーワードを入れて調べます
MDN FORM

▼ MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form

ここで出てくる 属性 の内容がとても重要になりますが、『古くなっている仕様』も記述(警告)されている事がとても大事です。

以下は現在必要な情報しか取り出していませんが、例えば『accept』という属性は必要無いという事が解ります。

FORM 属性の解説ページのリンク

🧡 accept-charset

💘 action

     サーバのデータの送り先 を指定します。

🧡 enctype

💘 method

    get か post を指定します。

🧡 novalidate

💘 target

    サーバーがデータを送るウインドウの name を指定します。

method="get"

サーバーへのデータの送り方の違いで get と post は大きく違います。

デモページ

テストページ

<script>
function checkForm() {
	if ( !confirm( "送信しますか?" ) ) {
		return false;
	}
	return true;
}
</script>
<form action="https://www.google.co.jp/search" onsubmit="return checkForm();" target="_blank">
	<input type="text" name="q" required list="pg">
	<datalist id="pg">
	<option value="PHP">
	<option value="Java">
	<option value="SQL">
	</datalist>

	<input type="submit" name="send" value="送信">
</form>

GET で送る場合は、リンクと同じ

ブラウザで URL が作成されてからサーバに送られます。ですから、同じ URL を作成できるのならば A 要素の href 属性に指定して呼び出す事が可能です。

❌ 欠点1
この結果、サーバー側で送った元のチェック( 排除 )を行っていない場合はどこからでも自由にデータを受け取ってしまうので、サーバー運営上はあまり好ましくありません。

❌ 欠点2
さらに、URL を介してデータを渡すので無制限にデータを送れません。それはファイルのアップロードはできない事を意味します。

❌ 欠点3
リンクと同じ扱いなので、ブラウザがキャッシュとして保存してしまうので、サーバ側でキャッシュを使わないようにしないと『ウェブアプリケーション』として動作しない事がよくあります。

アプリケーションの テスト中は GET で処理しておけば、QueryString 部分がアドレスバーに表示されて解りやすいかもしれません


POST 時のデータをブラウザで確認

POST メソッドでも、ブラウザの『デベロッパーツール』を使うと参照可能です。



FORM と 送信データ

通常では、FORM 内に定義された3つの要素からデータをサーバへ送る事ができます。

⭐ INPUT 要素
⭐ SELECT 要素
⭐ TEXTAREA 要素

但し、INPUT 要素ではとても多くの種類( type )があり、タイプによってはブラウザのみで動作するものもあります。また、name 属性の無いタイプは、サーバ側でデータを識別できないので送られません。

※ INPUT 要素の disabled 属性があるとサーバーへは送られなくなります

type="submit"

このタイプはサーバ送信用のボタンとなり、クリックする事によってサーバへデータを送ります。( JavaScript を使用すると、このボタン無しでも送る事ができます )

さらにこのボタンに使用できる FORM 用の属性を利用すると、FORM に設定していた属性を上書きする事ができます。

⭐ formaction
⭐ formenctype
⭐ formmethod
⭐ formnovalidate
⭐ formtarget

form="フォームのid"

データをサーバに送るコントロールに、form 属性を指定すると、FORM 要素の中に含めないでも FORM と関連づけできるようになっています。

<script>
function checkForm() {
	if ( !confirm( "送信しますか?" ) ) {
		return false;
	}
	return true;
}
</script>
<form id="frm" action="https://www.google.co.jp/search" onsubmit="return checkForm();" target="_blank"></form>

<input type="text" name="q" required list="pg" form="frm">
<datalist id="pg">
<option value="PHP">
<option value="Java">
<option value="SQL">
</datalist>

<input type="submit" name="send" value="送信" form="frm">