在chrome中的效果如下：
复选框
为列表设置size属性和multiple属性后，就成为一个复选框。
| <form method="post" action="http://titan:8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave"> Favorite Fruit: <select id="fave" name="fave" size="5" multiple> <option valu="apples" selected label="Apples">Apples</option> <option valu="oranges" label="Oranges">Oranges</option> <option valu="cherries" label="Cherries">Cherries</option> <option valu="pears" label="Pears">Pears</option> </select> </label></p> <input type="submit" value="Submit Vote"/> </form> |
在点击选项时按住Ctrl键，就可以选择多个选项。在chrome中效果如下：
带结构的列表
optgroup元素可以用来在select元素的内容中建立一定的结构，该元素支持的属性包括：
1）label：用来为整组选项提供一个小标题；
2）disabled：灰化选择组内的任何选项。
| <form method="post" action="http://titan:8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave"> Favorite Fruit: <select id="fave" name="fave"> <optgroup label="Top Choices"> <option valu="apples" selected label="Apples">Apples</option> <option valu="oranges" label="Oranges">Oranges</option> </optgroup> <optgroup label="Others"> <option valu="cherries" label="Cherries">Cherries</option> <option valu="pears" label="Pears">Pears</option> </optgroup> </select> </label></p> <input type="submit" value="Submit Vote"/> </form> |
