JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について現役エンジニアが解説しています。DOMとはHTMLの文章構造を表したものです。Document.formsプロパティにはformタグの全ての内容が収められています。form要素を取得する方法を解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
nakamoto
JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
JavaScriptでDocument.formsプロパティを使うと、form要素を取得できます。
実務でも、JavaScriptでDocument.formsプロパティを使って入力フォームの情報を操作するので、ぜひ学習してみてください。
目次
- DOMとは
- Document.formsプロパティとは
- Document.formsプロパティの使い方
- form要素を取得する方法
- form部品を取得する方法
- 実際に書いてみよう
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について詳しく説明していくね！
お願いします！
DOMとは
Document Object Modelの略で、文章の構造を表したプログラミングインターフェイスです。
平たく言うと、文章構造を表現したり操作する部品の集まりです。
ChromeなどのブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。
DOMの中には、このHTMLの要素を操作する機能も用意されています。
HTMLの要素を操作することで、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。
Document.formsプロパティとは
Document.formsプロパティとは、文章を表すDocumentインターフェイスが持つプロパティの一種です。
Document.formsプロパティには、HTMLにあるformタグをすべて格納しています。
Document.formsプロパティで、formをすべて格納するため、formsと複数形のsが付いています。
Document.formsプロパティは、formタグを参照したり操作する場合に使用します。
formタグというのは、入力フォームのように、ユーザーが情報を入力する際に利用するタグです。
Document.formsプロパティの使い方
ここでは、基本的なDocument.formsプロパティの使い方を解説します。
基本文法
document.forms[index]解説
Document.formsプロパティは、document.formsと記述すれば使うことができます。
[index]の部分に、インデックスを指定することが可能です。
Document.formsの返り値は、配列ではなく HTMLCollection オブジェクトです。
JavaScriptに標準で用意されてる、Documentのオブジェクトであるdocumentを利用する文法です。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
form要素を取得する方法
ここでは、form要素を取得する方法を解説します。
基本コード
document.forms[0]
document.forms['nameのプロパティ名']
解説
Document.formsは複数のformを格納した配列のようなオブジェクトです。
厳密に言えば配列ではなく、HTMLCollection オブジェクトと言います。
document.forms[0]のようにformを指定することで任意のform要素を取得できます。
document.forms[‘nameのプロパティ名’]というように、該当するnameのプロパティ名を指定することで、該当するnameで指定されたform要素を取得できます。
form部品を取得する方法
ここでは、form部品を取得する方法を解説します。
基本コード
document.forms[0].elements[0]
document.forms['nameのプロパティ名'].elements['nameのプロパティ名']
解説
document.forms[0].elementsでは、formタグの中にある入力欄などの部品を取得できます。
elements[0]の位置に、inputタグのような部品が該当する場合に、document.forms[0].elements[0]でinputタグの要素が取得可能です。
Document.formsと同じようにelementsもすべてのform部品を格納したHTMLCollection オブジェクトです。
そのため任意のform部品を扱う場合は、elements[0]やelements[【inputの名前】]のように[‘nameのプロパティ名’]を指定します。
実際に書いてみよう
JavaScriptでのformの操作を見るために、まずはHTMLソースに2つのformタグを記述したものを用意しました。
HTMLに存在する要素を、Document.formsで実際に取得してみましょう。
HTMLサンプルコード
<form name='form1'>
1つ目のformの入力欄：<input type="text" name='input1'>
<input type="number">
<input type="checkbox" name='check' value='0'>確認する
</form>
<form name='form2'>
2つ目のformの入力欄：<input type="text" name='input2'>
</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つ目の入力欄に入る文字列です。'nameを利用した場合のサンプルコード
document.forms['form1'].elements['input1'].value = '1つめのformの1つ目の入力欄に入る文字列です';
document.forms['form1'].elements['check'].checked = true;
document.forms['form2'].elements['input2'].value = '2つめのformの1つ目の入力欄に入る文字列です。'実行結果
解説
document.forms[0].elements[0].value = ‘1つめのformの1つ目の入力欄に入る文字列です’;では、document.forms[0].elements[0].valueで指定できる、HTMLの<input type=”text” name=’input1′>のvalueに、1つめのformの1つ目の入力欄に入る文字列ですを代入しています。
[0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。
document.forms[0].elements[2].checked = true;では、document.forms[0].elements[2].checkedで指定できる、HTMLの<input type=”checkbox” name=’check’ value=’0′>のchecked に、trueを指定します。
checkedにtrueを指定することで、チェックボックスをチェックした状態にできます。
[0]のようなインデックスではなく、nameを利用して同じ指定を行う場合はnameを利用した場合のサンプルコードをご覧ください。
document.forms[1].elements[0].value = ‘2つめのformの1つ目の入力欄に入る文字列です。’では、document.forms[1].elements[0].valueで指定できる、HTMLの<input type=”text”>のvalueに、2つめのformの1つ目の入力欄に入る文字列です。を代入しています。
nameを利用した場合のサンプルコードにあるように、nameを利用することで、明示的にコードを実装することが可能です。
JavaScriptサンプルコードは、nameを利用した場合のサンプルコードの内容に置き換えが可能です。
JavaScriptサンプルコードと、nameを利用した場合のサンプルコードでは、処理結果は同じです。
JavaScriptサンプルコードのdocument.forms[0].elements[0]が、nameを利用した場合のサンプルコードのdocument.forms[‘form1’].elements[‘input1’]になります。
まとめ
Document.formsを利用することで、JavaScriptから、HTMLのformの要素や部品を取得することができました。
Document.formsで指定できるのは、インデックスやnameプロパティ名でした。
HTMLソースに手を加えずに使えるというメリットがありますので、適宜使い分けてみてください。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
