HTMLいろいろな選択方法

スポンサーリンク

〇〇を選択して下さい

〇〇を選択して下さい

〇〇を選択して下さい

〇〇を選択して下さい

〇〇を選択して下さい

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTMLなんでも詰め合わせ</title>
</head>
<body>
<p>〇〇を選択して下さい<br>
<select>
<option>test</option>
<option>test</option>
<option>test</option>
</select></p>

<p>〇〇を選択して下さい<br>
<select name="answer">
<option value="" selected>こちらから選択して下さい</option>
<option value="">〇〇</option>
<option value="">△△</option>
<option value="">××</option>
</select></p>

<p>〇〇を選択して下さい<br>
<select name="answer" size="4">
<option value="" selected>選択してください</option>
<option value="">〇〇〇〇</option>
<option value="">〇〇〇〇</option>
<option value="">〇〇〇〇</option>
</select></p>

<p>〇〇を選択して下さい<br>
<select name="land">
<option value="" selected>選択してください</option>
<optgroup label="〇〇">
<option value="1">〇〇</option>
<option value="2">〇〇</option>
<option value="3">〇〇</option>
</optgroup>
<optgroup label="△△">
<option value="10">△△</option>
<option value="11">△△</option>
<option value="12">△△</option>
<option value="13">△△</option>
</optgroup>
</select></p>

<p>〇〇を選択して下さい<br>
<select name="answer" size="5">
  <option value="" selected>選択してください</option>
  <optgroup label="〇〇〇〇">
    <option value="20">〇〇〇〇〇〇</option>
    <option value="21">〇〇〇〇〇〇</option>
    <option value="22">〇〇〇〇〇〇</option>
  </optgroup>
  <optgroup label="△△△△">
    <option value="30">△△△△△△</option>
    <option value="31">△△△△△△</option>
    <option value="32">△△△△△△</option>
  </optgroup>
</select></p>
</body>
</html>