不常用到的标签 <optgroup> 更好将<select>下拉选项分类

2 views
Skip to first unread message

星星

unread,
Aug 29, 2006, 10:43:10 AM8/29/06
to yuanhotel
<form id="two" action="" method="post">
<fieldset id="personal">
<legend>PERSONAL INFORMATION</legend>
<label for="lastname">last name : </label>
<input name="lastname" id="lastname" type="text"
tabindex="1" />
<br />
<label for="firstname">first name : </label>
<input name="firstname" id="firstname" type="text"
tabindex="2" />
<br />
<label for="address">address : </label>
<input name="address" id="address" type="text"
tabindex="3" />
<p>...more personal information...</p>
</fieldset>
<fieldset id="medical">
<legend>Favorite Fruit </legend>
<label for="smallpox">Apple : </label>
<input name="illness" id="smallpox" type="checkbox"
value="smallpox" tabindex="20" />
<br />
<label for="mumps">Banana : </label>
<input name="illness" id="mumps" type="checkbox"
value="mumps" tabindex="21" />
<br />
<label for="dizziness">Orange : </label>
<input name="illness" id="dizziness" type="checkbox"
value="dizziness" tabindex="22" />
<br />
<label for="sneezing">Pear : </label>
<input name="illness" id="sneezing" type="checkbox"
value="sneezing" tabindex="23" />
<p>...more fruit...</p>
</fieldset>
<fieldset id="opt">
<legend>OPTIONS</legend>
<select name="choice">
<option selected="selected" label="none" value="none">
none
</option>
<optgroup label="Group 1">
<option label="cg1a" value="val_1a">Selection group 1a
</option>
<option label="cg1b" value="val_1b">Selection group 1b
</option>
<option label="cg1c" value="val_1c">Selection group 1c
</option>
</optgroup>
<optgroup label="Group 2">
<option label="cg2a" value="val_2a">Selection group 2a
</option>
<option label="cg2b" value="val_2a">Selection group 2b
</option>
</optgroup>
<optgroup label="Group 3">
<option label="cg3a" value="val_3a">Selection group 3a
</option>
<option label="cg3a" value="val_3a">Selection group 3b
</option>
</optgroup>
</select>
</fieldset>
<fieldset id="current">
<legend>Web Standards</legend>
<p>...You know Web standards?</p>
<label for="yes">yes : </label>
<input name="medication" id="yes" type="radio"
value="yes" tabindex="35" />
<br />
<label for="no">no : </label>
<input name="medication" id="no" type="radio"
value="no" tabindex="35" />
<br />
<p>...please indicate it in the space below :</p>
<textarea name="current_medication" tabindex="40"
cols="40" rows="10">
</textarea>
</fieldset>
<p>
<input id="button1" type="submit" value="Send" />
<input id="button2" type="reset" />
</p>
</form>

Reply all
Reply to author
Forward
0 new messages