第15章 フォームの使い方
JAVASCRIPTを用いることで、動的にWEBページの内容を書き換えたりフォームに入力された内容をクライアント側でチェックするといった処理が行えます。
homepage
# **フォームの使い方/JavaScript** *** テキストを入力したり、データを選択、実行ボタンをクリックして貰う等してJavaScriptを動作させたい時があります。これは、フォームで実現可能です。 以下の例ではボタン要素のクリックイベントにイベントリスナを登録しておき、イベントリスナを関数としてまとめてあります。フォームの使い方と同時に参考にしてみてください。まずは入力したデータを取得して、表示するという簡単な例を挙げてみます。 <br> ## **1.テキストボックスの操作** ### document.form名.input名.value テキストボックスに表示されている文字列を取得します。 テキストエリア```<textarea></textarea>```の文字列も取得できます。 #### **例** [sample15-1.html] ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> <script> function sample2_1() { //テキストエリアの値を取得 var hoge = document.sample2_1form.textbox.value; alert(hoge + "が入力されました。"); } </script> </head> <body> <form name="sample2_1form"> <input type="text" name="textbox"> <input type="button" value="sample2_1" onclick="sample2_1()"> </form> </body> </html> ``` #### **実行結果**  <br> #### **例** [sample15-2.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サンプル</title> <script> //テキストボックスの文字を取得する function display() { var str1 = document.welcome.txtbox.value; var str2 = document.welcome.txtarea.value; alert(str1 + "さんの感想は" + str2 + "です。"); } //テキストボックスの文字を操作する function clr() { document.welcome.txtbox.value = ""; document.welcome.txtarea.value = ""; } </script> </head> <body> <form name="welcome"> お名前：<input type="text" name="txtbox" value=""><br><br> 感想：<textarea name="txtarea" value="" rows="2" cols="20"></textarea><br><br> <input type="button" value="感想の表示" onclick="display()"><br> <input type="button" value="消去" onclick="clr()"><br> </form> </body> </html> ``` #### **実行結果**  <br><br> ## **2.チェックボックスを扱う** ### document.form名.checkbox名.checked 取得した値はチェックされていればtrue、チェックされていなければfalseとなります。 サンプルではif文を使用し、チェックされているかを判定して処理を分岐しています。 #### **例** [sample15-3.html] ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> <script> function sample2() { var hoge = sample2_2form.chkbox.checked; if (hoge == true) { alert("チェックが入っています"); } else { alert("チェックが入っていません"); } } </script> </head> <body> <form name="sample2_2form"> <input type="checkbox" name="chkbox" />チェックボックス <input type="button" value="チェック" onclick="sample2()"> </form> </body> </html> ``` #### **実行結果** <iframe src="javascript: '<head> <script> function sample2() { var hoge = sample2_2form.chkbox.checked; if (hoge == true) { alert("チェックが入っています"); } else { alert("チェックが入っていません"); } } </script> </head> <body> <form name="sample2_2form"> <input type="checkbox" name="chkbox" />チェックボックス <input type="button" value="チェック" onclick="sample2()"> </form> </body>'" height="100" width="800"></iframe> <br><br> ### **elements[]を利用したフォーム操作** JavaScriptでフォームを操作する時には、elements[]を使う方法もあります。 elements[]を使うと、フォームに設置された各ボックスやボタンを上から順番に取得することができます。 #### **例** [sample15-4.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script> function boxCheck() { var str = ""; for (i = 0; i < 5; i++) { if (document.chbox.elements[i].checked) { if (str != "") { str = str + ","; } str = str + document.chbox.elements[i].value; } } if (str == "") { alert("どれが選択してください"); } else { alert(str + "が選択されました") } } </script> </head> <body> <form name="chbox"> あなたの好きなスポーツは？(複数可)<br> <input type="checkbox" value="サッカー">サッカー<br> <input type="checkbox" value="バスケットボール">バスケットボール<br> <input type="checkbox" value="ジョギング">ジョギング<br> <input type="checkbox" value="水泳">水泳<br> <input type="checkbox" value="他">この中には無い<br> <input type="button" value="確認" onclick="boxCheck()"> </form> </body> </html> ``` #### **実行結果**  <br><br> ## **3.ラジオボタンを使ったサンプル** ### document.form名.radio名.value ### document.form名.radio名.checked #### **例** [sample15-5.html] ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> <script type="text/javascript"> function sample2_3() { for (var i = 0; i < sample2_3form.radio.length; i++) { if (sample2_3form.radio[i].checked == true) { var hoge = sample2_3form.radio[i].value; alert(hoge + "が選択されています"); } } } </script> </head> <body> <form name="sample2_3form"> <input type="radio" name="radio" value="ラジオ1" />ラジオ1<br> <input type="radio" name="radio" value="ラジオ2" />ラジオ2<br> <input type="radio" name="radio" value="ラジオ3" />ラジオ3<br> <input type="button" value="選択" onclick="sample2_3()"> </form> </body> </html> ``` ### **実行結果**  <br><br> ## **4.セレクトボックスを扱うサンプルスクリプト** ### document.form名.select名.value #### **例** [sample15-6.html] ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> <script type="text/javascript"> function sample2_4() { var selectValue = sample2_4form.dropList.value; alert(selectValue + "が選択されています"); } </script> </head> <body> <form name="sample2_4form"> <select name="dropList"> <option value="ドロップ1">ドロップ1</option> <option value="ドロップ2">ドロップ2</option> <option value="ドロップ3">ドロップ3</option> </select> <input type="button" value="選択" onclick="sample2_4()"> </form> </body> </html> ``` #### **実行結果**  <br><br> ## **5.禁止状態のサンプルスクリプト** ### document名.form名.要素名.disabled 下の例は、名前と感想を記入してもらったらボタンが押せるようになるスクリプトです。 では、以下のソースをHTMLのbody内に記入してみましょう。 #### **例** [sample15-7.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> function wupBtn() { //名前と感想の欄のテキストを変数に代入する var namae = document.send.namae.value; var kanso = document.send.kanso.value; //名前若しくは感想欄のどちらかが空かチェック if ((namae == "") || (kanso == "")) { //どちらか空であれば、ボタンを押せなくする document.send.btn.disabled = true; } else { //両方とも書き込まれていたら、ボタンを押せるようにする document.send.btn.disabled = false; } } </script> </head> <body> <form name="send"> お名前：<input type="text" value="" name="namae" onchange="wupBtn()"> <br> <br> 感想：<textarea rows="2" cols="20" name="kanso" onchange="wupBtn()"></textarea> <br> <br> <input type="button" value="送信" name="btn" disabled> </form> </body> </html> ``` #### **実行結果**  ## **6.フォーカスを操作する** ### document名.form名.要素名.focus() ### document名.form名.要素名. blur() 最初にフォーカスを合わせたり外したりしてみます。 これは、最初に入力してもらいたい枠にフォーカスを合わせておく場合などに使用します。 #### **例** [sample15-8.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //フォーカスを合わせる関数 function fc() { document.fcset.text1.focus(); } //フォーカスを外す関数 function bl() { document.fcset.text1.blur(); } </script> </head> <body> <form name="fcset"> <input type="text" name="text1" value=""> <input type="button" value="合わせる" onclick="fc()"> <input type="button" value="外す" onclick="bl()"><br> </form> </body> </html> ``` #### **実行結果** <iframe src="javascript: '<head> <script> function fc() { document.fcset.text1.focus(); } function bl() { document.fcset.text1.blur(); } </script> </head> <body> <form name="fcset"> <input type="text" name="text1" value=""> <input type="button" value="合わせる" onclick="fc()"> <input type="button" value="外す" onclick="bl()"><br> </form> </body>'" height="100" width="800"></iframe> <br><br> *** >**練習** >>**問題**[ex15-1.html] 姓名、性別、年齢項目があるフォームを作成し、半角数字以外を年齢項目に入力したら、エラーメッセージをalertください。
content
戻る
