テキスト入力・ラジオボタン・チェックボックスの使い方を初心者向けに丁寧解説！HTMLフォーム基本ガイド

テキスト入力・ラジオボタン・チェックボックスの使い方

新人と先輩の会話形式で理解しよう

新人

「HTMLでユーザーからの入力を受け取る時、テキスト入力ってどんなものですか？」

先輩

「テキスト入力は、名前や住所など文字を入力してもらう基本的なフォーム要素です。input type='text'で実装します。」

新人

「ラジオボタンとチェックボックスはどう違うんですか？」

先輩

「ラジオボタンは複数の選択肢の中から１つだけ選べるボタンで、チェックボックスは複数選べる点が特徴です。」

新人

「具体的にどんな書き方をするのか教えてください！」

先輩

「では、まずテキスト入力から見ていきましょう。」

1. HTMLのテキスト入力とは何か？基本的な使い方

テキスト入力はユーザーが自由に文字を入力できるフォーム要素です。inputタグのtype="text"を使い、名前や住所、コメントなどの入力に利用します。name属性は送信時のデータのキーとなり必須です。

以下は基本的なテキスト入力の例です。


<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username" placeholder="名前を入力してください" required>

この例では、ユーザー名を入力する欄を作り、placeholderで入力例を表示し、requiredで必須入力を指定しています。

2. ラジオボタンの役割と使い方の基本

ラジオボタンは複数の選択肢から1つだけを選ぶ時に使います。複数のinput type="radio"が同じname属性を共有することで、どれか1つだけ選択可能になります。

例えば性別を選ぶフォームは以下のように書きます。


<p>性別：</p>
<input type="radio" id="male" name="gender" value="male" required>
<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>

ここでは3つの選択肢があり、ユーザーは1つだけ選べます。requiredをつけると必ず選択しなければ送信できません。

3. チェックボックスの基本的な使い方と注意点

チェックボックスはユーザーが複数の選択肢から複数を自由に選べる入力フォームです。複数のinput type="checkbox"が同じname属性を共有していても、複数選択が可能です。

例えば趣味を複数選べるフォームは次のように書きます。


<p>趣味を選んでください：</p>
<input type="checkbox" id="hobby1" name="hobby" value="sports">
<label for="hobby1">スポーツ</label>
<input type="checkbox" id="hobby2" name="hobby" value="music">
<label for="hobby2">音楽</label>
<input type="checkbox" id="hobby3" name="hobby" value="reading">
<label for="hobby3">読書</label>

このように複数選択できることが特徴ですが、チェックが何もない場合、送信される値はありません。必須入力にしたい場合はJavaScriptやサーバー側でチェックが必要です。

また、チェックボックスの値は複数になるため、サーバー側で配列やリストとして受け取るように準備することがポイントです。

4. テキスト入力、ラジオボタン、チェックボックスの違いと使い分け

フォームの入力タイプは用途によって使い分けることが大切です。以下にそれぞれの特徴をまとめます。

テキスト入力：自由な文字列を入力するのに使います。名前や住所、コメントなど。
ラジオボタン：複数の選択肢からひとつだけ選ばせたい場合に使います。性別や支払い方法など。
チェックボックス：複数の選択肢から複数選択できる場合に使います。趣味や興味のある分野など。

適切に使い分けることで、ユーザーが直感的に操作でき、フォームの入力ミスも減らせます。たとえば性別の入力にチェックボックスを使うと複数選択できてしまい、ユーザーが迷うこともあるので注意しましょう。

さらに、どのタイプもname属性はサーバー側でデータを識別するために必要不可欠です。フォームの構造と入力タイプを理解して、正しく設計しましょう。

これらのフォーム入力タイプを上手に活用し、ユーザーにわかりやすくて使いやすいHTMLフォームを作成しましょう。SEO対策としても、適切なキーワードを入れながら説明することで、検索エンジンにヒットしやすくなります。

5. Spring Controllerでフォームの各入力値を受け取る基本方法

Spring MVCでは、ユーザーがフォームに入力した値をサーバー側のControllerで簡単に受け取れます。@Controllerのメソッドで@ModelAttributeや@RequestParamを使い、フォームの値をJavaの変数やオブジェクトにマッピングします。

例えば、テキスト入力やラジオボタン、チェックボックスの値を受け取るControllerの例を見てみましょう。


@Controller
public class FormController {

    @GetMapping("/form")
    public String showForm(Model model) {
        model.addAttribute("userData", new UserData());
        return "form";
    }

    @PostMapping("/submit")
    public String submitForm(@ModelAttribute UserData userData, Model model) {
        // フォーム送信された値を取得し処理
        System.out.println("名前: " + userData.getName());
        System.out.println("性別: " + userData.getGender());
        System.out.println("趣味: " + Arrays.toString(userData.getHobbies()));

        model.addAttribute("message", "フォーム送信が成功しました！");
        return "result";
    }
}

ここで、UserDataクラスはフォームの各入力に対応するフィールドを持ちます。チェックボックスのように複数選択可能な場合は配列やリストで受け取るのが一般的です。


public class UserData {
    private String name;         // テキスト入力用
    private String gender;       // ラジオボタン用
    private String[] hobbies;    // チェックボックス用（複数選択）

    // getter/setter
}

このようにSpring MVCのフォーム送信と連携すると、フォーム送信された各入力値をJavaオブジェクトとして扱えて開発がスムーズになります。

6. フォーム入力のバリデーションの基礎とエラー処理のポイント

フォーム入力では正しいデータを受け取るためにバリデーションが不可欠です。Springではjavax.validationのアノテーションと連携し、簡単に入力チェックができます。

例えばUserDataクラスにバリデーションを設定する例です。


public class UserData {
    @NotBlank(message = "名前は必須入力です")
    private String name;

    @NotBlank(message = "性別を選択してください")
    private String gender;

    @Size(min = 1, message = "趣味を1つ以上選択してください")
    private String[] hobbies;

    // getter/setter
}

次に、Controllerでバリデーションを実行し、エラーがあればフォーム画面に戻してエラーメッセージを表示します。


@PostMapping("/submit")
public String submitForm(@Valid @ModelAttribute UserData userData,
                         BindingResult bindingResult,
                         Model model) {
    if (bindingResult.hasErrors()) {
        return "form";
    }
    model.addAttribute("message", "送信が成功しました！");
    return "result";
}

この例では@Validがバリデーションの実行を指示し、BindingResultでエラーの有無を判定します。エラーがある場合はフォームに戻り、ユーザーに修正を促します。

最後に、Thymeleafのフォーム画面でエラーを表示する方法です。th:errors属性を使うと、該当フィールドのエラーメッセージを簡単に表示できます。


<form th:action="@{/submit}" th:object="${userData}" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" th:field="*{name}" required>
  <div th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="text-danger"></div>

  <p>性別：</p>
  <input type="radio" id="male" th:field="*{gender}" value="male">
  <label for="male">男性</label>
  <input type="radio" id="female" th:field="*{gender}" value="female">
  <label for="female">女性</label>
  <div th:if="${#fields.hasErrors('gender')}" th:errors="*{gender}" class="text-danger"></div>

  <p>趣味：</p>
  <input type="checkbox" id="sports" th:field="*{hobbies}" value="sports">
  <label for="sports">スポーツ</label>
  <input type="checkbox" id="music" th:field="*{hobbies}" value="music">
  <label for="music">音楽</label>
  <div th:if="${#fields.hasErrors('hobbies')}" th:errors="*{hobbies}" class="text-danger"></div>

  <button type="submit">送信</button>
</form>

このように、入力チェックとエラー表示を組み合わせることで、ユーザーにわかりやすく正しい入力を促せるフォームを作成できます。これらはSEO的にも重要なポイントなのでしっかり押さえましょう。