フォームのHTML

[フォームのJavaScript](https://qiita.com/takeshisakuma/items/f1ae123457bc99f23f7d)、[フォームのCSS](https://qiita.com/takeshisakuma/items/4218822871af486c8469)も併せてご覧ください。

## 要素

### form

```:html
<form name="myForm" action="example.php" method="POST" enctype="multipart/form-data" autocomplete="off"></form>
```

|form要素の属性|内容|
|---|---|
|name|フォームの名前|
|action|送信先|
|enctype|application/x-www-form-urlencoded(初期値)、multipart/form-data(type="file"使用時)、text/plain|
|method|フォーム送信時にブラウザーが使用するHTTPメソッド|
|autocomplete|入力補完(on/off/default)|


autocomplete属性は、offにしてもブラウザーで無視されてしまう事があるので、自動入力を使用しているユーザーのために適切に設定しておくと良いです。

### input

|inputのtype|内容|
|---|---|
|text|(デフォルト)1行テキストボックス<br>2行以上にわたる長い文章を入力させたい場合は、textarea要素を使う|
|password|パスワード<br>入力したテキストがアスタリスク(*)などに置き換えて表示(データ自体は暗号化されない)|
|checkbox|複数選択が可能(checked属性であらかじめチェックの付いた状態にできる)|
|radio|ラジオボタン 複数の中から一つしか選択できない　name属性で同じ名前を付けて同じグループ (checked属性であらかじめチェック)|
|file|ファイル送信|
|hidden|隠しデータ|
|search|検索テキスト|
|tel|電話番号|
|url|URL|
|email|メールアドレス|
|number|数値|
|range|レンジ|
|color|色|


|inputのtype(時間系)|内容|
|---|---|
|datetime|UTC(協定世界時)による日時の入力欄を作成|
|date|日付の入力欄を作成|
|month|月の入力欄を作成|
|week|月の入力欄を作成|
|time|時間の入力欄を作成|
|datetime-local|UTC(協定世界時)によらないローカル日時の入力欄を作成|

|inputのtype(ボタン系)|内容|
|---|---|
|submit|送信ボタン|
|reset|リセットボタン<br>それまでに入力した情報をキャンセルして初期状態に戻す|
|button|汎用ボタン|
|image|画像のボタン<br>src属性で使用する画像ファイル指定<br>alt属性必須|



### selectbox

```:html
<select name="bloodtype">
  <option value="A">A型</option>
  <option value="B">B型</option>
  <option value="O">O型</option>
  <option value="AB">AB型</option>
</select>
```

### datalist
selectboxとの違い：選択後に文字修正が可能です。

```:html
<input type="text" name="city" list="citylist">
  <datalist id="citylist">
  <option value="東京">
  <option value="大阪">
  <option value="福岡">
</datalist>
```

### textarea

```:html
<textarea name="名前" cols="40" rows="8"></textarea>
```

|textareaの属性|内容|
|---|---|
|cols|一行の文字数|
|rows|行数|



### button

```:html
<button type="button">ボタン</button>
```

|buttonの属性|内容|
|---|---|
|type|reset/submit/button|


### label
input、textarea、select要素にはラベルを付けられます。
labelと入力欄を関連付けすると、labelクリック時に入力欄にフォーカスを与えたりアクティブにできます。
ヒット領域を拡大できるで操作しやすくなります。

```:html
<label for="label-item">ラベルの文言</label>
<input type="text" name="item" id="label-item">
```

### fieldset
各要素はfieldsetタグで囲むとグループ化できます。
グループ自体にキャプションを付ける時はlegend要素を使用します。

```:html
<fieldset>

  <legend>趣味</legend>
 
  <input type="checkbox" name="hobby" value="listenmusic" id="label-listenmusic">
  <label for="label-listenmusic">音楽鑑賞</label>
 
  <input type="checkbox" name="hobby" value="readbook" id="readbook">
  <label for="label-readbook">読書</label>
 
  <input type="checkbox" name="hobby" value="watchmovie" id="label-watchmovie">
  <label for="label-watchmovie">映画鑑賞</label>
 
  <input type="checkbox" name="hobby" value="playgame" id="label-playgame">
  <label for="label-playgame">ゲーム</label>
 
</fieldset>
```




## 属性
### name属性
フォーム部品に名前をつけられます。

### id属性
labelのforと要素のidを揃えるとlabelと要素の紐づけができます。

#### name属性とid属性の違い


|id/name|違い|
|---|---|
|id|JavaScriptでそのタグを指定するため|
|name|入力された値をPHPなどで送信するため|


### value属性
送信される値を指定します。

### size属性
inputでは幅を指定します。
selectでは表示する項目数を指定します。

### maxlength属性
最長の長さを指定します。
フォーム自体に入力制限がかかります。
(自由に入力できる系のみ)

```:html
<input type="password" maxlength="8">
```

### minlength属性
最短の長さを指定します。
満たしていない場合、送信ボタンを押した時にエラーが表示されます。
(自由に入力できる系のみ)

```:html
<input type="password" minlength="4">
```

### autocomplete属性

```:html
<input type="text" name="username" autocomplete="name">
```

|名前|内容|
|---|---|
|name	|姓名|
|honorific-prefix|接頭辞や敬称 ("Mr."、"Ms."など)|
|given-name|名(ファーストネーム)|
|additional-name|ミドルネーム|
|family-name|姓(ファミリーネーム、ラストネーム)|
|honorific-suffix|接尾辞や敬称("Jr."、"II"など)|
|nickname|ペンネームやハンドルネーム|
|username|ユーザー名またはアカウント名|

|住所|内容|
|---|---|
|street-address|住所　複数行のテキストが使用できる　市町村名、郵便番号、国名は含めない|
|address-line1|番地・マンション名(1行目)　street-address" が存在する場合のみ使用可能|
|address-line2|番地・マンション名(2行目)　street-address" が存在する場合のみ使用可能|
|address-line3|番地・マンション名(3行目)　street-address" が存在する場合のみ使用可能|
|address-level4|第4管理水準|
|address-level3|第3管理水準|
|address-level2|第2管理水準　市町村名|
|address-level1|第1管理水準　都道府県名(アメリカでは州名)|
|country|国コード|
|country-name|国名|
|postal-code|郵便番号(アメリカではZIPコード)|


|組織|内容|
|---|---|
|organization-title|職名や組織内の肩書|
|organization|企業名や団体名|

|言語|内容|
|---|---|
|language|優先言語|




|生年月日|内容|
|---|---|
|bday|生年月日の全体|
|bday-day|生年月日の日|
|bday-month|生年月日の月|
|bday-year|生年月日の年|

|性別|内容|
|---|---|
|sex|性別|


|電話番号|内容|
|---|---|
|tel|国番号を含む、完全な電話番号|
|tel-country-code|国コード|
|tel-national|国番号以外の電話番号全体(市外局番の接頭辞を含む)|
|tel-area-code|市外局番(必要な場合市外局番の接頭辞を含む)|
|tel-local|国番号や市外局番を含まない電話番号(市内局番+加入者番号)|
|tel-local-prefix|市内局番|
|tel-local-suffix|加入者番号|
|tel-extension|内線番号|

  

|web、メッセージング|内容|
|---|---|
|email|メールアドレス|
|impp|インスタントメッセージのアドレス|
|url|URL|
|photo|画像のURL|


|パスワード|内容|
|---|---|
|new-password|新しいパスワード|
|current-password|現在のパスワード|
|one-time-code|ワンタイムコード|

|支払い手段|内容|
|---|---|
|cc-name|氏名の全体|
|cc-given-name|名(ファーストネーム)|
|cc-additional-name|ミドルネーム|
|cc-family-name|姓(ファミリーネーム、ラストネーム)|
|cc-number|クレジットカード番号、口座番号など|
|cc-exp|有効期限( "MM/YY" や、"MM/YYYY" の形)|
|cc-exp-month|有効期限の月|
|cc-exp-year|有効期限の年|
|cc-csc|セキュリティコード|
|cc-type|種類("Visa"や、"Master Card")|

|通貨|内容|
|---|---|
|transaction-currency|決済に使う通貨|
|transaction-amount|決済する金額|


### pattern属性
正規表現で入力値のパターンを指定します。
ルールに沿わない状態で、送信ボタンを押すとエラーメッセージが出ます。
(自由に入力できる系のみ)

```:html
<form action="sample.php">
  <p>半角英数で入力してください</p>
  <input type="text" name="userid" pattern="^[0-9A-Za-z]+$">
  <input type="submit" value="送信">
</form>
```

### placeholder属性
入力欄に初期表示する内容を指定します。

```:html
<input type="search" name="searchword" placeholder="キーワードを入力">
```

### readonly属性
ユーザーによるテキスト編集を不可にして読み取り専用にします。

```:html
<input readonly type="text" value="読取専用">
```

### required属性
入力必須にします。
未入力のまま「送信」を押すとエラーメッセージが出ます。

```:html
<form action="sample.php">
  <p>入力必須です。</p>
  <input type="text" name="yourname" required>
  <input type="submit" value="送信">
</form>
```

### disabled属性

```:html
<input disabled type="text" value="変更不可">
```

### accept属性
type=fileでアップロードできるファイルの種類を指定します。

```:html
<input type="file" accept="image/png, image/jpeg">
```


|ファイルタイプ|記述|
|---|---|
|text/html|HTML|
|text/xml|XML|
|text/css|CSS|
|text/plain|テキスト|
|text/csv|CSV|
|image/png|PNG|
|image/jpeg|JPEG|
|image/gif|GIF|
|audio/mpeg|MP3|
|video/mpeg|MPEG|
|video/mp4|MP4|
|application/pdf|PDF|


### multiple属性
emailとfileで複数の項目を選択します。
fileの場合はアップロードする時に複数のファイルを一括選択してアップロードできます。

```:html
<input multiple="multiple" type="file">
```

### step属性
numberやrangeで数値を刻みます。
(数値や日付系のみ)

```:html
<input type="range" step="20" min="0" max="100">
```


### max属性
最大値を指定します。
(数値や日付系のみ)


### min属性
最小値を指定します。
(数値や日付系のみ)


### autofocus属性
フォームの先頭の項目などにつけておくと、最初の入力欄をクリック(タップ)する手間が省けます。
1つ目の項目は入力しやすい項目にしておきます。

```:html
<label>入力1：</label>
<input type="text">
 
<label>入力2：</label>
<input type="text" autofocus>
``` 



### novalidate属性

ブラウザに標準で付いているバリデート機能をオフにします。

```:html
<form name="myForm" action="example.php" method="POST" enctype="multipart/form-data" autocomplete="off" novalidate>

</form>
```