この記事は、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