目次
textarea要素とは
input要素と違い複数行の入力ボックスを表示します。他にもinput要素と違い終了タグがあります。value属性がないためデフォルト値のテキストはタグ内にテキストを記述します。デフォルト値のテキストは省略可能です。初期値はdisplay: inline-block;です。
<textarea name="other" cols="50" rows="4">初期テキスト</textarea>
name属性
プログラムとの紐付け(連携)に使用する名前を指定する属性。入力フォームで利用する場合は必須です。値は半角英数で指定します。
<textarea name="other"></textarea>
cols属性、rows属性
cols属性は横幅の指定。rows属性は高さの指定です。値は文字数で指定します。フォントの種類やブラウザによって幅、高さに違いがでます。CSSでwidth, heightを指定することで幅、高さを調整することもできます。省略可能です。
<textarea name="other" cols="50" rows="4"></textarea>
placeholder属性
入力欄に表示するテキストの指定で入力中は表示されません。省略可能です。HTML5で追加されました。
※IEでは表示されません。
<textarea name="other" placeholder="お問合せ内容"></textarea>
maxlength属性
入力できる最大文字数の指定です。指定文字数を超えたテキストはカットされます。省略可能です。input要素と違いHTML5から追加された属性です。
※IEでは無効です。
<textarea name="other" maxlength="20"></textarea>
select要素、option要素とは
select要素、option要素はセットで選択リストボックスを表示します。select要素は選択リスト全体を構成し、子要素のoption要素でリストを作成します。select要素の子要素は必ずoption要素にする必要があります。select要素の初期値はdisplay:inline-block、option要素の初期値はdisplay:blockです。
<select name="list">
<option value="選択1">選択1</option>
<option value="選択2">選択2</option>
<option value="選択2">選択2</option>
<option value="選択2">選択2</option>
</select>
name属性(select要素)
プログラムとの紐付け(連携)に使用する名前を指定する属性。入力フォームで利用する場合は必須です。値は半角英数で指定します。option要素では指定できません。
value属性(option要素)
送信する値を指定します。必須です。
selected属性(option要素)
リストの1つを選択状態にします。省略可能です。HTML5からは値も省略可能です。
<!-- 値を省略(HTML5の場合) -->
<option value="選択1" selected>選択1</option>
HTML4.01, XHTML1.0は値の省略は不可です。値はselectedのみです。
<!-- 値を指定(HTML4.01, XHTML1.0の場合) -->
<option value="選択1" selected>選択1</option>
まとめ
- textarea要素は複数行テキストボックスの表示
- select要素、option要素は選択リストボックスの表示
- select要素の子要素はoption要素のみ
- option要素はvalue属性が必須