学習記録2_<input>と<select>と<textarea>

ひとこと

• 数えきれないほどWebサイトで値を送信してきたけれどインプットの仕組みがわかってすっきり
• Zennに書く時間が割と取られるなあ😅

教材

https://www.udemy.com/share/105qh83@ajKGu7peAqJPriZy6R-3rNLTCheyosKEJjzl63HlrI0sLu3IKBx37T1iOOHXWIc1/

学習範囲

HTMLの終盤。前回「テーブルとフォーム😀」のつづき、特にフォームにおけるチェックボックス/ラジオボタン/セレクト。

ノート📓

Reddit/Google/YouTubeの検索で行われているリクエストをフォームで実現する(input初級の復習)

inputつづき

1. <input>要素のチェックボックス
2. <input>要素のラジオボタン
3. <input>要素のレンジ
4. <select>要素
5. <textarea>要素

1. <input>要素のチェックボックス: type="checkbox"

• 機能はその名の通りチェックボックス
• ラベルを関連づける
• checkedで初期値がチェックつきになる
  • e.g. <input type="checkbox" name="agree_tos" id="agree">

2. <input>要素のラジオボタン: type="radio"

• 機能はその名の通りラジオボタン
• ラベルを関連づける
• id属性の値を統一することでラジオボタンをグルーピングする (単一選択であるため、選択肢となる複数の項目をまとめる必要がある)
  • 送信する値を value属性で指定する

3. <input>要素のレンジ: type="range"

• 数値の範囲をインプットするのに使う
• 最小値はmin,最大値はmaxを用いる
• 1メモリ(変化の最小値とでもいう？)はstepを用いる
• 初期値はvalueで指定できる

4. <select>要素

• <select>要素と<option>要素で構成される、ドロップダウンのこと
• <select>要素の中に選択肢としての<option>要素がくる
• value属性に送信したい値を指定する
• <option>要素にselecteを使うと初期値で選択された状態になる
  • e.g. <option value="steak" selected>ステーキ</option>

5. <textarea>要素

• type="text"の複数行版とおもっていい, 注意点はinput要素ではなくこれ自体が<textarea>要素なこと
• テキストエリアの大きさをrowで行数, colで文字数を指定できる

1週間おつかれさまでした🌚今日はさらに進めます