この記事は、プログラミングをまったく知らない人が「AI に頼らず、自分の手でアプリやサイトを作れる」ようになるための連載（全85本）の第5回です。毎日1本ずつ公開します。
前の回: #04 HTML の骨組み：見出し・段落・リンク・画像
この記事でできるようになること
入力欄とボタンのあるフォームを作れるようになります。あわせて、ページの部品に「ここはヘッダー」「ここはメイン」と名札をつける、意味のあるタグも使えるようになります。
説明
フォームは「申込用紙」
ログイン画面、検索ボックス、投稿画面。Web で「何かを入力して送る」場所は、ぜんぶフォームです。紙の申込用紙にたとえると、次のように対応します。
| 申込用紙 | HTML |
|---|---|
| 用紙全体 | <form> |
| 「お名前」と書いてある項目名 | <label> |
| 記入欄 |
<input> / <textarea> / <select>
|
| 提出ボタン | <button> |
今日使うタグ
| タグ | 意味 |
|---|---|
<form> |
フォーム全体を囲む |
<label for="..."> |
入力欄の項目名。for に入力欄の id を書く |
<input type="text"> |
1行の文字入力欄 |
<input type="checkbox"> |
チェックボックス |
<textarea> |
複数行の入力欄 |
<select> と <option>
|
選択肢から選ぶプルダウン |
<button type="submit"> |
送信ボタン |
大事な属性が3つあります。
-
id: その要素の「背番号」。ページの中で重ならない名前をつける -
name: 送るデータの「ラベル」。これがない欄の中身は送られません -
for（labelに書く）: どの入力欄の項目名かを、idで結びつける
label と入力欄を結びつけると、項目名をクリックしただけで入力欄にカーソルが入ります。画面を読み上げるソフトを使う人にも、どの欄かが伝わります。
意味のあるタグ（セマンティクス）
<h1> や <p> のほかに、ページの場所そのものに名前をつけるタグがあります。
| タグ | 意味 |
|---|---|
<header> |
ページ（や区画）の頭の部分 |
<nav> |
メニュー・リンクのかたまり |
<main> |
ページの主役の内容（1ページに1つ） |
<section> |
内容のまとまり |
<footer> |
ページの終わりの部分 |
見た目はどれも変わりません。でも、検索エンジンや読み上げソフトが「ここがメインだな」と理解しやすくなります。お店の看板のようなものです。
手を動かす
コピーせず、自分で打ってください。
1. 準備
前回の html-practice フォルダを VS Code で開き（なければ mkdir html-practice で作る）、新しいファイル form.html を作ります。
2. 骨組みを打つ
前回の骨組みを自分の手で打ち、<title> を 音楽仲間への投稿フォーム にします。
3. <body> の中を書く
<header>
<h1>OTOMO ふうの投稿フォーム</h1>
<nav>
<a href="#form">投稿する</a>
</nav>
</header>
<main>
<section id="form">
<h2>ひとこと投稿</h2>
<form action="" method="get">
<p>
<label for="nickname">ニックネーム</label><br>
<input type="text" id="nickname" name="nickname" placeholder="例：たろう" required>
</p>
<p>
<label for="genre">好きなジャンル</label><br>
<select id="genre" name="genre">
<option value="techno">テクノ</option>
<option value="house">ハウス</option>
<option value="ambient">アンビエント</option>
</select>
</p>
<p>
<label for="message">ひとこと</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea>
</p>
<p>
<label><input type="checkbox" name="open" value="yes"> 公開する</label>
</p>
<button type="submit">投稿する</button>
</form>
</section>
</main>
<footer>
<p>手で書いて覚える個人開発</p>
</footer>
新しく出てきた属性です。
-
placeholder: 入力前にうすく出る見本の文字 -
required: 空のままでは送れなくする（ブラウザが止めてくれる） -
rows/cols: 複数行欄の高さと幅の目安（文字数） -
<option value="techno">テクノ</option>: 画面には「テクノ」と出て、送られる値はtechno -
method="get": 入力した内容を、ページのアドレスの後ろにくっつけて送るやり方
4. ブラウザで開いて送ってみる
open form.html
ニックネームに「たろう」と入れ、ジャンルを選び、「投稿する」を押します。このフォームには送り先のサーバーがないので、ページが読み込み直されるだけですが、アドレス欄の末尾が変わります。form.html?nickname=...&genre=techno&message=... のように、name に書いた名前と入力内容が 名前=値 の形でつながって見えるはずです（日本語は %E3... のような記号の列に変わります）。これが「フォームが送るデータ」の正体です。
5. わざと name を消してみる
ニックネームの name="nickname" を消して保存し、もう一度送ってみてください。アドレスから nickname= が消えます。name がない欄は送られないことを自分の目で確かめましょう。確かめたら元に戻します。
練習問題
答えを見ずに解いてみてください。
- 「好きな機材」を1行で入力する欄を、
labelつきで足してください（idとnameはgear）。 - ジャンルの選択肢に「ダブ」（
valueはdub）を足してください。 - 項目名の「ニックネーム」の文字をクリックして、入力欄にカーソルが入ることを確かめてください。入らないときは何が原因か考えてください。
よくあるエラーと直し方
HTML は間違えてもエラーメッセージを出さず、黙って動かなくなります。
項目名をクリックしても入力欄に入らない
label の for と、入力欄の id が一字でも違うと結びつきません。たとえば for="nicname"（k が抜けた）と id="nickname" では、ブラウザは何も言わず、結びつけをあきらめます。両方をコピーせず見比べて直します。
入力した内容が送られない
その欄に name がありません。id だけでは送られないので注意してください。
送信ボタンを押しても何も起きない
ボタンが <form> の外にあるか、</form> を閉じる場所を間違えている可能性があります。ボタンが <form> と </form> の間にあることを確認します。
空のまま送れてしまう
required を書き忘れています。ただし required はブラウザ側の確認だけです。本当の安全は、あとの回で学ぶサーバー側（データを受け取る側）の確認でも守ります。
答え
1.
<p>
<label for="gear">好きな機材</label><br>
<input type="text" id="gear" name="gear">
</p>
2.
<option value="dub">ダブ</option>
<select> と </select> の間に書きます。
3. 入らないときは、label の for と入力欄の id が同じ名前になっているかを確認します。大文字・小文字も区別されます。
次回予告
次回は「#06 CSS 入門：色・文字・余白」です。今日作ったフォームを、色や余白で見やすく整えます。