お問合わせのメールやユーザー登録に使うフォームですが、初心者が使いこなすには少し複雑です。
送信しても値が入っていなければキャンセルしたり、チェックボックスから複数の値を取得したり色々なテクニックを使わなければなりません。
そこで、今回はフォームのhtmlサンプルコードと、JavaScriptでフォームの値を取得するためのコードをご紹介します。
コピペで使えるサンプルコードも記載しているので、実際に自分の手で試してみてください！
フォーム
コード
|
1 |
<form name="form" id="form"></form> |
テキストボックス
最もよく使用する基本的な入力フォームですね。
コード
|
1 |
<input type="text" name="text"> |
デモ
パスワード
パスワードを入力させるときは、セキュリティの観点から入力した文字が表示されないようにしなければなりません。
コード
|
1 |
<input type="password" name="password"> |
デモ
複数行のテキスト
プロフィールなどは1行では入力できません。そのため、複数行のテキストを入力できるtextareaを使用します。
コード
|
1 |
<textarea name="textarea" cols="50" rows="5" placeholder="placeholder"></textarea> |
デモ
ラジオボタン
ラジオボタンは1つだけ必ず選択しなければならない項目で使用します。checkedと記載しておくと、その項目を初期値としてチェックを入れておくことができます。
コード
|
1 2 3 |
<input type="radio" name="rb1" value="項目1" checked>項目1 <input type="radio" name="rb1" value="項目2">項目2 <input type="radio" name="rb1" value="項目3">項目3 |
デモ
項目2
項目3
チェックボックス
チェックボックスは複数の項目を選択するような場合に使用します。
コード
|
1 2 3 |
<input type="checkbox" name="cb1" value="項目1">項目1 <input type="checkbox" name="cb2" value="項目2">項目2 <input type="checkbox" name="cb3" value="項目3">項目3 |
デモ
項目2
項目3
セレクトボックス
セレクトボックスはプルダウンで項目を1つ選択するときに使用します。
コード
|
1 2 3 4 5 |
<select name="selectbox"> <option value="項目1">項目1</option> <option value="項目2">項目2</option> <option value="項目3">項目3</option> </select> |
デモ
送信ボタン
フォームを作成した場合には、送信ボタンが必ず必要です。valueに設定した値がボタンのテキストとして使用されます。
コード
|
1 |
<input type="submit" value="送信"> |
デモ
サンプルフォーム
ここまでにご紹介したパーツを1つにまとめると、このようなフォームが完成します。
結果
↑のフォームを送信するとここに結果が表示されます。
htmlのコード
上記のフォームのhtmlのコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<form id="form" name="test_form" onsubmit="return check();"> テキストボックス <input type="text" name="text" placeholder="text"> パスワード <input type="password" name="password" placeholder="password"> 複数行のテキスト <textarea name="textarea" cols="50" rows="5" placeholder="placeholder"></textarea> ラジオボタン <input type="radio" name="radio" value="項目1" checked>項目1 <input type="radio" name="radio" value="項目2">項目2 <input type="radio" name="radio" value="項目3">項目3 チェックボックス <input type="checkbox" name="checkbox" value="項目1">項目1 <input type="checkbox" name="checkbox" value="項目2">項目2 <input type="checkbox" name="checkbox" value="項目3">項目3 セレクトボックス <select name="selectbox"> <option value="項目1">項目1</option> <option value="項目2">項目2</option> <option value="項目3">項目3</option> </select> <input type="submit" value="送信"> </form> |
JavaScriptのコード
結果で使用したJavaScriptのコード(今回はjqueryを使用してフォームの値を取得しています)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<script> function check(){ //テキストボックス if ($('#form [name=text]').val() == ""){ var text = "入力なし"; } else { var text = $('#form [name=text]').val(); } //パスワード if ($('#form [name=password]').val() == ""){ var password = "入力なし"; } else { var password = $('#form [name=password]').val() } //複数行のテキスト if($('#form [name=textarea]').val() == ""){ var textarea = "入力なし"; } else { var textarea = $('#form [name=textarea]').val(); } //ラジオボタン var radio = $('#form [name=radio]:checked').val(); //チェックボックス var checkbox=""; $('#form [name=checkbox]').each(function(index, element){ if($(this).prop('checked')){ if(checkbox == ""){ checkbox += $(this).val(); }else{ checkbox += ',' + $(this).val(); } } }); if(checkbox == "")checkbox = "選択なし"; //セレクトボックス var selectbox = $('#form [name=selectbox]').val(); //値を表示 $('.text_result').text('テキストボックス : ' + text); $('.pw_result').text('パスワード : ' + password); $('.ta_result').text('複数行のテキスト : ' + textarea); $('.radio_result').text('ラジオボタン : ' + radio); $('.cb_result').text('チェックボックス : ' + checkbox); $('.sb_result').text('セレクトボックス : ' + selectbox); return false; //ここでフォームの送信をキャンセルしています } </script> |
まとめ
フォームはよく使われる機能ですが、JavaScriptやPHPで値を取得してチェックすると意外と複雑なコードになってしまいます。
色々な方法で実現できますが、自分の中で1つやり方を決めておいてその方法を使いまわすようにするとコーディングが早くなります。
フォームを使いこなせるようになると、実装の幅が広がるので、是非挑戦してみてください！
