Javascriptでのフォーム部品の操作のまとめ

この記事は、HTML5のフォーム部品と、それに対するJavascriptによる操作について、個人用にまとめています。

## Text系
#### 値の読取
```
elem.value
```
#### 値の書込
```
elem.value = newValue;
```

### 基本
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input>` | typeのデフォルトはtext | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input) |
| `<input type="text">` | 汎用の1行のテキスト | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/text) |
| `<input type="search">` | 検索キーワード入力用。ブラウザによっては補完などが効くことがある | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/search) |
| `<input type="password">` | パスワード | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/password) |
| `<textarea>` | 複数行のテキスト。HTMLTextAreaElement。HTMLでのvalue属性の設定はできないが、HTMLTextAreaElementでvalueプロパティの読取・書込は可能。 | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea) |

### 制約
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input type="url">` | URL | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/url) |
| `<input type="email">` | E-mail アドレス | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/email) |
| `<input type="tel">` | 電話番号(各国の形式があるので、patternに制約を書く必要がある) | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/tel) |

emailは、multiple属性を使用することで、カンマ区切りで複数設定することができる。

### カラーピッカー
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input type="color">` | カラーピッカー | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color) |

### 日時ピッカー系
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input type="date">` | 日付 | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date) |
| `<input type="month">` | 月(YYYY-MM 形式) | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/month) |
| `<input type="week">` | 週(ISO 8601 週番号形式) | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/week) |
| `<input type="time">` | 1日の中の時刻 | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/time) |
| `<input type="datetime-local">` | 日時 | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local) |

time, week, dateについては、IE以外ではvalueAsDateが使用可能。

## Number系
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input type="number">` | スピナー | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number) |
| `<input type="range">` | スライダー | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/range) |

#### 値の読取
```
elem.value
elem.valueAsNumber /* IE以外 */
Number(elem.value)
```

`Number`関数を使用すると、小数や"1e2"のような表記も数値にすることができる。なお、誤って`new Number`は使用しないように。

#### 値の書込
```
elem.value = newValue;
```

## File
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input type="file">` | ファイル選択 | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file) |

#### 値の読取
```
elem.files /* returns FileList */
elem.files[0] /* returns File */
```

multiple属性により、複数個のファイルを受け取ることが可能。

## Select
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<select>` | プルダウン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/select) |

### multipleがfalseのとき
#### 値の読取
```
elem.value
```
multipleがtrueのときは、先頭の値が取得される。
#### 値の書込
```
elem.value = newValue;
```

optionにないvalueを代入しようとした場合、valueが""になって空になるようである。仕様が見つからない。

### multipleがtrueのとき
#### 値の読取
```
Array.from(elem.querySelectorAll("option")).filter((option) => option.selected).map((option) => option.value)
```
#### 値の書込
```
elem.querySelectorAll("option")[0].selected=false;
```

multipleがfalseのときも、optionのselectedの使用は可能。

## Check系
### Checkbox
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input type="checkbox">` | チェックボックス | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox) |

フォームとして使用した場合は、複数の同nameのチェックボックスを使用して、複数の値を設定することがある。
また、同nameのhiddenを使用して、未選択時の値を設定することができる。

#### 値の読取
```
elem.checked
```
#### 値の書込
```
elem.checked = true;
elem.checked = false;
```

他に、Javascriptからindeterminateプロパティをtrueにすることで、中間状態にできる。ユーザ操作からは中間状態にはできない。

### Radio
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input type="radio">` | ラジオボタン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio) |

#### 値の読取
```
elem.checked
```

ラジオボタンが一つも選択されていない状態も存在することに注意。

#### 値の書込
```
elem.checked = true;
elem.checked = false;
```

現在選択されている以外のラジオボタンにtrueを代入した場合は、そちらに選択が移動する。
現在選択中のラジオボタンにfalseを代入すると、ラジオボタンが一つも選択されていない状態になる。

## Button系
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<button type="button">` | 汎用ボタン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/button) |
| `<button type="submit">` | Submitボタン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/button) |
| `<button type="reset">` | リセットボタン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/button) |
| `<input type="button">` | 汎用ボタン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/button) |
| `<input type="image">` | 画像でできたボタン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image) |
| `<input type="submit">` | Submitボタン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/submit) |
| `<input type="reset">` | リセットボタン | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/reset) |

## Hidden
| 要素 | 説明 | MDN |
|:--|:--|:--|
| `<input type="hidden">` | 隠し入力欄 | [MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/hidden) |