form 表单
首先,讨论“控件”(下面很多都是新控件,如果浏览器不支持,它将会显示文本框)
1.文本框
2.复选框
3.下拉菜单
4.文件选择器
5.按钮(submit按钮、reset按钮、push按钮)
6.隐藏按钮
大多数控件用input元素创建,在元素里用type特性定义创建的类型控件
如:
<form>
<input type="button(可单击的按钮)/ checkbox(复选框)/ color(颜色选择器)/ date(日期选择器)/ datetime(日期和时间选择器)/ datetime-local(仅用于本地时间的日期和时间选择器)/ email(电子邮件文段)/ file(文件选择器)/ hidden(隐藏字段)/ image(可单击的图片)/ month(月份和年份选择器) / number(数值输入框)/ password(密码框)/ radio(单选按钮)/ range(带有滑块的数值输入框)/ reset(复位按钮)/ search(搜索框)/ submit(提交按钮)/ tel(电话号码输入框)/ text(单行文本框)/ time(时间选择器)/ url(URL框)/ week(星期和年份选择器)">
</form>
搜索框
<input type="search" name="search" placeholder="Enter search terms here" size="50">
支持搜索框的浏览器把搜索框呈现为圆角效果,以区别普通文本框
多行文本框
<textarea name="comments" ></textarea>
定义文本框的大小,可使用cols 和rows
radio单选按钮
对于单选按钮,name和value特性十分重要,只有正确处理这两个特性,单选按钮才能正确发挥作用,如果想要在一组选择按钮中选择一个,每个按钮的name特性必须一样,当然也可以直接在input标记里添加checked特性,此处标记已经选择,你也可以选择其它
时间
<form> what is your birthdays?<br/> <input type="data" ><br /><br /> when would you like your serive to begin <br /> <input type="daytime" ><br /><br /> please specify the date and time of the meeting :><br/> <input type="datetime-local" ><br /><br /> please specify which month you would like to volunteer in the nursery:<br/> <input type="week" ><br /><br /> please specify your desired appointment time :<br /> <input type="time" ><br /> </form>
当前很少的一些浏览器支持所有这些控件,但是这些控件可以“优雅” 的退化,我们依然可以在文本框输入月份或日期或时间。
其它数值输入控件
<input type="number" min="0" max="12" step="2" value="8"> <input type="range" min="0" max="12" step="1" value="5" >
联系方式
<input name="email" type="email"> <input name="website" type="url"> <input name="phont" type="tel">
选择/下拉菜单
<form> <select name="FavoriteColor" size="3"> <option value ="blue" >blue </option> <option value="red" >red</option> <option value="yellow" >yellow</option> <option value="green" >green</option> <option value="other" >other</option> </select> </form>
注:用户可以从列表中选择一个选项,如果想要一次选择多个选项,可在开始标记<select>中添加multiple特性,例如:
<select name="FavoriteColor" size="3" multiple>
子菜单(已经在前面有提及过)
按钮(按钮和表单交互使用)
submit/reset/button(单击这个按钮将会触发一个行为或一个事件,执行之前定义的一个脚本或者函数)
<input type="submit " value="submit">
或者
<button type="submit" value="submit">