プログラミング入門30日 の Day 8
🎯 今日のゴール input や button を使って、入力欄のあるページを作れる。
<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 の提出欄にアップロードしてください。
Q. input タグで入力欄の種類(テキスト・色・日付など)を切り替える属性はどれでしょうか?
| 問題番号 | プログラミング入門30日 Day 8 |
|---|---|
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の提出欄にアップロードしてください。