【HTML】formまとめ

## 目次
1. [formとは](#formとは)
1. [input](#input)
1. [label](#label)
1. [button](#button)
1. [input-name属性](#input-name属性)
1. [コラムここまでの知識を使えばこんなこともできる！](#コラムここまでの知識を使えばこんなこともできる！)
1. [input-type属性-チェックボックスなど](#input-type属性-チェックボックスなど)
1. [select-プルダウン](#select-プルダウン)
1. [HTMLバリデーション](#HTMLバリデーション)

## formとは

```html:form.html
<form action="/action/">

</form>
```

* httpにリクエストが送れるタグ
* form自体には見た目に影響はない。ただの器。
<table>
  <caption>属性の説明</caption>
  <thead>
    <tr>
      <th>属性</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td> action </td> <td>「どこ」にフォームの情報を送信するか指定</td>
  </tr>
</table>


## input

```html:form.html
<form action="/action/">
    <input type="text" placeholder="テキストを入力" />
    <input type="month" placeholder="日付" />
    <input type="number" placeholder="数を入力" />
</form>
```
実行結果
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/6a663836-7767-0584-b6dc-69848aac453b.png">

* 実際に入力欄を作るタグ

<table>
  <caption>属性の説明</caption>
  <thead>
    <tr>
      <th>属性</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td> type </td> <td>どんな入力欄にするか</td>
  </tr>
  <tr>
    <td> placeholder </td> <td>入力されていないときに表示される文字</td>
  </tr>
</table>


## label

```html:form.html
<form action="/action/">
    <p>
        <label for="name">ユーザー名</label>
        <input type="text" name="username" id="name" placeholder="ユーザー名">
    </p>
    <p>
        <label for="pass">パスワード</label>
        <input type="text" name="password" id="pass" placeholder="パスワード">
    </p>
</form>
```
実行結果
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/775eb605-93a1-3d22-56e2-8fda9453c939.png">


* 文字と入力欄を関連付ることができる
* 関連付けると、文字をクリックしても入力欄にフォーカスが当たる

<table>
  <caption>属性の説明</caption>
  <thead>
    <tr>
      <th>属性</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td> for </td> <td>inputのid属性と同じ名前にすることで関連付けれる</td>
  </tr>
</table>

*labelはbuttonとかにもつけられるみたいです。


## button

```html:form.html
<form action="/action/">
    <p>
        <label for="name">ユーザー名</label>
        <input type="text" name="username" id="name" placeholder="ユーザー名">
    </p>
    <p>
        <label for="pass">パスワード</label>
        <input type="text" name="password" id="pass" placeholder="パスワード">
    </p>
    
    <button type="submit">送信</button>
    
</form>
```
実行結果
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/5cc9bec6-acf9-a8d2-d8bb-a82e6f4f7c7d.png">


* ボタンを設置できる
* ボタンを押すと、URLが`/form.html`から`/action/`に変わる
 →これは、formのaction属性に書いているURLに変わっている。
* 別の動作をさせたい場合はtype属性で指定する。

<table>
  <caption>属性の説明</caption>
  <thead>
    <tr>
      <th>属性</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td> type </td> <td>ボタンの役割を指定する</td>
  </tr>
</table>


## input-name属性

```html:form.html
<form action="/action/">
    <p>
        <label for="name">ユーザー名</label>
        <input type="text" name="username" id="name" placeholder="ユーザー名">
    </p>
    <p>
        <label for="pass">パスワード</label>
        <input type="text" name="password" id="pass" placeholder="パスワード">
    </p>
    
    <button type="submit">送信</button>
    
</form>
```

* サーバーに送る情報に名前がつけられる

どういうこと？？具体例を見よう！↓

<strong>具体例</strong>
上記の`form.html`のユーザー名（abc）とパスワード（abcd）を入力して、送信ボタンを押した場合
1. URLが`/form.html`から`/action/?username=abc&password=abcd`に変わる
2. この時の`username=abc`と`password=abcd`の部分は、inputのname属性で指定している名前と同じになっている。
3. つまり、入力して送信された情報（今回はabcとabcd）に名前をつけることができている
    <img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/5278fb02-218c-ea43-0dc0-08588f35e8fe.png">


## コラムここまでの知識を使えばこんなこともできる！

```html:form.html
<form action="https://www.google.com/search">
    <label for="google">Google検索</label>
    <input type="text" name="q" id="google" />
    <button type="submit">送信</button>
</form>
```
実行結果
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/874cf958-89ba-c537-33da-7e8129a54fff.png">

送信を押すと、、

実際にGoogleで検索できる！
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/001f67ff-7684-2620-cf5e-020d7e666424.png">


<strong>解説</strong>
* Googleでいつも通り検索すると、以下のようなリンクが表示される
`https://www.google.com/search?q=犬&gs_lcrp=EgZjaHJvbWUyDggAE・・・`
* `https://www.google.com/search?q=犬`に注目！
* さっきの`/action/?username=abc&password=abcd`に似てない？
* そう。formのaction属性に、`https://www.google.com/search`入れて、inputのname属性に`q`を入れればできちゃう！
* Googleに限らず、youtubeとかでもできる！



## input-type属性-チェックボックスなど

```html:form.html
<form action="/action2">

    <!-- チェックボックス -->
    <p>
        <input type="checkbox" name="agree_tos" id="agree" />
        <label for="agree">利用規約に同意します</label>
    </p>

    <!-- ラジオボタン -->
        <p>
        <label for="s">S:</label>
        <input type="radio" name="size" id="s" value="s">

        <label for="m">M:</label>
        <input type="radio" name="size" id="m" value="m">

        <label for="l">L:</label>
        <input type="radio" name="size" id="l" value="l">
    </p>

    <button>送信</button>

</form>
```
実行結果
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/ae371df0-22a0-85ff-c5eb-116bd6193991.png">



<table>
  <caption>type属性の種類</caption>
  <thead>
    <tr>
      <th>種類</th> <th>説明</th> <th>チェックして送信を押した時のURL</th>
    </tr>
  </thead>
  <tr>
    <td> checkbox </td> <td>チェックボックス</td> <td>/action2?agree_tos=on</td>
  </tr>
  <tr>
    <td> radio </td> <td>ラジオボタン</td> <td>/action2?size=m</td>
  </tr>
</table>

　　
<strong>checkbox解説</strong>
* checked属性をつけると初期でチェックがついてる状態にできる

  　

<strong>radio解説</strong>
* チェックボックスとの違い：グルーピングすると複数の中から1つしか選択できない
* グルーピングする方法：nameを統一する
* value属性をつけないと、リクエストのURLに選択した値が具体的に何なのか反映されない
例：Mを選択：×size=on　⚪size=m


## select-プルダウン

```html:form.html
<form action="/action3">
    <p>
        <label for="size">サイズを選択してください</label>
        <select name="size" id="size">
            <option value="s">Sサイズ</option>
            <option value="m" selected>Mサイズ</option>
            <option value="l">Lサイズ</option>
        </select>
    </p>
    <button>提出</button>
</form>
```
実行結果
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/df5116b9-b2d3-2e26-592c-d3c67a568453.png">


* `<select>`と`<option>`でプルダウンが作れる
* selectの属性：nameは値に名前をつけるため、idはlabelと関連付けるため
* optionの属性：valueは選択した値が何かを判別できるようにするため
* <strong>selected</strong>をつけるとデフォルトの値を設定できる



## HTMLバリデーション

```html:form.html
<form action="/action">

    <p>
        <label for="name">ユーザー名</label>
        <input type="text" name="username" id="name" placeholder="ユーザー名" required>
    </p>
    <p>
        <label for="pass">パスワード</label>
        <input type="text" name="password" id="pass" placeholder="パスワード" minlength="5" maxlength="10">
    </p>

    <button type="submit">送信</button>

</form>
```
実行結果
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/e90e1146-ed4c-f7b2-8ac2-0ecf461617b1.png">
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713583/87401f83-3b0d-9856-2f21-94e97d418b0a.png">


* <strong>`required`</strong>を書くと、入力必須にできる
* <strong>`minlength`</strong>を書くと、最低限必要な文字数を設定できる
* <strong>`maxlength`</strong>を書くと、文字数の上限を設定できる