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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

フォーム要素を取得する

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

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

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

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

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

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でフォーム要素の値を設定・取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍