セレクトボックスを作成する方法
HTMLの<option>要素のvalue属性は、<select>要素内で使用され、各選択肢の値を指定します。この値は、フォームが送信されたときにサーバーに送られる値です。
主な特徴と使用方法は以下の通りです：
- 値の指定：
value属性は、その選択肢が選ばれたときに送信される値を指定します。- 例えば、
<option value="apple">リンゴ</option>では、”apple”が送信される値です。
- 表示テキストとの区別：
<option>タグの内容（この場合は”リンゴ”）は、ユーザーに表示されるテキストです。value属性の値は、通常ユーザーには見えません。
- 省略可能：
value属性を省略した場合、<option>タグの内容がそのまま値として使用されます。
- データ型：
valueの値は常に文字列として扱われますが、数値やコードなど、さまざまな種類のデータを表現できます。
この仕組みにより、ユーザーに分かりやすい選択肢を表示しつつ、システムで扱いやすい値を別途指定することができます。
<select name="fruit">
<option value="apple">リンゴ</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
</select>
<select name="tshirt-size">
<option value="S">Small (S)</option>
<option value="M">Medium (M)</option>
<option value="L">Large (L)</option>
<option value="XL">Extra Large (XL)</option>
</select>ドロップダウンメニューの作り方
<div class="select-wrapper">
<select name="fruit">
<option value="apple">リンゴ</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
</select>
</div> .select-wrapper {
position: relative;
display: inline-block;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px 30px 10px 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
font-size: 16px;
}
.select-wrapper::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #333;
pointer-events: none;
}
まとめ
セレクトボックスの作り方を説明しました。
