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

HTMLのselect要素のsize属性とは？ドロップダウンリストの表示項目数を設定する方法

select要素のsize属性とは

HTMLの<select>要素に指定できるsize属性は、ドロップダウンリスト（選択リスト）に同時に表示される項目の数を設定するための属性です。size属性に「1」より大きい値を指定すると、リストにスクロールバーが追加され、複数の選択肢を一覧形式で確認できるようになります。

通常のドロップダウンリストはクリックしないと選択肢が展開されませんが、size属性を設定することで、ページを開いた時点から指定した数の項目が常に表示されるリストになります。

構文

<select size="num">

上記のnumには、ドロップダウンリストに表示したい項目の数を整数で指定します。

それでは、<select>要素のsize属性を実際に実装した例を見ていきましょう。

実装例

<!DOCTYPE html>
<html>
<body>
<h1>Candidate Profile</h1>
<p>Following are the details to be submitted by the candidate:</p>
<h2>Educational Qualification</h2>
<form action="">
<section>
<h3>Graduation</h3>
<select size = "2">
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
    <option value="btech">B.SC</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select size="2">
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
</select>
</section><br>
<input type="submit" value="Next">
</form>
</body>
</html>

出力結果

HTMLのselect要素のsize属性とは？ドロップダウンリストの表示項目数を設定する方法

コードの解説

上記の例では、「学部（Graduation）」と「大学院（Postgraduation）」の2つのドロップダウンリストを設定しています。

<section>
<h3>Graduation</h3>
<select size = "2">
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
    <option value="btech">B.SC</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select size="2">
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
</select>
</section>

どちらのリストも、表示する項目数を指定できるsize属性を使用し、以下のように「2」を設定しています。その結果、各リストには4つの選択肢のうち2つが常に表示され、残りの項目はスクロールして選択できる仕組みになっています。

<select size="2">

なお、size属性にmultiple属性を組み合わせると、Ctrlキー（MacではCommandキー）を押しながらクリックすることで、複数の項目を同時に選択できるようになります。フォームの使い勝手を向上させたい場合に、ぜひ活用してみてください。

  1. HTMLのsize属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのsize属性は、select要素やinput要素において、画面に表示される選択肢の数（または入力欄の文字数）を指定するための属性です。この属性を使うことで、ドロップダウンリストを複数行表示のリストボックスに変更したり、テキスト入力欄の横幅を調整したりすることができます。 size属性の構文 size属性の基本的な記述方法は以下のとおりです。 <tagname size="数値"></tagname> size属性には、表示したい選択肢の数や文字数を整数で指定します。 HTML size属性の使用例 それでは、実際にsize属性を使用した具体

  2. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目