表单
表单用于搜集不同类型的用户输入。HTML5 Input,拥有多个新的表单输入类型,提供了更好的输入控制和验证。
Input类型
HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
1.Input 类型- email
email 类型用于应该包含e-mail 地址的输入域。在提交表单时,会自动验证email 域的值。
2.Input 类型- url
url 类型用于应该包含URL 地址的输入域。在提交表单时,会自动验证url 域的值。
3.Input 类型- number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定:
4.Input 类型- range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定:
5.Input 类型- Date Pickers(数据检出器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
6.Input 类型- search
search 类型用于搜索域,比如站点搜索或Google 搜索。
search 域显示为常规的文本域。[2]
输入
多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
文本域
当用户要在表单中键入字母、数字等内容时,就会用到 (text fields)。
1 2 3 4 | < form > First name: < input type = "text" name = "firstname" />< br /> Last name: < input type = "text" name = "lastname" /> </ form > |
浏览器显示如下:
注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个 。[1]
单选按钮
当用户从若干给定的的选择中选取其一时,就会用到 (radio buttons)。
1 2 3 4 | < form > < input type = "radio" name = "sex" value = "male" > Male < input type = "radio" name = "sex" value = "female" > Female </ form > |
浏览器显示如下:
1 2 | Male Female |
注意,只能从中选取其一。[1]
如图:
复选框
当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框(checkboxes)。
1 2 3 4 5 | < form > < input type = "checkbox" name = "bike" />I have a bike < br /> < input type = "checkbox" name = "car" />I have a car </ form > |
浏览器显示如下:
1 2 | I have a bike I have a car |
密码字段
密码字段通过标签 <input type="password"> 来定义:[3]
1 2 3 | < form > Password: < input type = "password" name = "pwd" > </ form > |
注意:密码字段字符不会明文显示,而是以星号或圆点替代。
OCTYPE html>表单
元素的使用
1、按钮属性
type=“button”
<button></button>
2、range型和input型
3、checkbox型和input元素
4、用input生成一组固定选项
5、生成选项列表(select)和数据列表(datalist)
区别:button>input button>input submin
分析:
1、原理上来讲:button元素和 type=“button”实际应用还是有区别的,button要比input 按钮的功能多,button元素可以当任何按钮来使用,使用范围更广泛。
2、input button 和 input submit 的区别:submit 用于提交表单,使用范围比 input button要小一点。
3、input button 通常用于和 java script 一起使用并作为绑定事件处理
4、input submit 用于提交表单时,必须生命form里面的method 属性,最好也添加action属性(涉及php知识)
得出结论:
使用范围和功能:button>input button>>input submin
1 2 > 3 4
checkbox型和input元素
<input type="number" min="-100" max="200" value="0">
<input type="checkbox" >记住我 <input type="radio" >选择用input生成一组固定选项
谁最帅
<input type="radio" name="a">浩轩 <input type="radio" name="a">浩轩 <input type="radio" name="a">浩轩生成选项列表(select)和数据列表(datalist)