コピペで使える!フォームの表示とJavaScriptでの値の取得コピペで使える!フォームの表示とJavaScriptでの値の取得お問合わせのメールやユーザー登録に使うフォームですが、初心者が使いこなすには少し複雑です。送信しても値が入っていなければキャンセルしたり、チェックボックスから複数の値を取得したり色々なテクニックを使わなければなりません。そこで、今回はフォームのhtmlサンプルコードと、JavaScriptでフォームの値を取得するためのコードをご紹介します。id="form"></form>テキストボックス最もよく使用する基本的な入力フォームですね。name="text">デモパスワードパスワードを入力させるときは、セキュリティの観点から入力した文字が表示されないようにしなければなりません。name="password">デモ複数行のテキストプロフィールなどは1行では入力できません。そのため、複数行のテキストを入力できるtextareaを使用します。placeholder="placeholder"></textarea>デモラジオボタンラジオボタンは1つだけ必ず選択しなければならない項目で使用します。checkedと記載しておくと、その項目を初期値としてチェックを入れておくことができます。value="項目3">項目3デモ項目1項目2項目3チェックボックスチェックボックスは複数の項目を選択するような場合に使用します。value="項目3">項目3デモ項目1項目2項目3セレクトボックスセレクトボックスはプルダウンで項目を1つ選択するときに使用します。value="項目3">項目3</option></select>デモ項目1項目2項目3送信ボタンフォームを作成した場合には、送信ボタンが必ず必要です。valueに設定した値がボタンのテキストとして使用されます。value="送信">デモサンプルフォームここまでにご紹介したパーツを1つにまとめると、このようなフォームが完成します。↑のフォームを送信するとここに結果が表示されます。//ここでフォームの送信をキャンセルしています}</script>まとめフォームはよく使われる機能ですが、JavaScriptやPHPで値を取得してチェックすると意外と複雑なコードになってしまいます。色々な方法で実現できますが、自分の中で1つやり方を決めておいてその方法を使いまわすようにするとコーディングが早くなります。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。