現役WEBデザイナー講師

2023年7月13日

HTMLフォーム作成をサンプルコード付きで解説します

はじめに

ウェブアプリケーションの一部として最も一般的で重要な要素の一つがHTMLフォームです。

これはユーザーから情報を収集し、その情報をサーバーに送信するための手段です。

この記事では、基本的なテキストボックスから高度な日付やカラーピッカー、さらにはフォームのバリデーションやJavaScript連携まで、HTMLフォームの作成について詳しく解説します。

具体的なサンプルコードとともに、HTMLフォームの各要素とその使い方について学んでいきましょう。それでは、中級者の皆様も一緒にスキルアップしていきましょう。

HTMLフォームの基礎

HTMLフォームは、ユーザーが入力したデータをウェブサーバーに送信するメカニズムを提供します。

例えば、ログインフォーム、検索バー、フィードバックフォームなど、ほとんどのウェブアプリケーションで一部またはすべての操作がフォームを介して行われます。

フォームの役割と基本構造

HTMLフォームの主な役割は、ユーザーからの情報を集めてサーバーに送信することです。

HTMLの<form>エレメントを用いてフォームを作成します。このエレメントはaction属性で指定されたURLにデータを送信します。

送信されるデータは、フォーム内の一つ以上の<input>エレメントから取得されます。

<form>エレメントは、一つ以上のフォームコントロール（入力フィールド）を含むコンテナです。

これらのコントロールは、ユーザーがデータを入力、選択、送信できるようにします。主なフォームコントロールには以下のようなものがあります：

テキストフィールド：ユーザーが一行のテキストを入力するためのものです。<input type="text">と記述します。
パスワードフィールド：ユーザーがパスワードを安全に入力するためのものです。入力はマスクされます。<input type="password">と記述します。
ラジオボタン：ユーザーが選択肢の中から一つだけを選ぶためのものです。<input type="radio">と記述します。
チェックボックス：ユーザーが選択肢の中から一つ以上を選ぶためのものです。<input type="checkbox">と記述します。
ドロップダウンリスト：ユーザーがリストから一つを選ぶためのものです。<select>と<option>タグを使用します。

サンプルコード：基本的なHTMLフォーム

以下のコードは、ユーザー名とパスワードを収集する基本的なログインフォームの例です。

<form action="/login" method="post">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="ログイン">
</form>

この例では、<form>エレメントがフォームを作成し、そのaction属性がフォームデータを送信する先のURLを指定しています。

method="post"とすることで、フォームデータはHTTP POSTメソッドを使用して送信されます。

これは、ユーザーが提供したデータ（この場合はユーザー名とパスワード）がURL中に含まれないようにするための重要な安全策です。

このフォームには2つの<input>エレメントがあります。

一つはユーザー名の入力フィールド、もう一つはパスワードの入力フィールドです。これらのフィールドはrequired属性を持っており、これはユーザーがフォームを送信する前にこれらのフィールドを必ず入力しなければならないことを意味します。

最後の<input>エレメントは送信ボタンで、これをクリックするとフォームデータがサーバーに送信されます。

以上がHTMLフォームの基本です。

次の章では、様々なタイプのフォームコントロールとその使い方を詳しく見ていきましょう。

入力フィールド

HTMLフォーム内で使用される主要な入力フィールドについて解説します。

それぞれの入力フィールドは、特定のデータ型とユーザーインタラクションを処理するために設計されています。

テキストフィールド（input type="text"）

テキストフィールドは、ユーザーに一行のテキスト入力を許可します。

ユーザー名、メールアドレス、住所など、テキスト情報を入力する際に頻繁に使用されます。

<label for="name">名前：</label>
<input type="text" id="name" name="name">

パスワードフィールド（input type="password"）

パスワードフィールドもテキストフィールドの一種ですが、入力したテキストは隠されます。

これはユーザーのパスワードなど、センシティブな情報を安全に扱うために使用されます。

<label for="pwd">パスワード：</label>
<input type="password" id="pwd" name="pwd">

ラジオボタン（input type="radio"）

ラジオボタンは、ユーザーに一連の選択肢から1つだけを選ぶように促します。

同じname属性を持つすべてのラジオボタンは一つのグループとして扱われ、その中から一つだけ選択できます。

<label for="gender">性別：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>

チェックボックス（input type="checkbox"）

チェックボックスは、ユーザーに一連の選択肢から複数を選ぶことを許可します。

同意書などの承認メカニズムや、複数の属性を選択する必要がある場合によく使用されます。

<label for="interests">興味のある分野：</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">音楽</label>
<input type="checkbox" id="art" name="interests" value="art">
<label for="art">芸術</label>

ドロップダウンリスト（selectとoption）

ドロップダウンリストは、一連の選択肢から1つを選択するためのメカニズムを提供します。

これは、国名のリストや、年のリストなど、選択肢が多数存在する場合に特に有用です。

<label for="country">国：</label>
<select id="country" name="country">
    <option value="usa">アメリカ</option>
    <option value="japan">日本</option>
    <option value="uk">イギリス</option>
</select>

サンプルコード：各種入力フィールドを使用したフォーム

以下は、これまで紹介した各種入力フィールドを組み合わせたフォームの一例です。

<form action="/submit" method="post">
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">

    <label for="pwd">パスワード：</label>
    <input type="password" id="pwd" name="pwd">

    <label for="gender">性別：</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男性</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女性</label>

    <label for="interests">興味のある分野：</label>
    <input type="checkbox" id="music" name="interests" value="music">
    <label for="music">音楽</label>
    <input type="checkbox" id="art" name="interests" value="art">
    <label for="art">芸術</label>

    <label for="country">国：</label>
    <select id="country" name="country">
        <option value="usa">アメリカ</option>
        <option value="japan">日本</option>
        <option value="uk">イギリス</option>
    </select>

    <input type="submit" value="送信">
</form>

これらのフィールドを理解し、適切に組み合わせて使用することで、ユーザーに対して効果的なインタラクションを提供できます。

高度な入力フィールド

さらに深く掘り下げて見ると、これらの高度な入力フィールドはユーザー体験を強化し、データの入力を容易にします。以下で各項目についてさらに詳しく見ていきましょう。

数値フィールド（input type="number"）

数値フィールドは、ユーザーが数値を入力する際に非常に有用なフィールドタイプです。数値フィールドはユーザーに一連の数字を入力させ、それをサーバーに送信します。このフィールドは数量、年齢、価格など、特定の数値を必要とする場合に使用します。

数値フィールドは、minとmax属性を使用して、ユーザーが入力できる値の範囲を制限することができます。また、step属性を使用して、値の増減の間隔を制御することも可能です。

htmlCopy code
<label for="age">年齢：</label><input type="number" id="age" name="age" min="18" max="99" step="1">

この例では、ユーザーは18から99までの年齢を入力できます。

日付フィールド（input type="date"）

日付フィールドは、特定の日付をユーザーに入力させるために使用されます。生年月日、イベントの日付、予約日などを取得するために利用できます。

このフィールドはカレンダーピッカーを表示し、ユーザーが日付を選びやすくします。日付の形式は通常、YYYY-MM-DDとなります。

htmlCopy code
<label for="event_date">イベントの日付：</label><input type="date" id="event_date" name="event_date">

この例では、ユーザーは特定のイベントの日付を選択できます。

カラーピッカー（input type="color"）

カラーピッカーは、ユーザーに特定の色を選択させるために使用されます。

ウェブサイトのカスタマイズやプロダクトの色の選択など、色の選択が必要な場合に使用できます。

カラーピッカーは一般的に色選択ダイアログを表示し、ユーザーが色を視覚的に選択できるようにします。選択された色はRRGGBB形式の16進数値で表されます。

<label for="bg_color">背景色：</label>
<input type="color" id="bg_color" name="bg_color">

この例では、ユーザーはウェブページの背景色を選択できます。

サンプルコード：高度な入力フィールドを使用したフォーム

以下のコードは、上記の各種高度な入力フィールドを使用したフォームの例です。

<form action="/advanced" method="post">
    <label for="age">年齢：</label>
    <input type="number" id="age" name="age" min="18" max="99" step="1">

    <label for="event_date">イベントの日付：</label>
    <input type="date" id="event_date" name="event_date">

    <label for="bg_color">背景色：</label>
    <input type="color" id="bg_color" name="bg_color">

    <input type="submit" value="送信">
</form>

これらの高度なフィールドタイプを使用することで、具体的な形式のデータを必要とする多くのシナリオをカバーできます。

フォームアクション

フォームアクションは、ユーザーがフォームを送信したときに何が起こるかを制御します。

これは、主に送信メソッド（GETまたはPOST）と送信先URLを指定することで行われます。

ここでは、これらのメソッドの詳細な説明と使用例を提供します。

GETメソッド

GETメソッドは、主に情報を取得するために使用されます。フォームがGETを使用すると、送信されたデータはURLの一部として添付されます。これは、送信された情報をブックマークしたり、直接URLを共有したりするときに便利です。

例えば、検索クエリのような非敏感な情報を送信する場合、GETメソッドを使用すると便利です。

<form action="/search" method="get">
    <label for="query">検索：</label>
    <input type="text" id="query" name="query">
    <input type="submit" value="検索">
</form>

この例では、ユーザーが"検索"ボタンをクリックすると、検索クエリがURLに追加され（例：/search?query=ユーザーの検索クエリ）、そのURLにGETリクエストが送信されます。

ただし、GETメソッドはURLに情報が表示されるため、パスワードや個人情報などの敏感な情報を送信するためには不適しています。

POSTメソッド

一方、POSTメソッドはサーバーに新しい情報を送信するために使用されます。

POSTを使用すると、情報はHTTPリクエストのボディに含まれるため、URLからは見えません。

これにより、より大きなデータ量を送信でき、敏感な情報を安全に送信することができます。

ログインフォームはPOSTメソッドを使用する典型的な例です。

<form action="/login" method="post">
    <label for="username">ユーザー名：</label>
    <input type="text" id="username" name="username">

    <label for="password">パスワード：</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="ログイン">
</form>

この例では、ユーザーが"ログイン"ボタンをクリックすると、ユーザー名とパスワードがHTTPリクエストのボディに追加され（ユーザーには見えません）、その情報と共にPOSTリクエストが"/login"URLに送信されます。

GETとPOSTの違いを理解し、適切な状況で適切なメソッドを選択することは、効果的で安全なウェブアプリケーションを作成するための重要なステップです。

フォームバリデーション

フォームバリデーションは、ユーザーからの入力が予期したフォーマットと一致しているかどうかを確認する重要な手段です。

HTML5では、いくつかの組み込みバリデーション属性が提供されています。

必須フィールド（required属性）とパターンマッチング（pattern属性）を用いて、ユーザーの入力が正確であることを確認しましょう。

必須フィールド（required属性）

required属性を使用すると、ユーザーが特定のフィールドに情報を必ず入力することを要求できます。

ユーザーがそのフィールドを空白のままにしてフォームを送信しようとすると、ブラウザはエラーメッセージを表示し、フォームの送信を阻止します。これにより、必要な情報が欠落していることによるエラーを防ぐことができます。

例えば、以下のコードでは、ユーザー名フィールドにrequired属性が設定されています。

そのため、このフィールドが空白のままであれば、フォームは送信されません。

<form action="/submit" method="post">
    <label for="username">ユーザー名：</label>
    <input type="text" id="username" name="username" required>
    <input type="submit" value="送信">
</form>

パターンマッチング（pattern属性）

pattern属性を使用すると、ユーザーの入力が特定の正規表現に一致することを要求できます。

これは、電話番号、郵便番号、特定の形式を必要とするパスワードなど、特定のフォーマットを必要とするフィールドに便利です。

以下のコードは、ユーザーの電話番号が特定の形式（例えば、"123-456-7890"）に一致することを要求する例です。入力された電話番号がこのパターンに一致しない場合、フォームは送信されず、ブラウザはエラーメッセージを表示します。

<form action="/submit" method="post">
    <label for="phone">電話番号（例：123-456-7890）：</label>
    <input type="tel" id="phone" name="phone" pattern="^\d{3}-\d{3}-\d{4}$">
    <input type="submit" value="送信">
</form>

このように、HTML5のバリデーション属性を活用することで、ユーザーからの入力が期待するフォーマットに適合していることを確認することができます。

これは、データの品質を保つため、またユーザーに対して彼らが提供すべき適切な情報を明示するために重要です。

CSSでのフォームスタイリング

フォームは、ユーザとウェブサイトが直接対話するメインインターフェイスの一つです。

したがって、見た目の美しさとともに使用感をよくすることが重要です。その両方を達成するためには、CSSを用いたカスタマイズが必要不可欠です。具体的には、フィールドの大きさと位置の調整、ボタンのスタイリングなどを行います。

フィールドの大きさと位置調整

ウェブフォームの使いやすさは、そのフィールドの大きさと配置に大いに左右されます。

適切な大きさに調整され、適切に配置されたフィールドは、ユーザにとって入力しやすく、エラーを減らします。以下に、テキスト入力フィールドの大きさをCSSで調整する例を示します。

<form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <input type="submit" value="Submit">
</form>

上記のフォームのテキスト入力フィールドの大きさをCSSで調整するには以下のようにします。

input[type="text"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

このCSSは、テキストフィールドの幅を100%に設定し、上下に8pxのマージンを加えることで周囲とのスペースを確保しています。

また、paddingはフィールド内のテキストとフィールド境界との間のスペースを調整します。

ボタンのカスタマイズ

フォームの送信ボタンは、ユーザーがフォームを送信するための最後のステップです。

このボタンが鮮明で魅力的であればあるほど、ユーザーがアクションを完了する可能性が高まります。

以下に、基本的な送信ボタンをカスタマイズする方法を示します。

input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

このCSSは、送信ボタンの背景色を緑にし、テキストの色を白に設定しています。

また、border-radiusで角を丸くし、ホバー時には色を少し暗くしています。

cursor: pointer;はマウスカーソルがボタン上にあるときにポインターになることを示します。

これらのテクニックを使用することで、フォームは見た目が良くなるだけでなく、ユーザビリティも大幅に向上します。

それぞれのスタイルは、特定の要素に対して設定することも、クラスやIDを通じて複数の要素に適用することも可能です。

JavaScriptとの連携

ウェブフォームが単に情報を収集し、それをサーバに送信するだけでなく、JavaScriptと連携することでリッチなユーザエクスペリエンスを提供できます。

JavaScriptを使えば、リアルタイムの入力検証、自動補完、アニメーションといった機能を提供することが可能となります。

フォームイベントの処理

フォームには多くのイベントが存在しますが、その中でも最もよく使われるイベントの一つがsubmitイベントです。このイベントは、ユーザがフォームを送信しようとしたときに発生します。

以下の例では、JavaScriptを使用してフォームの送信をハンドルし、一部の入力フィールドが空である場合に警告を表示します。

<form id="myForm">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" required><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br>
  <input type="submit" value="Submit">
</form>

<script>document.getElementById('myForm').addEventListener('submit', function(event) {
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  
  if (name === '' || email === '') {
    event.preventDefault(); // フォーム送信をキャンセルalert('Name and Email are required fields.');
  }
});
</script>

このコードでは、JavaScriptのaddEventListenerメソッドを使用してsubmitイベントをリッスンしています。フォームが送信されると、nameとemailの値が取得され、どちらかが空である場合は、フォーム送信をキャンセル（event.preventDefault()）し、警告メッセージを表示します。

このようにJavaScriptを利用することで、送信前に入力値をチェックし、問題がある場合はユーザにフィードバックを与えることが可能となります。

このテクニックをさらに進化させて、リアルタイムの入力検証や入力補完を提供することも可能です。

結論

HTMLフォームの作成は、Webアプリケーションの重要な側面です。

フォームはユーザーから情報を収集し、その情報をサーバーに送信する主要な手段となります。

したがって、理解と適切な実装は必須となります。成功したHTMLフォームは以下の要素を含むべきです。

適切な入力フィールド: ユーザーから必要な情報を効果的に収集します。テキストボックス、ラジオボタン、チェックボックス、ドロップダウンメニューなど、さまざまなタイプの入力フィールドがあります。
適切なメソッド: フォームデータをサーバーに送信するための正しいHTTPメソッド（GETまたはPOST）が必要です。
バリデーション: 必須フィールドが空でないこと、入力が正しい形式であることなど、データの正確性を確保します。
ユーザーフレンドリーなデザイン: フォームは使いやすく、理解しやすいものでなければなりません。これはCSSスタイリングとJavaScriptの動的要素で達成できます。

以下に、これらすべての要素を組み合わせた完全なHTMLフォームの例を示します：

<!DOCTYPE html>
<html>
<head>
  <style>
  form {
      display: flex;
      flex-direction: column;
      width: 200px;
    }
    input[type="submit"] {
      margin-top: 10px;
    }
  </style>
</head>
<body>

<form id="myForm" action="/submit" method="post">

  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" required>
  
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="Submit">
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  // 追加のバリデーションやイベント処理をここに書くことができます。
});
</script>

</body>
</html>

このコードは、基本的なHTMLフォームを作成し、それにCSSスタイルを適用し、JavaScriptを使用して送信イベントをリッスンします。

また、required属性を使用して、各入力フィールドが必須であることを指定します。

これは基本的なバリデーションの一例です。

これで、HTMLフォーム作成の基本的なスキルを身につけることができました。

これらの基本を理解し、実践することで、より高度な機能やカスタマイズを行うための土台ができます。

今後はさらなるスキル取得のために、当ブログの他の中級者向け記事もぜひご覧ください！

集中できるオススメの音楽です。リラックスしながら学習を進めていきましょう。
オススメ音楽のチャンネルはこちら

HTMLフォーム作成をサンプルコード付きで解説します

はじめに

目次

HTMLフォームの基礎

フォームの役割と基本構造

サンプルコード：基本的なHTMLフォーム

入力フィールド

テキストフィールド（input type="text"）

パスワードフィールド（input type="password"）

ラジオボタン（input type="radio"）

チェックボックス（input type="checkbox"）

ドロップダウンリスト（selectとoption）

サンプルコード：各種入力フィールドを使用したフォーム

高度な入力フィールド

数値フィールド（input type="number"）

日付フィールド（input type="date"）

カラーピッカー（input type="color"）

サンプルコード：高度な入力フィールドを使用したフォーム

フォームアクション

GETメソッド

POSTメソッド

フォームバリデーション

必須フィールド（required属性）

パターンマッチング（pattern属性）

CSSでのフォームスタイリング

フィールドの大きさと位置調整

ボタンのカスタマイズ

JavaScriptとの連携

フォームイベントの処理

結論

関連記事

集中できるオススメの音楽です。リラックスしながら学習を進めていきましょう。 オススメ音楽のチャンネルはこちら

HTMLフォーム作成をサンプルコード付きで解説します

はじめに

目次

HTMLフォームの基礎

フォームの役割と基本構造

サンプルコード：基本的なHTMLフォーム

入力フィールド

テキストフィールド（input type="text"）

パスワードフィールド（input type="password"）

ラジオボタン（input type="radio"）

チェックボックス（input type="checkbox"）

ドロップダウンリスト（selectとoption）

サンプルコード：各種入力フィールドを使用したフォーム

高度な入力フィールド

数値フィールド（input type="number"）

日付フィールド（input type="date"）

カラーピッカー（input type="color"）

サンプルコード：高度な入力フィールドを使用したフォーム

フォームアクション

GETメソッド

POSTメソッド

フォームバリデーション

必須フィールド（required属性）

パターンマッチング（pattern属性）

CSSでのフォームスタイリング

フィールドの大きさと位置調整

ボタンのカスタマイズ

JavaScriptとの連携

フォームイベントの処理

結論

関連記事

集中できるオススメの音楽です。リラックスしながら学習を進めていきましょう。
オススメ音楽のチャンネルはこちら