在chrome中的效果如下：
范围选择器
使用type属性为range的input元素，用户只能用它从事先规定的范围内选择一个数值，该类型的input元素支持的属性与number相同。
| <form method="post" action="http://titan:8080/form"> <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">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="price">$ per unit in your area: 1<input type="range" step="1" min="0" max="100" value="1" id="price" name="price"/>100</label></p> <input type="submit" value="Submit Vote"/> </form> |
在chrome中的效果如下：
复选框
type属性为checkbox表示复选框，支持的属性如下：
1）checked：默认是否选择；
2）required：表示用户必须勾选该复选框；
3）value：设定提交给服务端的数据值，默认为on。
| <form method="post" action="http://titan:8080/form"> <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">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="veggie">Are you vegetarian: <input type="checkbox" id="veggie" name="veggie"/>vegetarian</label></p> <input type="submit" value="Submit Vote"/> </form> |
在chrome中的效果如下：
注意使用checkbox时，只有勾选了的复选框在提交表单时才会发送给服务器。
单选按钮组
type属性为radio的input元素可以用来生成一组单选按钮，支持的属性同checkbox。每一个radio都代表一个选项，同一组的radio使用相同的name。单选按钮组适用于选项较少的场景。
