FormタグのSubmit機能を使った送信
まずはHTMLのみでの実装を見ていきます。
Enter your name の欄に任意の名前を入力し、 Submit で送信します。そうすると送信結果が表示されます。(※ 再度試す場合はCodePenの下部の Rerun を押せば元に戻ります。) このFormを実装するコードは以下の通りです。<form id="form" action="https://httpbin.org/anything">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<br />
<button>Submit</button>
</form>
順に説明していきます。
- 1.formタグに指定された
action属性の値でデータの送信先を指定。 - 2.formの子要素として配置されたinputタグの
name属性で送信時のデータのキー名を指定。例ではname="name"かつtype="text"なので、{ "name": "入力されたテキスト" }というような形で送信される。 - 3.formの子要素として配置されたbuttonタグの押下時に、formのSubmit(送信)が実行される。送信後は
actionに指定されたURLに、各inputの値をクエリ文字列(パラメータ)として付与したうえで遷移(= フォームのデータを送信)する。
type="text"= テキスト(文字列型)type="checkbox"= チェックボックス(Boolean型)type="date"= 日付選択(Date型)type="datetime"= 日時選択(DateTime型)type="number"= 数値(数値型)
なので、Formを使ったデータ送信時には項目に応じて適切な型を指定することで、送信されるデータの構造を組み立てることになります。
次の章ではAJAXを使った送信を見ていきます。