JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について現役エンジニアが解説しています。DOMとはHTMLの文章構造を表したものです。Document.formsプロパティにはformタグの全ての内容が収められています。form要素を取得する方法を解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

DOMとは

Document Object Modeの略で、文章の構造を表したプログラミングインターフェースです。平たく言うと、文章構造を表現したり操作する部品の集まりです。

ブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。DOMの中にはこのHTMLの要素を操作する機能も用意されています。これにより、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。

[PR] フロントエンドで挫折しない学習方法を動画で公開中

Document.formsプロパティとは

文章を表すDocumentインターフェースが持つプロパティの一つで、HTMLにあるformタグを全て格納しています。formを全て格納するため、formsと複数形のsが付いています。formタグを参照したり操作する場合に使用します。

Document.formsプロパティの使い方

Documentのオブジェクトであるdocumentが、JavaScriptに標準で用意されていますのでdocument.formsと記述すれば使うことができます。

form要素を取得する方法

Document.formsは複数のformを格納した配列のようなオブジェクトなので、document.forms[0]やdocument.forms[【formの名前】]のようにformを指定することで任意のform要素を取得できます。

form部品を取得する方法

formタグの中にある入力欄などのinputタグのような部品を取得するには、form要素に.elementsと記述することで取得できます。

Document.formsと同じようにelementsも全てのform部品を格納した配列のようなオブジェクトになっています。そのため任意のform部品を扱う場合は、elements[0]やelements[【inputの名前】]のように指定します。

実際に書いてみよう

JavaScriptでのformの操作を見るために、まずはHTMLソースに2つのformタグを記述したものを用意しました。これをそれぞれ取得し操作する例を紹介します。

HTMLソース

<form name='form1'>
  1つ目のformの入力欄:<input type="text" name='input1'>
  <input type="number">
  <input type="checkbox" name='check' value='0'>確認する
</form>

<form>
  2つ目のformの入力欄:<input type="text">
</form>

JavaScriptソース

document.forms[0].elements[0].value = '1つめのformの1つ目の入力欄に入る文字列です';
document.forms[0].elements[2].checked = true;
document.forms[1].elements[0].value = '2つめのformの1つ目の入力欄に入る文字列です。'

このJavaScriptソースでは、何番目かという指定方法で入力欄の値を書き換えています。

document.forms[0]は、要素は0から始まるためformの1つ目を指定しています。elements[0]は、同様に1つ目のinputタグを指定しています。inputタグのvalueに文字列を渡すことで、文字が表示されます。

elements[2」は、3つ目のinputタグを指定し、checkboxなのでcheckedにtrueを渡すことでチェックが入ります。参考までに同じ処理を、何番目かではなく名前(HTMLのnameの値)で指定する記述も紹介します。

名前を使うことで何を指定しているかがわかりやすくなるメリットがあります。処理の内容はまったく同じになります。

document.forms['form1'].elements['input1'].value = '1つめのformの1つ目の入力欄に入る文字列です';
document.forms['form1'].elements['check'].checked = true;

 

まとめ

HTMLの要素の取得や操作の方法はいくつかありますが、その中の1つとして、今回のようにJavaScriptに標準で格納されているオブジェクトとプロパティを使う方法があります。

HTMLソースに手を加えずに使えるというメリットがありますので適宜使い分けてみてください。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。