HTMLフォームの作り方｜input要素の種類とフォームデザインの基礎
HTMLフォームとは？
サイト訪問者からデータを収集したい場合、HTMLフォームが必要になります。たとえばユーザー登録の際には、名前・メールアドレス・クレジットカード情報などを入力してもらうことになりますよね。
フォームは訪問者からの入力を受け取り、CGI、ASPスクリプト、PHPスクリプトといったバックエンドアプリケーションへデータを送信（ポスト）します。バックエンド側では、アプリケーション内に定義されたビジネスロジックに基づいて、受け取ったデータに対して必要な処理が実行されます。
フォームの基本構文
HTMLでは<form>タグを使ってフォームを作成し、その中にinputやtextareaなどの各種フォーム要素を配置します。
<form action = "Script URL" method = "GET|POST"> input や textarea などのフォーム要素 </form>
フォームを作成するには、テキスト入力欄、パスワード、生年月日、電話番号、メールアドレス、ボタンなどのフィールドを追加する必要があります。これらはすべて<input>要素で実現できます。
主なinputタイプ一覧
| No. | タイプと説明 |
|---|---|
| 1 | text 自由形式のテキストフィールド。原則として改行を含みません。 |
| 2 | password パスワードなど機密情報を入力するためのテキストフィールド。入力内容はマスクされて表示されます。 |
| 3 | checkbox 事前定義されたリストの中から、0個以上の値を選択できます。 |
| 4 | radio 列挙された選択肢の中から1つの値だけを選択します。 |
| 5 | submit フォームの送信を開始するボタンです。 |
| 6 | file MIMEタイプとファイル名（任意）を持つファイルをアップロードします。 |
| 7 | image 画像のサイズに対する相対座標を送信するボタンで、クリックするとフォーム送信が開始されます。 |
| 8 | hidden 通常、ユーザーには表示されない任意の文字列を保持します。 |
| 9 | select ラジオボタンに似た仕組みで、列挙値から選択できるドロップダウンリストです。 |
| 10 | textarea 改行の制限がない自由形式の複数行テキストフィールドです。 |
| 11 | button ボタンに関連する任意のイベントを発火させられる汎用ボタンです。 |
HTML5で追加されたinputタイプ
HTML5では、<input>要素に入力内容の検証や利便性を高める新しいタイプが多数導入されました。
| No. | タイプと説明 |
|---|---|
| 1 | datetime ISO 8601に準拠した日時（年・月・日・時・分・秒・秒の小数部）。タイムゾーンはUTCに設定されます。 ※現在のHTML標準ではこのタイプは廃止扱いのため、代わりに「datetime-local」の使用が推奨されています。 |
| 2 | datetime-local タイムゾーン情報を含まないローカル日時（年・月・日・時・分・秒）を指定します。 |
| 3 | date ISO 8601に準拠した日付（年・月・日）を入力します。 |
| 4 | month 年と月から構成される日付を入力します。 |
| 5 | week 年と週番号から構成される日付を入力します。 |
| 6 | time 時刻（時・分・秒・秒の小数部）を入力します。 |
| 7 | number 数値のみを受け付けます。step属性で精度（刻み幅）を指定でき、デフォルトは1です。 |
| 8 | range 一定範囲の数値から値を選択するスライダー型の入力フィールドです。 |
| 9 | email メールアドレスのみを受け付けます。通常のテキストを送信しようとすると、example@example.com 形式での入力を促すバリデーションが働きます。 |
| 10 | url URLのみを受け付けます。https://www.example.com または https://example.com 形式以外の文字列は送信できません。 |
サンプルコード①：基本的な登録フォーム
それでは、実際にフォームを作成する例を見てみましょう。
<!DOCTYPE html> <html> <body> <h2>登録フォーム</h2> <form action="" method="get"> ID: <input type="text" name="id" placeholder="ユーザーIDを入力してください"><br> パスワード: <input type="password" name="pwd" placeholder="パスワードを入力してください"><br> 生年月日: <input type="date" name="dob"><br> 電話番号: <input type="tel" name="tel" placeholder="電話番号を入力してください"><br> メールアドレス: <input type="email" name="email" placeholder="メールアドレスを入力してください"><br><br> <button type="submit" value="Submit">送信</button> </form> </body> </html>
表示結果
上記のコードをブラウザで開くと、次のように表示されます。
サンプルコード②：チェックボックスを使ったフォーム
次に、チェックボックスを含むフォームの作成例を紹介します。
<!DOCTYPE html> <html> <body> <h2>登録フォーム</h2> <form action="" method="get"> ID: <input type="text" name="id" placeholder="ユーザーIDを入力してください" size="25"><br> パスワード: <input type="password" name="pwd" placeholder="パスワードを入力してください"><br> 生年月日: <input type="date" name="dob"><br> 電話番号: <input type="tel" name="tel" placeholder="電話番号を入力してください"><br> メールアドレス: <input type="email" name="email" placeholder="メールアドレスを入力してください" size="35"><br><br> <input type="checkbox" name="newsletter" value="subscribe" checked> ニュースレター購読を希望する<br> <button type="submit" value="Submit">送信</button> </form> </body> </html>
こちらもブラウザで表示すると、以下のようになります。
まとめ
HTMLフォームは、<form>タグを土台に<input>や<textarea>などの要素を組み合わせて構築します。用途に応じて適切なtype属性を選ぶことで、ブラウザ側の入力補助やバリデーションを活かせば、ユーザーにとって使いやすく、かつデータ品質の高いフォームを実現できます。まずは本記事のサンプルコードを参考に、自分のサイトに合わせたフォーム作成に挑戦してみてください。
-
HTML DOM Input Range の form プロパティとは？使い方をわかりやすく解説
HTML DOM の Input Range（type=range の入力フィールド）におけるform プロパティは、対象となるレンジスライダーを含むフォームへの参照を取得するために使用されます。もしレンジスライダーがどのフォームにも属していない場合には NULL が返されます。なお、このプロパティは読み取り専用であり、値を代入して変更することはできません。構文Input Range の form プロパティの構文は以下の通りです。rangeObject.formサンプルコードそれでは、Input Range の form プロパティを使った具体的な例を見ていきましょう。<!DOCTYP
-
HTML DOM Input Reset の form プロパティとは？使い方とサンプルコードを解説
HTML DOMにおけるInput Resetオブジェクトのformプロパティは、指定されたリセットボタンが所属するフォーム（form要素）への参照を取得するために使用されます。リセットボタンがフォームの外に配置されている場合は、単にNULLが返されます。なお、このプロパティは読み取り専用です。 構文 Input Resetのformプロパティの基本構文は以下の通りです。 resetObject.form 使用例 それでは、Input Resetのformプロパティの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> <body>