お問合わせのメールやユーザー登録に使うフォームですが、初心者が使いこなすには少し複雑です。

送信しても値が入っていなければキャンセルしたり、チェックボックスから複数の値を取得したり色々なテクニックを使わなければなりません。

そこで、今回はフォームのhtmlサンプルコードと、JavaScriptでフォームの値を取得するためのコードをご紹介します。

コピペで使えるサンプルコードも記載しているので、実際に自分の手で試してみてください!

スポンサーリンク

フォーム

コード

テキストボックス

最もよく使用する基本的な入力フォームですね。

コード

デモ


パスワード

パスワードを入力させるときは、セキュリティの観点から入力した文字が表示されないようにしなければなりません。

コード

デモ


複数行のテキスト

プロフィールなどは1行では入力できません。そのため、複数行のテキストを入力できるtextareaを使用します。

コード

デモ


ラジオボタン

ラジオボタンは1つだけ必ず選択しなければならない項目で使用します。checkedと記載しておくと、その項目を初期値としてチェックを入れておくことができます。

コード

デモ

項目1
項目2
項目3

チェックボックス

チェックボックスは複数の項目を選択するような場合に使用します。

コード

デモ

項目1
項目2
項目3

セレクトボックス

セレクトボックスはプルダウンで項目を1つ選択するときに使用します。

コード

デモ


送信ボタン

フォームを作成した場合には、送信ボタンが必ず必要です。valueに設定した値がボタンのテキストとして使用されます。

コード

デモ


サンプルフォーム

ここまでにご紹介したパーツを1つにまとめると、このようなフォームが完成します。

テキストボックス

パスワード

複数行のテキスト

ラジオボタン
項目1
項目2
項目3

チェックボックス
項目1
項目2
項目3

セレクトボックス



結果

↑のフォームを送信するとここに結果が表示されます。

htmlのコード

上記のフォームのhtmlのコード

JavaScriptのコード

結果で使用したJavaScriptのコード(今回はjqueryを使用してフォームの値を取得しています)

まとめ

フォームはよく使われる機能ですが、JavaScriptやPHPで値を取得してチェックすると意外と複雑なコードになってしまいます。

色々な方法で実現できますが、自分の中で1つやり方を決めておいてその方法を使いまわすようにするとコーディングが早くなります。

フォームを使いこなせるようになると、実装の幅が広がるので、是非挑戦してみてください!

スポンサーリンク

おすすめの記事