2026年4月16日
HTML フォームとは？
ウェブサイトでよく見る「名前を入力してください」「送信ボタン」などの入力欄のことを フォーム（form） といいます。
HTML フォームの作り方を知ると、お問い合わせページ・ログイン画面・アンケートなど、さまざまなページが作れるようになります。
この記事では、フォームを作るための主要なHTMLタグを、コード例とともにわかりやすく解説します。
フォームの基本構造
フォームは <form> タグで全体を囲み、その中に入力欄やボタンを配置します。
<form>
<!-- 入力欄やボタンをここに書く -->
</form><form> タグの中に書いた要素がフォームの一部として扱われます。
🔗 あわせてパスの書き方（相対・絶対）もチェックしてみましょう。
inputタグ：入力欄を作る
<input> タグは入力欄を作るタグです。type 属性を変えることで、さまざまな種類の入力欄が作れます。
| type属性 | 入力欄の種類 |
|---|---|
text | 1行のテキスト入力欄 |
email | メールアドレス入力欄（形式チェックあり） |
password | パスワード入力欄（文字が隠れる） |
number | 数値入力欄 |
checkbox | チェックボックス |
radio | ラジオボタン（1つだけ選択） |
submit | 送信ボタン |
<input type="text" placeholder="名前を入力">
<input type="email" placeholder="メールアドレス">
<input type="password" placeholder="パスワード">
<input type="checkbox"> 利用規約に同意する▶ プレビュー
labelタグ：入力欄に説明をつける
<label> タグは入力欄に説明テキストをつけるタグです。for 属性と input の id を一致させると、ラベルをクリックしたときに入力欄にフォーカスが当たります。
<label for="name">名前</label>
<input type="text" id="name" name="name" placeholder="山田太郎">📖 学んだ内容を試したい人はHTML練習問題10選に挑戦してみましょう。
buttonタグ：ボタンを作る
<button> タグはクリックできるボタンを作ります。type 属性で動作を指定します。
<!-- フォームを送信するボタン -->
<button type="submit">送信する</button>
<!-- フォームをリセットするボタン -->
<button type="reset">リセット</button>
<!-- JavaScriptで使う汎用ボタン -->
<button type="button" id="myBtn">クリック！</button>ハンズオン：お問い合わせフォームを作ろう
名前・メールアドレス・メッセージを入力できるお問い合わせフォームを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
<style>
form { max-width: 480px; margin: 40px auto; }
label { display: block; margin-top: 16px; font-weight: bold; }
input, textarea {
width: 100%;
padding: 8px;
margin-top: 4px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
margin-top: 16px;
padding: 10px 24px;
background-color: #0d9488;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label for="name">名前</label>
<input type="text" id="name" name="name" placeholder="【名前】">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="example@mail.com">
<label for="message">メッセージ</label>
<textarea id="message" name="message" rows="5" placeholder="ご質問をどうぞ"></textarea>
<button type="submit">送信する</button>
</form>
</body>
</html>👉 classとidの違いも参考にしてください。
input以外にも使える入力要素
ここまで紹介したinputタグの種類に加えて、次の要素もフォームでよく使われます。
テキストエリア（textarea）
複数行のテキストを入力できる欄です。感想や問い合わせ内容など、長い文章の入力に使います。rows属性で表示する行数を指定できます。
セレクトボックス（select）
ドロップダウンメニューから1つ選ぶ形式です。選択肢が多いときに使います。都道府県の選択などに向いています。
inputのtype属性にはもっとたくさんの種類があります。詳しくは「HTMLのinputタイプ一覧」で確認してください。
フォームのアクセシビリティ
フォームを作るとき、アクセシビリティにも気を配りましょう。
ポイント1：labelタグを使う
入力欄の説明にはlabelタグを使いましょう。labelタグのfor属性とinputタグのid属性を一致させると、ラベルをクリックしたときに入力欄にフォーカスが移ります。スクリーンリーダーも「この入力欄は何のためか」を正しく読み上げてくれます。
ポイント2：必須項目を明示する
必須項目にはrequired属性をつけましょう。空のまま送信しようとすると、ブラウザが自動で警告を表示してくれます。視覚的にも「*」マークや「必須」の文字で示すと親切です。
ポイント3：エラーメッセージをわかりやすく
入力内容に問題があるとき、何が間違っているかを具体的に伝えましょう。「入力エラー」ではなく「メールアドレスの形式が正しくありません」のように書きます。
フォームの送信をJavaScriptで処理したい場合は「JavaScriptのイベント処理入門」を読んでみてください。submitイベントを使って、送信前に入力内容をチェックする方法を学べます。
フォームはユーザーとウェブサイトをつなぐ大切な窓口です。使いやすいフォームを作れるようになると、アンケート、お問い合わせページ、ログイン画面など、さまざまな場面で活用できます。まずはシンプルなフォームから作って、少しずつ機能を追加していきましょう。
バリデーション実装例
HTMLだけでできるバリデーション：required属性で必須入力、type="email"でメール形式チェック、minlength="8"で最低文字数制限、pattern属性で正規表現チェック。ブラウザが自動でエラーメッセージを表示してくれます。
カスタムバリデーション：JavaScriptのsetCustomValidity()で独自のエラーメッセージを設定できます。「パスワードが一致しません」のような複合チェックに使います。
まとめ
- ✅ form タグでフォーム全体を囲む
- ✅ input タグの
type属性で入力欄の種類を変えられる - ✅ label タグで入力欄に説明テキストをつける
- ✅ button タグでボタンを作る（
type="submit"で送信） - ✅ textarea タグで複数行のテキスト入力欄を作れる
フォームの基本を覚えたら、レッスンでさらに実践的な使い方を学んでみましょう。