HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのselect要素で表示されるオプションの数を指定する方法

HTMLの<select>要素で同時に表示される選択肢（オプション）の数を指定するには、size属性を使用します。

通常、<select>要素はクリックすると選択肢が展開されるドロップダウン形式で表示されますが、size属性に数値を設定すると、その数だけの選択肢が常に表示されるリストボックス形式に変わります。例えば「size="5"」と指定すれば、5つの選択肢が一度に画面上に表示されます。

コード例

以下のコードは、size属性を使って表示されるオプションの数を5つに設定した実装例です。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <p>これまでに訪れたことのある国を選んでください。</p>
      <select size = "5">
         <option value = "india">インド</option>
         <option value = "us">アメリカ</option>
         <option value = "canada">カナダ</option>
         <option value = "aus">オーストラリア</option>
         <option value = "bangladesh">バングラデシュ</option>
      </select>
   </body>
</html>

ポイント

・size属性の値には、表示したいオプションの数を整数で指定します。
・size属性を1以上に設定すると、ドロップダウンではなくリストボックスとして表示されます。
・multiple属性と組み合わせることで、Ctrlキー（MacはCommandキー）を押しながらクリックして、複数の選択肢を同時に選択できるようになります。
・選択肢の総数がsize属性の値より多い場合は、スクロールバーが自動的に表示され、残りの選択肢にアクセスできます。

  1. HTMLのdatalistタグの使い方！入力候補リストを作成する方法

    datalistタグとは？HTMLの<datalist>タグは、<input>要素に対して選択肢（候補リスト）を定義するためのタグです。テキストフィールドにユーザーが入力を始めると、あらかじめ用意された候補がドロップダウン形式で表示されるため、入力の手間を減らし、入力ミスを防ぐことができます。<datalist>タグを使用する際のポイントは以下の2点です。・<input>要素側にlist属性を指定し、その値と<datalist>要素のid属性を一致させる・選択肢は<datalist>〜</datalist>の中

  2. HTMLのinput要素の幅を文字数で指定する方法【size属性の使い方】

    HTMLの<input>要素の幅を文字数を基準に指定したい場合は、size属性を使用します。size属性に数値を設定すると、その数値分の平均的な文字が表示できる幅が確保されます。 size属性の基本構文 <input type=text name=sub size=10> 上記のように記述すると、半角文字約10文字分の幅を持つテキストボックスが表示されます。size属性を省略した場合の既定値は「20」です。 使用例 次の例では、size属性とmaxlength属性を組み合わせて、表示幅と入力可能な最大文字数を同時に指定しています。 <!DOCTYPE html