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">Clet 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">Clet 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']`);