お問合わせのメールやユーザー登録に使うフォームですが、初心者が使いこなすには少し複雑です。
送信しても値が入っていなければキャンセルしたり、チェックボックスから複数の値を取得したり色々なテクニックを使わなければなりません。
そこで、今回はフォームのhtmlサンプルコードと、JavaScriptでフォームの値を取得するためのコードをご紹介します。
コピペで使えるサンプルコードも記載しているので、実際に自分の手で試してみてください！
フォーム
コード
テキストボックス
最もよく使用する基本的な入力フォームですね。
コード
<input type="text" name="text">デモ
パスワード
パスワードを入力させるときは、セキュリティの観点から入力した文字が表示されないようにしなければなりません。
コード
<input type="password" name="password">デモ
複数行のテキスト
プロフィールなどは1行では入力できません。そのため、複数行のテキストを入力できるtextareaを使用します。
コード
<textarea name="textarea" cols="50" rows="5" placeholder="placeholder"></textarea>デモ
ラジオボタン
ラジオボタンは1つだけ必ず選択しなければならない項目で使用します。checkedと記載しておくと、その項目を初期値としてチェックを入れておくことができます。
コード
<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
チェックボックス
チェックボックスは複数の項目を選択するような場合に使用します。
コード
<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つ選択するときに使用します。
コード
<select name="selectbox">
<option value="項目1">項目1</option>
<option value="項目2">項目2</option>
<option value="項目3">項目3</option>
</select>デモ
送信ボタン
フォームを作成した場合には、送信ボタンが必ず必要です。valueに設定した値がボタンのテキストとして使用されます。
コード
<input type="submit" value="送信">デモ
まとめ
フォームはよく使われる機能ですが、JavaScriptやPHPで値を取得してチェックすると意外と複雑なコードになってしまいます。
色々な方法で実現できますが、自分の中で1つやり方を決めておいてその方法を使いまわすようにするとコーディングが早くなります。
フォームを使いこなせるようになると、実装の幅が広がるので、是非挑戦してみてください！