JavaScript | querySelector()でフォームパーツの指定方法まとめ

JavaScriptのquerySelector()またはquerySelectorAll()を使ってフォームパーツを選択する時の指定方法をまとめています。

inputタイプのフォームパーツを全て指定する

テキストフォーム、サーチフォーム、ラジオボタン、チェックボックス、スライダーフォーム、カレンダーフォームなど「input」タイプのHTML要素は以下のコードで一括指定する事が可能です。

テキストエリアやセレクトフォームなど「input」タイプではないフォームもある事、submitボタンも取得してしまう事に注意が必要です。

let text_form = document.querySelectorAll(`input`);

name属性で指定する

フォームパーツのname属性は、全てのフォームパーツに付けいて、なおかつ値が重複していない可能性が高いです。

フォームパーツをJavascriptで指定・取得する際にはname属性を使って指定する方法はとても便利です。

let target_form = document.querySelector(`[name='taeget']`);

ラジオボタン、チェックボックスなどは同じname属性を持つパーツが複数存在しますので、querySelectorAll()を利用するか、別の方法を利用します。

テキスト入力フォームを指定する

テキスト入力フォーム「input type="text"」がひとつだけの場合はquerySelector()で問題ありませんが、複数ある場合はname属性を指定するかquerySelectorAll()を利用します。

<input type="text" name="name" value="">
let text_form = document.querySelector(`input[type='text']`);
let text_form = document.querySelector(`input[type='text'][name='name']`);
let text_forms = document.querySelectorAll(`input[type='text']`);

検索フォームを指定する

検索フォーム「input type="search"」は多くの場合ひとつのドキュメントにひとつだと思われますのでquerySelector()で問題ありません。
もし、複数ある場合はname属性で指定するかquerySelectorAll()を利用します。

関連:JavaScript | 検索フォームの入力イベントを実装する方法 | ONE NOTES

<input type="search" name="name" value="">
let search_form = document.querySelector(`input[type='search']`);
let search_form = document.querySelector(`input[type='search'][name='name']`);
let search_forms = document.querySelectorAll(`input[type='search']`);

テキストエリアを指定する

テキストエリア「textarea」のフォームがドキュメント内にひとつの場合はquerySelector()で問題ありません。
複数ある場合はname属性で指定するかquerySelectorAll()を利用します。

関連:JavaScript | テキストエリア(textarea)の入力イベントを実装する方法 | ONE NOTES

<textarea name="name"><textarea>
let textarea = document.querySelector(`textarea`);
let textarea = document.querySelector(`textarea[name='name']`);
let textareas = document.querySelectorAll(`textarea`);

ラジオボタンを指定する

ラジオボタン「input type="radio"」は殆どのケースで複数存在しますので、querySelectorAll()を利用して各パーツを取得します。

先の処理でラジオボタンの選択を取得する場合は、for文を使ってチェックされているかどうかを判別します。
関連:JavaScript | ラジオボタン(radio)の切り替えイベントを実装する方法 | ONE NOTES

<input type="radio" name="name" value="A" checked>A
<input type="radio" name="name" value="B">B
<input type="radio" name="name" value="C">C
let radio_btns = document.querySelectorAll(`input[type='radio']`);
let radio_btns = document.querySelectorAll(`input[type='radio'][name='name']`);

チェックボックスを指定する

チェックボックス「input type="checkbox"」は多くのケースで同じname属性のパーツが複数存在すると考えられます。
querySelectorAll()を利用して各パーツを取得します。

先の処理でチェックボックスの状態を取得する場合は、for文を使ってチェックされているかどうかを判別します。
関連:JavaScript | チェックボックスの入力イベントを実装する方法 | ONE NOTES
関連:JavaScript | チェックボックスの状態を取得する方法 | ONE NOTES

<input type="checkbox" name="name" value="A">A
<input type="checkbox" name="name" value="B">B
<input type="checkbox" name="name" value="C">C
let checkbox = document.querySelectorAll(`input[type='checkbox']`);
let checkbox = document.querySelectorAll(`input[type='checkbox'][name='name']`);

カレンダーの入力フォームを指定する

カレンダーの入力フォーム「input type="date"」がページ内にひとつの場合はquerySelector()、複数ある場合はname属性で指定するかquerySelectorAll()を利用します。

関連:JavaScript | カレンダー(date)の日付選択フォームの入力イベントを実装する方法 | ONE NOTES

<input type="date" name="name">
let date_form = document.querySelector(`input[type='date']`);
let date_form = document.querySelector(`input[type='date'][name='name']`);
let date_forms = document.querySelectorAll(`input[type='date']`);

スライダーの入力フォームを指定する

スライダーの入力フォーム「input type="range"」がドキュメント内にひとつの場合、querySelector()で問題ありません。
複数ある場合はname属性で指定するかquerySelectorAll()を利用します。

関連:JavaScript | スライダー(range)の変更イベントを実装する方法 | ONE NOTES

<input type="range" name="name" min="0" max="100" step="1" value="">
let range_form = document.querySelector(`input[type='range']`);
let range_form = document.querySelector(`input[type='range'][name='name']`);
let range_forms = document.querySelectorAll(`input[type='range']`);

セレクトメニューを指定する

セレクトメニュー「select」がドキュメント内にひとつの場合、querySelector()で問題ありません。
複数ある場合はname属性で指定するかquerySelectorAll()を利用します。

セレクトメニューの値を取得する方法は以下のページにて紹介しています。
関連:JavaScript | セレクトメニュー(select)の変更イベントを実装する方法 | ONE NOTES
関連:JavaScript | セレクトメニュー(プルダウン)の状態を取得する方法 | ONE NOTES

<select name="type">
	<option value="A" selected>A</option>
	<option value="B">B</option>
	<option value="C">C</option>
</select>
let select_menu = document.querySelector(`select`);
let select_menu = document.querySelector(`select[name='name']`);
let select_menu = document.querySelectorAll(`select[type='range']`);

送信ボタンを指定する

送信ボタン「input type="submit"」がドキュメント内にひとつの場合、querySelector()、複数ある場合はname属性で指定するかquerySelectorAll()を利用します。

<input type="submit" name="name" value="送信">
let submit_btn = document.querySelector(`input[type='submit']`);
let submit_btn = document.querySelector(`input[type='submit'][name='name']`);
let submit_btns = document.querySelectorAll(`input[type='submit']`);