HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用67.textarea要素-複数行テキストボックス、select, option要素-選択リストボックス

      2017/10/30

textarea要素とは

input要素と違い複数行の入力ボックスを表示します。他にもinput要素と違い終了タグがあります。value属性がないためデフォルト値のテキストはタグ内にテキストを記述します。デフォルト値のテキストは省略可能です。初期値はdisplay: inline-block;です。

テキストエリア

name属性

プログラムとの紐付け(連携)に使用する名前を指定する属性。入力フォームで利用する場合は必須です。値は半角英数で指定します。

cols属性、rows属性

cols属性は横幅の指定。rows属性は高さの指定です。値は文字数で指定します。フォントの種類やブラウザによって幅、高さに違いがでます。CSSでwidth, heightを指定することで幅、高さを調整することもできます。省略可能です。

placeholder属性

入力欄に表示するテキストの指定で入力中は表示されません。省略可能です。HTML5で追加されました。
※IEでは表示されません。

maxlength属性

入力できる最大文字数の指定です。指定文字数を超えたテキストはカットされます。省略可能です。input要素と違いHTML5から追加された属性です。
※IEでは無効です。

select要素、option要素とは

select要素、option要素はセットで選択リストボックスを表示します。select要素は選択リスト全体を構成し、子要素のoption要素でリストを作成します。select要素の子要素は必ずoption要素にする必要があります。select要素の初期値はdisplay:inline-block、option要素の初期値はdisplay:blockです。

選択リストボックス

name属性(select要素)

プログラムとの紐付け(連携)に使用する名前を指定する属性。入力フォームで利用する場合は必須です。値は半角英数で指定します。option要素では指定できません。

value属性(option要素)

送信する値を指定します。必須です。

selected属性(option要素)

リストの1つを選択状態にします。省略可能です。HTML5からは値も省略可能です。

HTML4.01, XHTML1.0は値の省略は不可です。値はselectedのみです。

まとめ

  • textarea要素は複数行テキストボックスの表示
  • select要素、option要素は選択リストボックスの表示
  • select要素の子要素はoption要素のみ
  • option要素はvalue属性が必須

 - HTML・CSS