Comment on page

FormタグのSubmit機能を使った送信

HTML版の実装

まずは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. 1.
    formタグに指定された action 属性の値でデータの送信先を指定。
  2. 2.
    formの子要素として配置されたinputタグの name 属性で送信時のデータのキー名を指定。例では name="name" かつ type="text" なので、 { "name": "入力されたテキスト" } というような形で送信される。
  3. 3.
    formの子要素として配置されたbuttonタグの押下時に、formのSubmit(送信)が実行される。送信後は action に指定されたURLに、各inputの値をクエリ文字列(パラメータ)として付与したうえで遷移(= フォームのデータを送信)する。
2で指定したinputタグは以下のように type に応じて振る舞いが変わります。(※ 一部抜粋。詳細はこちら)
  • type="text" = テキスト(文字列型)
  • type="checkbox" = チェックボックス(Boolean型)
  • type="date" = 日付選択(Date型)
  • type="datetime" = 日時選択(DateTime型)
  • type="number" = 数値(数値型)
なので、Formを使ったデータ送信時には項目に応じて適切な型を指定することで、送信されるデータの構造を組み立てることになります。
次の章ではAJAXを使った送信を見ていきます。