textarea と リスト いろいろ

Inputタグの種類Inputタグの属性Textareaリストメニュー

Textarea

テキストエリア

<textarea name="kanso" rows="4" cols="60" wrap="hard">
ここにご感想をお書きください
</textarea>

各ブラウザでテキストエリアの大きさを統一するには、rows,colsではなくスタイルシートでwidthとheightを指定します。
wrap属性
    off     …入力されたままになる。
              テキストエリアに長文を打つとそのまま改行されず、横スクロールが発生。
    hard  …長文を打つと自動で改行され入力欄に横スクロールが出ない。
             送信時には改行が反映されて送られる。
    soft   …入力時には表示上は自動改行（ワードラップ）するが、
             送信時には長い行も改行を含まず1行として送られる。

readonly属性 …内容を書き変えることができなくなる。

リストメニュー

プルダウンメニュー

  <select name="animal">
    <option value="">ここから選んでください</option>
    <option value="キリン">キリン</option>
    <option value="ライオン">ライオン</option>
    <option value="インコ">インコ</option>
    <option value="ふくろう">ふくろう</option>
  </select>
グループ化プルダウンメニュー

<select name="fruit">
    <option value="" selected>ここから選んでください</option>
    <optgroup label="哺乳類">
        <option value="キリン">キリン</option>
        <option value="ライオン">ライオン</option>
    </optgroup>
    <optgroup label="鳥類">
        <option value="インコ">インコ</option>
        <option value="ふくろう">ふくろう</option>
    </optgroup>
</select>
フィールドリスト：単数選択

<select name="animal2" size="4">
    <option value="kirin">キリン</option>
    <option value="lion">ライオン</option>
    <option value="インコ">インコ</option>
    <option value="ふくろう">ふくろう</option>
</select>
フィールドリスト：複数選択

複数選択する時は、shift + 選択する項目をクリックしてください。
または、【mac】… ⌘ + 選択する項目をクリック / 【Win】… ctrl+ 選択する項目をクリック

スマホでは複数選択ボタンがスライドアップする


<select name="cars" size="4" multiple>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
<select>

TOP