【JavaScript 練習講座】入力フォームの入力値を取得する

[JavaScript 練習講座]入力フォームの入力値を取得する

用語解説
テキストボックスの入力値を取得する
プルダウンメニューを利用する
チェックボックスのチェックされているか確認
まとめ

HTMLでは、テキストボックスやチェックボックスなど様々な入力フォームが用意されている。ユーザーが入力フォームに入力した値（入力値）を、 JavaScriptで利用する方法を学習する。

用語解説

入力値入力フォームにユーザーが入力したものを、「入力値」という。

ユーザーが入力した値を「入力値」という。たとえば、テキストボックスにユーザーが「IORI」と入力した場合、文字列「IORI」を「入力値」と言う。あるいは、プルダウンメニューでユーザーが選択した値も「入力値」という。

テキストボックスの入力値を取得する

テキストボックスの入力値を取得して、ダイアログに表示する方法を学習する。

001<html><head>
002<script>
003
004function clickLink () {
005
006  //[input]タグを取得
007  const input = document.getElementById ( "test" ) ;
008
009  //[input]タグの入力文字を表示
010  alert ( input.value ) ;
011}
012</script>
013</head>
014<body>
015  <input type = "text" id = "test" ><br>
016  <a href="javascript:clickLink()" >Click</a>
017</body>
018</html>

Click

Webブラウザでファイルを開くと、テキストボックスと、Clickリンクが表示する。テキストボックスに文字を入力してClickリンクをクリックすると、テキストボックスに入力した文字がalert()ダイアログに表示される。
では、プログラムを解説する。15行目のinputタグを見る。 id属性が存在し、値に「test」とある。こんかい、このテキストボックスの入力値をダイアログに表示する。その処理を記述するには、テキストボックスを取得する必要がある。テキストボックスを取得するために、このようにid属性を記述する。
16行目のClickリンクを見る。 Clickリンクのhref属性の値は、「javascript:clickLink()」である。 Clickリンクをクリックすると、clickLink()関数が実行する。

004function clickLink () {
005
006  //[input]タグを取得
007  const input = document.getElementById ( "test" ) ;
008
009  //[input]タグの入力文字を表示
010  alert ( input.value ) ;
011}

clickLink()関数である。7行目で document オブジェクトの getElementById()関数を実行して、 idが「test」のタグを取得し、取得したタグを変数inputに代入する。 idの値が「test」のタグは、こんかい、テキストボックスである。変数inputの中に、テキストボックス（のオブジェクト）が代入される。さて、10行目が新しいプログラムである。

入力値が入っているプロパティテキストボックスのオブジェクト.value ;

こんかい、入力フォームの入力値を取得したい。入力フォームの入力値は入力フォームのvalueプロパティに入っている。

010alert ( input.value ) ;

変数inputには、テキストボックスのオブジェクトが入っている。

010alert ( テキストボックス.value ) ;

テキストボックスのvalueプロパティを利用しているプログラムである。

010alert ( テキストボックスの入力値 ) ;

入力値を表示して関数が終了する。解説は以上である。

プルダウンメニューを利用する

プルダウンメニューを表示して、ユーザーがどのメニューを選んだかJavaScriptで取得するプログラムを見る。

001<html><head>
002<script>
003
004function clickLink () {
005
006  //[input]タグを取得
007  const input = document.getElementById ( "test" ) ;
008
009  //[input]タグの入力文字を表示
010  alert ( input.value ) ;
011}
012</script>
013</head>
014<body>
015  <select id = "test" >
016    <option value = "tea" >お茶</option>
017    <option value = "ball" >ボール</option>
018    <option value = "pen" >ペン</option>
019  </select><br>
020  <a href="javascript:clickLink()" >Click</a>
021</body>
022</html>

お茶
Click

Webブラウザでファイルを開くと、プルダウンメニューとClickリンクが表示する。プルダウンメニューの初期値は「お茶」である。プルダウンメニューを開くと、「お茶」「ボール」「ペン」が表示する。ユーザーはこの中から一つ、選択できる。
では解説する。まず、15行目のselectタグに注目する。 selectタグにid属性があり「test」とある。ユーザーがどのメニューを選択したのか確認するために、このidを利用する。16行目から18行目まで、プルダウンメニューのメニューが optionタグで記載されている。

ラベル	value
お茶	tea
ボール	ball
ペン	pen

optionタグをまとめた。「ラベル」はWeb画面上に表示される文字列である。 valueは重要である。optionタグにvalue属性がある。「お茶」「ボール」「ペン」のvalue属性の値は「tea」「ball」「pen」である。プルダウンメニューの入力値とは、ユーザーが選択したメニューのvalueのことである。（後ほど確認する）

ボール
Click

ユーザーが「ボール」を選択してClickリンクをクリックしたと仮定する。 Clickリンクのhref属性に「clickLink()」とあるので、 Clickリンクをクリックすると、clickLink()関数が実行する。

004function clickLink () {
005
006  //[input]タグを取得
007  const input = document.getElementById ( "test" ) ;
008
009  //[input]タグの入力文字を表示
010  alert ( input.value ) ;
011}
012</script>
013</head>
014<body>
015  <select id = "test" >
016    <option value = "tea" >お茶</option>
017    <option value = "ball" >ボール</option>
018    <option value = "pen" >ペン</option>
019  </select><br>

7行目で、idが「test」のタグを取得して、変数inputに代入する。変数inputには、selectタグが代入される。 10行目で、変数inputのvalueプロパティを確認する。変数inputには、selectタグが入っている。 selectタグのvalueプロパティは、なんだろうか？

selectタグのオブジェクトのvalueプロパティ選択されているoptionタグのvalueの値

selectタグのオブジェクトのvalueプロパティには、ユーザーが選択したメニュー（optionタグ）の valueが入っている。今、「ボール」が選択されていると仮定している。この場合、selectタグのvalueプロパティには、「ボール」のoptionタグの valueが入っている。

ラベル	value
お茶	tea
ボール	ball
ペン	pen

「ボール」のvalueには「ball」が記述されている。

004function clickLink () {
005
006  //[input]タグを取得
007  const input = document.getElementById ( "test" ) ;
008
009  //[input]タグの入力文字を表示
010  alert ( ball ) ;
011}
012</script>
013</head>
014<body>
015  <select id = "test" >
016    <option value = "tea" >お茶</option>
017    <option value = "ball" >ボール</option>
018    <option value = "pen" >ペン</option>
019  </select><br>

10行目の値は「ball」となる。注意したいのは select オブジェクトの value プロパティに、ラベルの「ボール」が入っているわけではない、という事である。

ユーザーが選択した値は、selectタグ.value で取得
valueの値は、ユーザーが選択したメニュー（optionタグ）のvalue属性の値

selectタグの利用方法である。覚える必要はない。全くない。「こんなものかな」という事を、心の片隅に置いてくれれば良い。

チェックボックスのチェックされているか確認

チェックボックスがチェックされているか確認するプログラムを見る。

001<html><head>
002<script>
003function clickLink () {
004
005  //[input]タグを取得
006  const input = document.getElementById ( "test" ) ;
007
008  //[input]タグの入力文字を表示
009  alert ( input.checked ) ;
010}
011</script>
012</head>
013<body>
014  <input type = "checkbox" id = "test" ><br>
015  <a href="javascript:clickLink()" >Click</a>
016</body>
017</html>

Click

Webブラウザでファイルを開くと、チェックボックスとClickリンクが表示する。チェックボックスをチェックしてClickリンクをクリックすると、「true」と表示し、チェックボックスをチェックせずにClickリンクをクリックすると、「false」と表示する。
解説する。14行目に注目する。inputタグのtype属性に「checkbox」とあるので、チェックボックスが表示する。こんかい、チェックボックスにチェックがついているかどうか確認するプログラムを作成したい。そのため、チェックボックスのオブジェクトを取得する必要がある。今までのサンプルプログラムと同様、チェックボックスにid属性を記述して、値を「test」とした。このidを利用してチェックボックスを取得する。
では、15行目から解説する。Clickリンクをクリックすると、clickLink()関数が実行する。

003function clickLink () {
004
005  //[input]タグを取得
006  const input = document.getElementById ( "test" ) ;
007
008  //[input]タグの入力文字を表示
009  alert ( input.checked ) ;
010}

6行目で、idが「test」のタグを取得する。こんかい、「test」のidを持つタグはチェックボックスである。 6行目は、チェックボックスを取得して、変数inputに代入するプログラムである。 9行目が新しいプログラムである。

チェックボックスのチェックを確認チェックボックス.checked ;

チェックボックスにチェックが入っているか確認する場合、チェックボックスオブジェクトのcheckedプロパティを確認する。いままで学習したテキストボックスやプルダウンメニューは、値を取得する際、 valueプロパティを利用した。チェックボックスはcheckedプロパティを利用する。
チェックボックスがチェックされている場合、checkedプロパティには、「true」が代入されており、チェックされていない場合、「false」が入っている。覚える必要はない。必要な時に素早くネットで検索して解決できれば良い。本講座は以上である。

まとめ

入力値が入っているプロパティテキストボックスのタグ.value ;