JavaScriptで入力フォームを操作する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで入力フォームを操作する方法について現役エンジニアが解説しています。入力フォームの領域の指定とデータの引き渡しを行うformタグとデータの入力を行う部品タグで構成されます。JavaScriptではフォームにつけられた名前からフォームの値を取得することが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで入力フォームを操作する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptで入力フォームを操作する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLの入力フォーム

HTMLの入力フォームは<form>タグでを使用することで作成できます。

入力フォームには、大きく分けてフォームの領域の指定とデータの引き渡しを行う<form>タグとデータの入力を行う「コントロール」と言われる部品タグで構成されます。
 

JavaScriptで入力フォームを操作するには

JavaScriptから入力フォームにアクセスするには<form>タグにnameを設定します。
nameを設定することで、documents.formsにプロパティとして追加されます。

<form name=’testform’/>とnameを設定すると、document.forms.testform;としてアクセスできます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

入力フォームの値を操作する方法

入力フォームの値を操作するには、<form>タグにnameをつけたときと同じように、入力タグにnameをつけることで、プロパティに追加されます。

<input name=’text’ type=’text’ value=’testtest’ />としてnameを設定すると、document.forms.testform.text;としてアクセスできます。
 

入力フォームから値を取得して処理を実行する方法

上記で取得した入力タグの値を取得してみます。
 

var form = document.forms.testform;

var inputVal = form.text.value  // testtest

 

実際に書いてみよう

入力タグの値を変更してみます。
 

var form = document.forms.testform;

form.text.value(“test123″)  //

var inputVal = form.text.value  // test123

 

セレクトボックスの値を操作してみます。

HTML
 

<div>

<h3>select</h3>

<select name='select'>

<option value='abc'>abc</option>

<option value='def'>def</option>

<option value='ghi'>ghi</option>

</select>

</div>

 

JavaScript
 

var form = document.forms.testform;

form.select.value = 'def';

var selectVal = form.select.value; // def

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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