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

## HTML版の実装

まずはHTMLのみでの実装を見ていきます。

{% embed url="<https://codepen.io/subuta-1471420899/pen/OJyZQwW>" %}

`Enter your name` の欄に任意の名前を入力し、 `Submit` で送信します。そうすると送信結果が表示されます。(※ 再度試す場合はCodePenの下部の `Rerun`  を押せば元に戻ります。) このFormを実装するコードは以下の通りです。

```markup
<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` に応じて振る舞いが変わります。(※ 一部抜粋。詳細は[こちら](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input))

* `type="text"` = テキスト(文字列型)
* `type="checkbox"` = チェックボックス(Boolean型)
* `type="date"` = 日付選択(Date型)
* `type="datetime"` = 日時選択(DateTime型)
* `type="number"` = 数値(数値型)

なので、Formを使ったデータ送信時には項目に応じて適切な型を指定することで、送信されるデータの構造を組み立てることになります。

次の章ではAJAXを使った送信を見ていきます。