カテゴリー
未分類

20200303

HTMLフォーム部品編

・input
input type=”text”
とすることで入力フォームを設置することができる

input type=”text” value=”hello”
ではじめからテキストをフォームの中に書いておくことができ

input type=”password”
とすることで伏せ字で入力することもできるようにすることができる

textarea /textarea
で複数行入力することもできる

・label
入力部品等の説明をするときはラベルを使うのが一般的

input type=”text” id=”name”
id属性を付けて

label for=”name”
と紐付けることができる

<label for=”name”>名前</label>

また、入力部品をlabelタグの中に入れることもできる

<label>名前 <input type=”text”></label>

この場合、入力部品の紐付けが明確なのでidとforは省略できる
通常はこのかたちで使用するものかなと思った。

・select
このタグを使うことでドロップダウンリストを設置することができる
選択肢はoptionで挟み込み、それをselectタグで挟み込む

<label for=”color”>好きな色</label>
<select id=”color”>
<option>色1</option>
<option>色2</option>
</select>

selectedをつけて初期表示、sizeで初期表示数、multipleで複数選択も可能になる
<select id=”color” size=”4″ multiple>
<option>色1</option>
<option selected>色2</option>
</select>

ドロップダウンなども割と簡単に設置できるものなのだなと思いました(小並感)

フォーム部品編#3まで終了

WordPress.com で次のようなサイトをデザイン
始めてみよう