【JavaScrip】フォーム要素の値を設定・取得する【forms】

こんにちは、Ryohei（@ityryohei）です！

本記事では、フォーム要素の値を設定・取得する方法のご紹介しています。フォーム要素を取得して、テキストフィールドやチェックボックス、ラジオボタンといったよく要素にアクセスする方法も併せてご紹介しています。

フォーム要素に値を設定したり取得したりしたいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

フォーム要素を取得する

ドキュメント内のフォームを取得する方法は複数ありますが、ここではformsプロパティを使用します。formsプロパティは、ドキュメント内に存在するフォーム要素をHTMLCollection形式ですべて取得することができるプロパティです。

取得方法も簡潔で、例えば、下記のように複数のフォーム要素が記述されたドキュメントがあるとします。

<form name="contactForm" method="post" action="#">
  ～省略～
</form>

<form name="entryForm" method="post" action="#">
  ～省略～
</form>

下記のスクリプトを実行すると、nameの値がcontactFormとentryFormとなっている両方のフォーム要素を取得することができます。

const formElements = document.forms;

どちらかだけを取得したい場合は、index番号を指定することができます。index番号でフォームを指定する場合は、formsの後に [] を追記してindex番号を指定します。index番号はドキュメントの上から順番に割り振られる番号です。上記例の場合、index番号に0を指定すると、ソースを上から見ていって最初に見つかるcontactFormを取得することができます。

const formElements = document.forms[0];

index番号ではなく、フォーム要素に設定しているname属性の値でも取得できます。name属性で指定する場合は、formsの後にメソッドチェーンでname属性の値を指定します。

const formElements = document.forms.contactForm;

以上でフォーム要素を取得する

フォーム要素がinput要素にアクセスする

formsプロパティでフォーム要素を取得できたら、次はフォーム要素が持つinput要素にアクセスします。確認用に下記のフォームを使用します。

<form name="contactForm" method="post" action="#">
  <p>Text</p>
  <input type="text" name="text" value="Test">

  <p>Radio</p>
  <input type="radio" name="radio" value="radio1">
  <input type="radio" name="radio" value="radio2">
  <input type="radio" name="radio" value="radio3">

  <p>Checkbox</p>
  <input type="checkbox" name="checkbox" value="checkbox1">
  <input type="checkbox" name="checkbox" value="checkbox2">

  <p>Select</p>
  <select name="select">
    <option value="select1">select1</option>
    <option value="select2">select2</option>
    <option value="select3">select3</option>
  </select>

  <p>Textarea</p>
  <textarea name="textarea">Test</textarea>
</form>

まずはformsプロパティで上記のフォームを取得します。name属性の値を指定してフォーム要素を取得します。

const formElements = document.forms.contactForm;

フォーム要素が取得できましたので、フォーム要素が持つ各input要素（テキストフィールド、チェックボックス、セレクトボックス、テキストエリア）に値を設定・取得してみます。

テキストフィールドの値を設定・取得する

取得したフォーム要素が持つinput要素（text）にname属性を指定してアクセスし、値を設定・取得します。

HTML

<input type="text" name="text" value="Test">

JavaScript（設定）

formElements.text.value = 'Test';

JavaScript（取得）

console.log('Text: ', formElements.text.value); //結果 Text: Test

ラジオボタンの値を設定・取得する

取得したフォーム要素が持つinput要素（radio）にname属性の値を指定してアクセスし、値を設定・取得します。

HTML

<input type="radio" name="radio" value="radio1">
<input type="radio" name="radio" value="radio2">
<input type="radio" name="radio" value="radio3">

JavaScript（設定）

formElements.radio.value = 'radio1';

JavaScript（取得）

console.log('Radio: ', formElements.radio.value); //結果 Radio: radio1

チェックボックスの値を設定・取得する

取得したフォーム要素が持つinput要素（checkbox）にname属性の値を指定してアクセスし、値を設定・取得します。checkboxは複数選択することができるため、チェック済みの要素のみを取得しています。

HTML

<input type="checkbox" name="checkbox" value="checkbox1">
<input type="checkbox" name="checkbox" value="checkbox2">

JavaScript（設定）

formElements.checkbox[1].checked = true;

JavaScript（取得）

Array.prototype.forEach.call(formElements.checkbox, function (checkbox) {
  if(checkbox.checked === true){
    console.log('Checkbox: ', checkbox.value);
  }
});

セレクトボックスの値を設定・取得する

取得したフォーム要素が持つselect要素にname属性の値を指定してアクセスし、値を設定・取得します。

HTML

<select name="select">
  <option value="select1">select1</option>
  <option value="select2">select2</option>
  <option value="select3">select3</option>
</select>

JavaScript（設定）

formElements.select.value = 'select1';

JavaScript（取得）

console.log('Select: ', formElements.select.value); //結果 Select: radio1

テキストエリアの値を設定・取得する

取得したフォーム要素が持つtextarea要素にname属性の値を指定してアクセスし、値を設定・取得します。

HTML

<textarea name="textarea">Test</textarea>

JavaScript（設定）

formElements.textarea.value = 'Test';

JavaScript（取得）

console.log('Textarea: ', formElements.textarea.value); //結果 Textarea: Test

最後に

お問い合わせフォームは、Webサイトはもちろん、Webアプリケーションなどでユーザーから意見を受ける窓口となる必要不可欠なコンテンツです。フォーム要素を取り扱えるようになることで、入力内容の検証やユーザービリティに配慮した使いやすいフォームが構築できるようになりますので、ある程度の使い方を覚えておくと良いかもしれませんね。

以上、JavaScriptでフォーム要素の値を設定・取得する方法のご紹介でした！