結論: form で挟み、input で欄、button でボタン。送り先はまだない
入力欄とボタンは、ページの「受付の窓口」です。窓口だけなら HTML で作れますが、受け取った内容を処理する裏側（サーバーやプログラム）は別に作る必要があります。今回は窓口を先に作ります。実際に動く見本がこちらです（入力しても、どこにも送られません）。
名前
年齢
誕生日
今日のコード（コピーして使えます）
動画の最後にできあがったコードです。右上の「コードをコピー」ボタンを押すと全文が入ります。<form> 〜 </form> が今回足した部分で、body の一番下にあります。猫の画像は第2回の記事からダウンロードできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
<style>
h1 { color: tomato; }
p { font-size: 20px; }
body { background: lightyellow; }
h1 { text-align: center; }
th, td { border: 1px solid gray; }
table { border-collapse: collapse; }
th, td { padding: 8px; }
</style>
</head>
<body>
<h1>はじめてのページ</h1>
<h2>自己紹介</h2>
<table>
<tr>
<th>好きなもの</th>
<th>理由</th>
</tr>
<tr>
<td>猫</td>
<td>かわいいから</td>
</tr>
<tr>
<td>カレー</td>
<td>おいしいから</td>
</tr>
</table>
<p>IT業界をやさしく案内します。</p>
<p>これは1行目。<br>
これは2行目。</p>
<ol>
<li>開発の流れ</li>
<li>職種図鑑</li>
<li>用語集</li>
<li>学び方</li>
</ol>
<a href="https://it-nyumon.com/">サイトへ</a>
<a href="https://it-nyumon.com/">
<img src="neko.png" alt="ねこ" width="200">
</a>
<form>
<p>
名前
<input type="text" placeholder="太郎">
</p>
<p>
年齢
<input type="number">
</p>
<p>
誕生日
<input type="date">
</p>
<p>
<label>
<input type="checkbox">
お知らせを受け取る
</label>
</p>
<p>
<button>送信</button>
</p>
</form>
</body>
</html>input の type で欄の種類が変わる
type="text": 文字を入れる欄。名前や住所など。type="number": 数字専用の欄。上下の矢印が付き、文字は入れられません。type="date": 日付の欄。カレンダーから選べます。type="checkbox": チェックボックス。オン／オフを選びます。
ほかにも email（メールアドレス）、password（伏せ字になる）、radio（1つだけ選ぶ丸ボタン）など、type はたくさんあります。同じ input で、type を変えるだけという考え方を押さえておけば、あとは必要になったときに調べれば十分です。
placeholder と label
placeholder="太郎": 欄の中に薄い文字で「例」を見せます。入力を始めると消えます。label: 欄の「名札」。<label><input type="checkbox"> お知らせを受け取る</label>のように挟むと、文字を押してもチェックが入るようになります。小さなチェックボックスを狙って押さなくて済むので、親切な作りです。
button と「送り先」の話
<button>送信</button> で、押せるボタンができます。ただし今の状態で押しても、どこにも送られません。送り先、つまり受け取って処理するサーバーがないからです。
入力欄とボタンは「受付の窓口」、受け取って処理する仕組みは「裏側」。裏側を作るのがプログラミングやサーバーの話で、このシリーズの後半（JavaScriptで動かす回）で少し触れます。まずは、窓口の作り方をしっかり覚えておけば十分です。
よくある質問
送信ボタンを押したら、入力内容をどこかに送るには？
受け取る側（サーバー）が必要です。form の action に送り先のアドレスを書き、サーバー側で受け取って処理するプログラムを作ります。入力欄とボタンは「受付の窓口」で、裏側の仕組みは別に作る必要があります。このシリーズの後半で触れます。
入力を必須にするには？
input に required を足します（例: <input type="text" required>）。空のまま送信ボタンを押すと、ブラウザが「このフィールドを入力してください」と教えてくれます。
長い文章を入れる欄や、選択肢から選ぶ欄は作れますか？
作れます。複数行の文章は textarea、プルダウンで選ぶ欄は select と option を使います。どちらも form の中に置いて使う部品です。
input に閉じタグは要りますか？
要りません。br や img と同じ「閉じタグがいらない仲間」です。一方、button と label と form は開始タグと終了タグで挟みます。