この記事は、HTML5のフォーム部品と、それに対するJavascriptによる操作について、個人用にまとめています。
Text系
値の読取
elem.value
値の書込
elem.value = newValue;
基本
| 要素 | 説明 | MDN |
|---|---|---|
<input> |
typeのデフォルトはtext | MDN |
<input type="text"> |
汎用の1行のテキスト | MDN |
<input type="search"> |
検索キーワード入力用。ブラウザによっては補完などが効くことがある | MDN |
<input type="password"> |
パスワード | MDN |
<textarea> |
複数行のテキスト。HTMLTextAreaElement。HTMLでのvalue属性の設定はできないが、HTMLTextAreaElementでvalueプロパティの読取・書込は可能。 | MDN |
制約
| 要素 | 説明 | MDN |
|---|---|---|
<input type="url"> |
URL | MDN |
<input type="email"> |
E-mail アドレス | MDN |
<input type="tel"> |
電話番号(各国の形式があるので、patternに制約を書く必要がある) | MDN |
emailは、multiple属性を使用することで、カンマ区切りで複数設定することができる。
カラーピッカー
| 要素 | 説明 | MDN |
|---|---|---|
<input type="color"> |
カラーピッカー | MDN |
日時ピッカー系
| 要素 | 説明 | MDN |
|---|---|---|
<input type="date"> |
日付 | MDN |
<input type="month"> |
月(YYYY-MM 形式) | MDN |
<input type="week"> |
週(ISO 8601 週番号形式) | MDN |
<input type="time"> |
1日の中の時刻 | MDN |
<input type="datetime-local"> |
日時 | MDN |
time, week, dateについては、IE以外ではvalueAsDateが使用可能。
Number系
| 要素 | 説明 | MDN |
|---|---|---|
<input type="number"> |
スピナー | MDN |
<input type="range"> |
スライダー | MDN |
値の読取
elem.value
elem.valueAsNumber /* IE以外 */
Number(elem.value)
Number関数を使用すると、小数や"1e2"のような表記も数値にすることができる。なお、誤ってnew Numberは使用しないように。
値の書込
elem.value = newValue;
File
| 要素 | 説明 | MDN |
|---|---|---|
<input type="file"> |
ファイル選択 | MDN |
値の読取
elem.files /* returns FileList */
elem.files[0] /* returns File */
multiple属性により、複数個のファイルを受け取ることが可能。
Select
| 要素 | 説明 | MDN |
|---|---|---|
<select> |
プルダウン | MDN |
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 |
フォームとして使用した場合は、複数の同nameのチェックボックスを使用して、複数の値を設定することがある。
また、同nameのhiddenを使用して、未選択時の値を設定することができる。
値の読取
elem.checked
値の書込
elem.checked = true;
elem.checked = false;
他に、Javascriptからindeterminateプロパティをtrueにすることで、中間状態にできる。ユーザ操作からは中間状態にはできない。
Radio
| 要素 | 説明 | MDN |
|---|---|---|
<input type="radio"> |
ラジオボタン | MDN |
値の読取
elem.checked
ラジオボタンが一つも選択されていない状態も存在することに注意。
値の書込
elem.checked = true;
elem.checked = false;
現在選択されている以外のラジオボタンにtrueを代入した場合は、そちらに選択が移動する。
現在選択中のラジオボタンにfalseを代入すると、ラジオボタンが一つも選択されていない状態になる。
Button系
| 要素 | 説明 | MDN |
|---|---|---|
<button type="button"> |
汎用ボタン | MDN |
<button type="submit"> |
Submitボタン | MDN |
<button type="reset"> |
リセットボタン | MDN |
<input type="button"> |
汎用ボタン | MDN |
<input type="image"> |
画像でできたボタン | MDN |
<input type="submit"> |
Submitボタン | MDN |
<input type="reset"> |
リセットボタン | MDN |
Hidden
| 要素 | 説明 | MDN |
|---|---|---|
<input type="hidden"> |
隠し入力欄 | MDN |