HTMLで使う入力/リスト系のフォーム部品を説明した記事です。
input
一行テキストを入力できる
type 属性を text とする。
＜ソース＞
<input type="text">＜ブラウザの表示＞
初期値が入力された状態にする
value 属性に初期値を指定する。
＜ソース＞
<input type="text" value="ここに初期値">＜ブラウザの表示＞
例文を入力しておく
placeholder 属性に例文を指定する。
＜ソース＞
<input type="text" placeholder="ここに例文">＜ブラウザの表示＞
入力した文字を伏字にする（パスワード）
type 属性を password とする。
＜ソース＞
<input type="password">＜ブラウザの表示＞
textarea
複数行を入力できる
＜ソース＞
<textarea></textarea>＜ブラウザの表示＞
初期値が入力された状態にする
textarea タグで囲う。
＜ソース＞
<textarea>ここに初期値</textarea>＜ブラウザの表示＞
例文を入力しておく
placeholder 属性に例文を指定する。
＜ソース＞
<textarea placeholder="ここに例文"></textarea>＜ブラウザの表示＞
select
ドロップダウンリストが作成できる
select タグで option タグを囲う。
＜ソース＞
<select>
<option>色1</option>
<option>色2</option>
<option>色3</option>
<option>色4</option>
<option>色5</option>
<option>色6</option>
<option>色7</option>
</select>＜ブラウザの表示＞
表示する行数を指定する
size 属性で行数を指定する。
＜ソース＞
<select size="3">
<option>色1</option>
<option>色2</option>
<option>色3</option>
<option>色4</option>
<option>色5</option>
<option>色6</option>
<option>色7</option>
</select>＜ブラウザの表示＞
複数選択可にする
multiple 属性を使う。
＜ソース＞
<select size="3" multiple>
<option>色1</option>
<option>色2</option>
<option>色3</option>
<option>色4</option>
<option>色5</option>
<option>色6</option>
<option>色7</option>
</select>＜ブラウザの表示＞
windowsOS は Ctrl キーを押しながら、macOS は Command キーを押しながら選択可能。
最初に選択されている項目を指定する
option タグに selected 属性を使う。
＜ソース＞
<select size="3" multiple>
<option>色1</option>
<option selected>色2</option>
<option>色3</option>
<option>色4</option>
<option>色5</option>
<option>色6</option>
<option>色7</option>
</select>＜ブラウザの表示＞
label
他のフォーム部品と紐付ける
書き方１
label タグに for 属性、フォーム部品に id 属性を指定する。
＜ソース＞
<label for="name">名前</label>
<input type="text" id="name">＜ブラウザの表示＞
ここでの違いは分かり辛いですが、名前 と input タグが紐付けられたことにより、名前 をクリックしても input タグがフォーカスされるようになります。仮に、名前と input タグが離れた場所にあっても紐付けされるようになっています。
書き方２
label タグでフォーム部品を囲う
＜ソース＞
<label>名前 <input type="text"></label>＜ブラウザの表示＞
こちらの方法でもできますが、for 属性と id 属性で紐付けされていないので label と名前は離すことはできません。
コメント