DAY 3

お問い合わせフォームを作ろう

Day 3: お問い合わせフォームを作ろう

ユーザーからの入力を受け取るフォームの作り方と、入力チェック（バリデーション）を学びます。

今日のゴール

  • フォームの基本構造を理解する
  • 様々な入力フィールドを使える
  • HTML5バリデーションを設定できる
  • お問い合わせフォームを完成させる
1

フォームの基本

フォームは <form> タグで作ります。ユーザーからの入力を受け取り、サーバーに送信するための仕組みです。

<form action="送信先URL" method="POST">
  <!-- ここに入力フィールドを配置 -->
</form>

基本的な入力フィールド

タグ用途
<input type="text">1行のテキスト入力
<input type="email">メールアドレス入力
<textarea>複数行のテキスト入力
<button type="submit">送信ボタン
labelタグの重要性

<label> タグを使うと、ラベルをクリックしたときに対応する入力フィールドにフォーカスが当たります。アクセシビリティ的にも重要です！

やってみよう！

名前を入力するフィールドと送信ボタンを作ってみましょう。

<form action="#" method="POST">
  <label for="name">お名前：</label>
  <input type="text" id="name" name="name">
  <br><br>
  <button type="submit">送信</button>
</form>
Lesson 1 of 5
2

様々な入力タイプ

HTML5では様々な入力タイプが用意されています。適切なタイプを使うと、スマホで専用のキーボードが表示されたり、入力チェックが自動で行われます。

input の type 属性

type用途スマホでの挙動
textテキスト通常キーボード
emailメールアドレス@が入力しやすい
tel電話番号数字キーボード
number数値数字キーボード
passwordパスワード入力が隠される
date日付日付ピッカー

テキストエリア

<textarea name="message" rows="5" cols="40">
初期値をここに書ける
</textarea>

やってみよう！

名前、メール、電話番号、メッセージを入力できるフォームを作りましょう。

<form>
  <p>
    <label for="name">お名前：</label><br>
    <input type="text" id="name" name="name">
  </p>
  
  <p>
    <label for="email">メールアドレス：</label><br>
    <input type="email" id="email" name="email">
  </p>
  
  <p>
    <label for="tel">電話番号：</label><br>
    <input type="tel" id="tel" name="tel">
  </p>
  
  <p>
    <label for="message">メッセージ：</label><br>
    <textarea id="message" name="message" rows="5" cols="30"></textarea>
  </p>
  
  <button type="submit">送信する</button>
</form>
Lesson 2 of 5
3

選択肢を作ろう

ユーザーに選択肢から選んでもらう方法は3種類あります。

セレクトボックス
<select>

ドロップダウンで1つ選択

ラジオボタン
<input type="radio">

表示された中から1つ選択

チェックボックス
<input type="checkbox">

複数選択可能

セレクトボックス

<select name="category">
  <option value="">選択してください</option>
  <option value="general">一般的なお問い合わせ</option>
  <option value="support">サポート</option>
  <option value="other">その他</option>
</select>

ラジオボタン

<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>
name属性を揃える

ラジオボタンは同じname属性を持つもの同士でグループになり、その中から1つだけ選べます。

やってみよう！

お問い合わせの種類をセレクトボックスで、性別をラジオボタンで選択できるフォームを作りましょう。

<form>
  <p>
    <label for="category">お問い合わせ種類：</label><br>
    <select id="category" name="category">
      <option value="">選択してください</option>
      <option value="general">一般的なお問い合わせ</option>
      <option value="support">サポート</option>
      <option value="request">ご要望</option>
      <option value="other">その他</option>
    </select>
  </p>
  
  <p>
    性別：<br>
    <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="radio" id="other" name="gender" value="other">
    <label for="other">その他</label>
  </p>
  
  <p>
    興味のある分野（複数可）：<br>
    <input type="checkbox" id="web" name="interest" value="web">
    <label for="web">Web開発</label>
    
    <input type="checkbox" id="mobile" name="interest" value="mobile">
    <label for="mobile">モバイル</label>
    
    <input type="checkbox" id="ai" name="interest" value="ai">
    <label for="ai">AI・機械学習</label>
  </p>
</form>
Lesson 3 of 5
4

HTML5バリデーション

HTML5では、JavaScriptを使わなくても入力チェック（バリデーション）ができます！

バリデーション属性

属性説明
required入力必須にする
minlength="5"最小文字数を指定
maxlength="100"最大文字数を指定
min="0"最小値を指定（数値用）
max="100"最大値を指定（数値用）
pattern="[0-9]{3}"正規表現でパターン指定
placeholder="例"入力例を薄く表示
<!-- 必須の名前フィールド -->
<input type="text" name="name" required placeholder="山田太郎">

<!-- 必須のメール（形式もチェック） -->
<input type="email" name="email" required>

<!-- 3〜20文字の制限 -->
<input type="text" name="username" minlength="3" maxlength="20">
自動チェックの仕組み

type="email"を指定すると、@が含まれているかなど、メールアドレスの形式を自動でチェックしてくれます。送信ボタンを押すとチェックが実行されます。

やってみよう！

必須項目とplaceholderを設定したフォームを作りましょう。送信ボタンを押して、バリデーションが動くか試してみてください！

<form>
  <p>
    <label for="name">お名前（必須）：</label><br>
    <input type="text" id="name" name="name" 
           required placeholder="山田太郎">
  </p>
  
  <p>
    <label for="email">メールアドレス（必須）：</label><br>
    <input type="email" id="email" name="email" 
           required placeholder="example@mail.com">
  </p>
  
  <p>
    <label for="age">年齢：</label><br>
    <input type="number" id="age" name="age" 
           min="0" max="120" placeholder="25">
  </p>
  
  <p>
    <label for="message">メッセージ（10文字以上）：</label><br>
    <textarea id="message" name="message" 
              minlength="10" rows="4" 
              placeholder="お問い合わせ内容を入力してください"></textarea>
  </p>
  
  <button type="submit">送信する</button>
</form>
Lesson 4 of 5
✨

【実践】お問い合わせフォームを完成させよう！

Day 3の総まとめ！実用的なお問い合わせフォームを作りましょう。

必須要素チェックリスト

  • 名前（必須、テキスト）
  • メールアドレス（必須、email）
  • お問い合わせ種類（セレクトボックス）
  • メッセージ（必須、テキストエリア）
  • 送信ボタン
  • バリデーション（required, placeholder）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせ</title>
</head>
<body>
  <h1>📧 お問い合わせフォーム</h1>
  <p>以下のフォームからお問い合わせください。</p>
  
  <form action="#" method="POST">
    <p>
      <label for="name">お名前（必須）：</label><br>
      <input type="text" id="name" name="name" 
             required placeholder="山田太郎">
    </p>
    
    <p>
      <label for="email">メールアドレス（必須）：</label><br>
      <input type="email" id="email" name="email" 
             required placeholder="example@mail.com">
    </p>
    
    <p>
      <label for="tel">電話番号：</label><br>
      <input type="tel" id="tel" name="tel" 
             placeholder="090-1234-5678">
    </p>
    
    <p>
      <label for="category">お問い合わせ種類：</label><br>
      <select id="category" name="category" required>
        <option value="">選択してください</option>
        <option value="general">一般的なお問い合わせ</option>
        <option value="support">サポート</option>
        <option value="request">ご要望・ご意見</option>
        <option value="other">その他</option>
      </select>
    </p>
    
    <p>
      <label for="message">メッセージ（必須）：</label><br>
      <textarea id="message" name="message" 
                rows="6" cols="40" required minlength="10"
                placeholder="お問い合わせ内容を入力してください"></textarea>
    </p>
    
    <p>
      <input type="checkbox" id="privacy" name="privacy" required>
      <label for="privacy">プライバシーポリシーに同意する</label>
    </p>
    
    <button type="submit">送信する</button>
  </form>
</body>
</html>
Lesson 5 of 5 (Final)

Day 3 まとめ

今日学んだタグ・属性

<form> <input> <textarea> <select> <label> required placeholder

ポイント

  • ✅ labelとinputはfor/idで紐づけ
  • ✅ 適切なtype属性でUX向上
  • ✅ required で必須チェック
  • ✅ ラジオボタンはnameで グループ化
Day 4 へ進む