HTMLとCSSが分かりやすく学べるサイト

  1. ホーム
  2. HTML・CSS
  3. 応用67.textarea要素-複数行テキストボックス、select, option要素-選択リストボックス

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

  1. 公開日:2017年07月14日
  2. 最終更新日:2022年08月08日

HTML・CSS

この記事をシェアする:

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属性が必須