まさまさのガジェット発見ラボ

まさまさ

フォームって、部品が多くて難しそう。。。

サポちゃ

まずは「型」から覚えよう。

よく使うパーツ

よく使うパーツ

1行入力：input type="text"
メール：input type="email"
長文：textarea
送信：button type="submit"
label は必須。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
ーーーーー略ーーーーー
<div class=”contact-wrapper”>
<div class=”form-container”>
<form action=”#” method=”POST”>
<div class=”field-group”>
<label for=”name”>お名前 (必須)</label>
<!– placeholderにお名前の例を追加 –>
<input type=”text” id=”name” name=”name” placeholder=”例：東京　太郎” required></div>
<div class=”field-group”>
<label for=”email”>メールアドレス (必須)</label>
<input type=”email” id=”email” name=”email” placeholder=”example@mail.com” required></div>
<div class=”field-group”>
<label for=”subject”>件名</label>
<input type=”text” id=”subject” name=”subject” placeholder=”ご依頼、ご相談など”></div>
<div class=”field-group”>
<label for=”message”>お問い合わせ内容 (必須)</label>
<textarea id=”message” name=”message” rows=”5″ placeholder=”こちらにお問い合わせ内容を入力してください”required></textarea></div>
<button type=”submit” class=”btn-submit” disabled>送信する</button>

まさまさ

送信ボタンを押しても何も起きないんだけど…

サポちゃ

裏側のプログラムがないと、メールは届かないんだ。
今回はまず『見た目（HTML）』を完璧にしよう！

「属性」の解説を深掘りする

placeholder: 入力欄に薄く表示するヒント（例：東京太郎）
required: 未入力での送信を防ぐ必須バリデーション
idとforの紐付け: 紐づけすると文字列も同じ役割になる

id（アイ・ディー）: 例えば「男」のチェックボタン
for（フォー）: チェックボックスの横の説明「男」
紐づけしてあげると、文字列の「男」もボタンの役割になる
※紐づけすることで読み上げツールでも「男のチェックボックスがあります」と読み上げてくれるようになる。

まさまさ

文字でも反応してくれるって地味に便利だね。

サポちゃ

それがアクセシビリティ。（アクセスのしやすさ）
「どんな状況の人でも、等しく使えるか」

さきほどの<label>を id で紐付ける設定は、アクセシビリティに不可欠です。音声読み上げソフトは、ラベルがあることで初めて「今、お問い合わせ内容の入力欄にいるんだな」と正しく伝えることができます。

まさまさ

label は必須。って書いてたのは、この優しさのための”必須”だったんだね。

サポちゃ

そう。label＝優しさ。

ラジオとチェックの違い

サポちゃ

ラジオ：1つしか選べない　　
チェック：複数選べる

<div class=”container”>
<!– ラジオボタン (1つしか選べない) –>
<div class=”section”>
<h3>1. お好きな色 (ラジオボタン)</h3>
<label><input type=”radio” name=”color” value=”赤” checked> 赤</label>
<label><input type=”radio” name=”color” value=”青”> 青</label>
<label><input type=”radio” name=”color” value=”緑”> 緑</label></div>
<!– チェックボックス (複数選べる) –>
<div class=”section”>
<h3>2. 趣味 (チェックボックス)</h3>
<label><input type=”checkbox” name=”hobby” value=”読書”> 読書</label>
<label><input type=”checkbox” name=”hobby” value=”料理”> 料理</label>
<label><input type=”checkbox” name=”hobby” value=”旅行”> 旅行</label></div>
<div class=”result”>
<strong>現在の選択:</strong>
色: <span id=”colorResult”>赤</span>
趣味: <span id=”hobbyResult”>なし</span></div>
</div>

まさまさ

radioこれもcheckboxも属性？

サポちゃ

はい、その通りです！正確には、type（タイプ）という「属性」の中身（値）です。
HTMLでは、以下のように書きますよね。

<input type="radio"> → type属性の値が radio

<input type="checkbox"> → type属性の値が checkbox

この「属性」について、初心者の方がさらに理解を深められるよう、少し整理してみます。

1. 「属性」はタグの性格を決めるオプション

HTMLタグ（今回は<input>）という「物」に対して、どんな性格や機能を持たせるかを指定するのが「属性」です。

type 属性: 最も重要で、これによって「1行入力」なのか「個人戦（radio）」なのか「団体戦（checkbox）」なのかが決まります。

name 属性: グループ名（チーム名）を決めます。

value 属性: その項目が持っている値（データの中身）を決めます。

2. 「属性」という言葉の使い分け

プログラミングの世界では、これらを以下のように呼びます。

属性（Attribute）: type、name、value などの「項目名」のこと。

属性値（Value）: "radio"、"hobby" などの「設定内容」のこと。

3. 他にもある便利な type 属性（2026年現在の定番）

type を変えるだけで、スマホでの入力画面などが劇的に使いやすくなります。

type="email": メールアドレス入力用。スマホで「@」が出やすくなります。

type="tel": 電話番号用。スマホで数字キーボードがパッと出ます。

type="date": 日付選択用。カレンダーから選べるようになります。

type="password": 入力した文字が「●●●」と隠れます。