免費(fèi)AI編程助手
HTML 表單選擇
HTML表單選擇
select 元素創(chuàng)建用戶選擇的選項(xiàng)列表。
select 具有局部屬性: name，disabled，form，size，multiple，autofocus，required 。它可以包含 contentsoption和 optgroup 元素。
HTML5中的form，autofocus 和 required屬性是新增的。
name，disabled，form，autofocus 和 required 屬性與輸入元素的工作方式相同。
size 屬性指定要向用戶顯示的選項(xiàng)數(shù)。
multiple屬性允許用戶選擇多個(gè)值。
您可以使用option元素來定義要向用戶顯示的選項(xiàng)。
例1
以下代碼顯示如何使用select和option元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave"> Favorite Fruit:
<select id="fave"name="fave">
<option value="A" selected label="Apples">Apples</option>
<option value="B" label="Batch">Batch</option>
<option value="C" label="C">C</option>
<option value="S" label="SQL">SQL</option>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>例2
您可以使用select元素上的size屬性向用戶顯示多個(gè)選項(xiàng)，并使用multiple屬性允許用戶選擇多個(gè)選項(xiàng)。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave" style="vertical-align: top"> Favorite
Fruit: <select id="fave" name="fave" size="5" multiple>
<option value="a" selected label="Apples">Apples</option>
<option value="o" label="Oracle">Oracle</option>
<option value="c" label="C">C</option>
<option value="p" label="Pascal">Pascal</option>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>選擇結(jié)構(gòu)
您可以使用select元素上的 size 屬性向用戶顯示多個(gè)選項(xiàng)，以及允許用戶的多個(gè)屬性以選擇多個(gè)選項(xiàng)。...
它具有局部屬性:label，disabled和包含option元素。
您可以使用 optgroup 元素將option元素分組在一起。
label 屬性允許您為已分組的選項(xiàng)創(chuàng)建標(biāo)題。
disabled 屬性使選項(xiàng)元素不可選。
以下代碼顯示正在使用的optgroup元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave" style="vertical-align: top"> Favorite
Fruit: <select id="fave" name="fave">
<optgroup label="Top Choices">
<option value="apples" label="Apples">Apples</option>
<option value="oranges" label="Oranges">Oranges</option>
</optgroup>
<optgroup label="Others">
<option value="cherries" label="Cherries">Cherries</option>
<option value="pears" label="Pears">Pears</option>
</optgroup>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html> optgroup 標(biāo)簽僅用于結(jié)構(gòu);用戶不能選擇這些值作為值。
例3
以下代碼顯示了如何使用disabled選項(xiàng)創(chuàng)建選項(xiàng)組。
<html>
<body>
<form action="" method="get" name="frmInfo">
Please select the product you are interested in:<br /> <select
name="selInformation">
<option disabled="disabled" value="">-- Hardware --</option>
<option value="Desktop">Desktop computers</option>
<option value="Laptop">Laptop computers</option>
<option disabled="disabled" value="">-- Software --</option>
<option value="OfficeSoftware">Office software</option>
<option value="Games">Games</option>
<option disabled="disabled" value="">-- Peripherals --</option>
<option value="Monitors">Monitors</option>
<option value="InputDevices">Input Devices</option>
<option value="Storage">Storage</option>
</select> <br />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
更多建議：