HTMLの入口（0-0）｜まずは1ページを“形にする”までの最短ロードマップ（web-programming / html）
toshi
ToshiLab
【HTML 1-3】フォームの入口｜input・textarea・buttonで“入力できるページ”を作る（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
ここまでで、
・見出し
・文章
・リンク
・画像
・ページの構造
を触ってきました。
次は「入力できるページ」です。
お問い合わせフォームみたいなものを作る前に、
まずは HTML だけで “入力欄の形” を作れるようになります。
- 「フォームは“3つ”から始めれば十分です」
-
最初に覚えるのは、この3つでOKです。
・input：1行の入力欄
・textarea：複数行の入力欄
・button：送信や操作のボタンここに label を添えると、
「何を入力する欄なのか」が分かりやすくなります。
Q
目次
ここまでできればOK
今回のゴール
- 名前を入力する欄が作れる
- メッセージを書く欄が作れる
- ボタンが置ける
- label で“何の欄か”を示せる
- フォームの基本的な形が分かる
コピペOK
まずは完成形を見る
まずは下のコードを index.html に貼って保存してください。
「入力できるページ」の最小形です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>フォームの練習</title>
</head>
<body>
<header>
<h1>フォームの練習</h1>
<p>input と textarea を使って、入力できるページを作ります。</p>
</header>
<main>
<h2>お問い合わせ風のフォーム</h2>
<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="message">メッセージ</label><br />
<textarea id="message" name="message" rows="5" cols="40"></textarea>
</p>
<p>
<button type="submit">送信する</button>
</p>
</form>
</main>
<footer>
<p>© ToshiLab</p>
</footer>
</body>
</html>最低限だけ
どのタグが何をしている？
| タグ | 役割 | まず覚えること |
|---|---|---|
| form | フォーム全体のまとまり | 入力欄をまとめる箱 |
| label | 項目名 | 何を入力する欄か分かる |
| input | 1行入力 | 名前やメールなど |
| textarea | 複数行入力 | メッセージ本文など |
| button | ボタン | 送信や操作に使う |
地味だけど大事
label を付ける理由
label は、見た目以上に大事です。
たとえば「お名前」と書いてあるだけでも意味は分かりますが、
label を使うと「この文字はこの入力欄の説明です」とHTMLに伝えられます。
- 何の入力欄か分かりやすくなる
- 自分で見返した時も整理しやすい
- 後でCSSやJavaScriptを加える時も扱いやすい
type属性について
input の type は何が違う？
| type | 用途 | 例 |
|---|---|---|
| text | 普通の1行入力 | 名前、件名など |
| メール形式の入力 | メールアドレス | |
| password | パスワード入力 | パスワード欄 |
| checkbox | チェック欄 | 同意する、確認した |
練習
少しだけ変更してみる
下のどれか1つだけでも変えてみると、手が覚えやすくなります。
- 「お名前」を「ニックネーム」に変える
- textarea の rows を 5 → 8 に変える
- ボタンの文字を「送信する」→「確認する」に変える
- 入力欄を1つ追加する（例：件名）
件名
入力欄を1つ追加する例
たとえば「件名」を追加するなら、こう書けます。
※17行目 <form> の下に以下コードを追加。
<p>
<label for="subject">件名</label><br />
<input type="text" id="subject" name="subject" />
</p>
フォームは「同じ型を増やす」
感覚で作ると分かりやすいです。
ここだけ見ればOK
よくあるつまずき
- 「送信ボタンを押すと何か起きるの？」
-
いまの段階では、まだ“送信処理”はしていません。
なので、見た目としてボタンがある状態を作っているだけです。実際に送信して何かを処理するのは、後で PHP や JavaScript の回につながっていきます。
今は「フォームの形が分かる」で十分です。
Q
- 「改行が多くて見づらい」
-
いまは見やすくするために <br /> を使っています。
細かい見た目の調整は、次の CSS で整えられます。今の段階では、
「まず入力欄が置ける」
「何の欄か分かる」
が大事です。
Q
- 「form タグの中に全部入れるの？」
-
基本は、フォームとして扱いたい入力欄やボタンを form の中にまとめます。
“この範囲が入力フォームです”と分かるようにするためです。
Q
ここだけ覚えれば十分
今回のまとめ
- form は入力欄のまとまり
- input は1行入力
- textarea は複数行入力
- button は送信・操作のボタン
- label を付けると分かりやすい
次に読む
HTML 2-1. へ
ここまでで、HTMLの土台はかなり揃ってきました。
次は「ミニ制作」として、今までのタグを使って1ページを完成させます。
PR：最初の1冊（必要な方だけ）
PR：HTMLを進めるための参考（必要な方だけ）
HTML/CSSの最初の土台づくり用に、1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
