第1部 HTML — Day 8 / 30

フォーム

<form>
  <label for="name">名前</label>
  <input type="text" id="name" placeholder="例: 山田 太郎">

  <label for="color">好きな色</label>
  <input type="color" id="color">

  <button type="button">送信(まだ動きません)</button>
</form>

<input> は type を変えると、テキスト・色・日付などいろいろな入力欄になります。<label> は入力欄の説明で、for と id を同じ値にして対応づけます。

ボタンを押したときの処理を作るのはJavaScriptの仕事です(第3部で学びます)。ここでは「入力欄を並べられる」ことがゴールです。

今日の練習

type="date" や type="range" など、type の値をいろいろ変えて表示がどう変わるか確かめましょう。

模範解答を見る

<form>
  <label for="birthday">誕生日</label>
  <input type="date" id="birthday">

  <label for="level">やる気(0〜100)</label>
  <input type="range" id="level" min="0" max="100">

  <label for="email">メールアドレス</label>
  <input type="email" id="email" placeholder="taro@example.com">
</form>

date はカレンダー、range はスライダーになります。ほかにも number・time・checkbox などがあります。

理解度チェック

学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. input タグで入力欄の種類(テキスト・色・日付など)を切り替える属性はどれでしょうか?

id type placeholder

Completed

正解です！Day 8 の学習を確認しました

科目	経営情報 2026
教材	プログラミング入門30日 Day 8 フォーム
学籍番号
氏名
提出時間
確認コード

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。