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. formタグに指定された action 属性の値でデータの送信先を指定。

2. formの子要素として配置されたinputタグの name 属性で送信時のデータのキー名を指定。例では name="name" かつ type="text" なので、 { "name": "入力されたテキスト" } というような形で送信される。

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を使った送信を見ていきます。