1、form元素
用于生成输入表单,该元素不会生成可视化部分。其可以指定id、style、class等核心属性,还可以指定onclick等事件属性以及action、method、name、target等属性。
其中action和method两个属性为必填属性,前者指定单击表单内的确认按钮时,该表单被提交到哪个地址。
后者指定提交表单时发送何种类型的请求,该属性值可以为get和post属性。这两种区别主要有5种:
(1)get从服务器上获取数据,post是向服务器传送数据
(2)get中的参数数据提交到表单的ACTION中所指的URL中,可以在URL中看到,而post通过HTTP post机制,将表单内的内容放在HTML HEADER内一起传送到ACTION属性所指的ULR地址,用户看不到这个数据
(3)对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
(4)get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
(5)get安全性非常低,post安全性较高。

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_HTML5的form的自动功能是什么


其中actinotallow="#" 表示提交数据到本页,method=“get”,一般建议为post,数据用post传递。原因上面已经阐述。

2、input元素

input元素是表单控件元素中功能最为丰富的,如下几种输入元素都是通过input元素生成的:

(1)单行文本框:input里元素type=“text”

(2)密码输入框:input里元素type=“password”

(3)隐藏域:input里元素type=“hidden”

(4)单选框:input里元素type=“radio”

(5)复选框:input里元素type=“checkbox”

(6)图像域:input里元素type=“image”,并且还可以指定width和height两个属性

(7)文件上传域:input里元素type=“file”

(8)提交、重设、无动作按钮:分别指定input里元素type=“submit”、type=“reset”、type=“button”

除此之外还可以指定id、style、class等核心属性属性以及checked、disabled、readonly等属性,其中checked设置单选框、复选框初始状态是否为选中状态;disabled设置首次加载时禁用此元素;readonly指定该文本框内的值不允许用户修改

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_表单_02


效果截图如下:

HTML5的form的自动功能是什么 html5中form属性_属性值_03


3、lable、button、select、与option元素

(1)lable元素用于在表单元素中定义标签,其不需要生成请求参数,不要为其指定value属性值,与表单控input关联的两种方式:

①隐式使用for关联:

②显示关联:

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_属性值_04


效果截图如下:

HTML5的form的自动功能是什么 html5中form属性_属性值_05

(2)button用于定义一个按钮,type指定该按钮是那种类型

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_文本域_06


效果截图如下:

HTML5的form的自动功能是什么 html5中form属性_表单_07


(3)select元素:

①用于创建列表框和下拉菜单,注意该元素必须与option元素结合使用,每个option元素代表一个列表项或菜单项。可以指定id、style、class核心属性外,仅可以指定onchange事件属性。

②其元素里只能包含两种元素:option(用于定义列表框或菜单项)和optgroup(用于定义列表项或菜单项组)

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_HTML5的form的自动功能是什么_08


效果截图如下:

HTML5的form的自动功能是什么 html5中form属性_属性值_09


4、增强的textarea

该元素用于生成多行文本域,可以指定id、class、style等核心属性外还可以指定onclick等事件属性以及:

①cols:指定文本宽度。属于必填属性

②rows:指定文本高度。属于必填属性

③disabled:指定禁止该文本域

④readonly:指定该文本域只读

⑤maxlength:设定该多行文本域最多可输入字符

⑥wrap:指定多行文本域是否添加换行符

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_属性值_10


效果截图如下:

HTML5的form的自动功能是什么 html5中form属性_HTML5的form的自动功能是什么_11


注意:wrap部分浏览器不支持,可忽略该属性

5、fieldest和legend元素

fieldest元素可用于对表单内表单元素进行分组,可以指定id、class、style等通用属性,还可以指定:

①name:指定该fieldest元素的名称

②form:该元素值必须是一个有效的form元素的id,用于指定fieldest属于的指定表单

③disabled:该属性用于禁止该组表单元素

legend元素为fieldest元素设置标题,放在其里面。

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_表单_12


效果截图如下:

HTML5的form的自动功能是什么 html5中form属性_属性值_13


6、HTML5一些新增加的表单属性

①form:用于定义该表单控件所属的表单,属性值为它所属表单的id,提高灵活性

②formaction:可动态让表单提交到不同的URL

③formxxx:可以指定formenctype:让按钮动态改变enctype属性;

formmethod:让按钮动态地设置表单以及POST或GET方式tijiao

formtarget:让按钮动态改变表单的target属性值

④autofocus:自动获得焦点

⑤placeholder:显示对用户的提示信息,用户开始输入,提示信息自动消失

⑥list:生成隐藏的下拉菜单

⑦autocomplete:设置表单是够支持自动完成功能,其有两个属性,on和off

⑧label的control:主要用于js脚本中访问label元素所关联的表单元素

⑨indeterminate:为true时复选框状态为不确定的。

7、HTML5新增的一些表单元素

①input中的type,进一步丰富了其属性的类型

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_HTML5的form的自动功能是什么_14


效果截图如下:

HTML5的form的自动功能是什么 html5中form属性_表单_15


HTML5的form的自动功能是什么 html5中form属性_文本域_16


②metar和progress:前者表示最大值和最小值的计数仪表,后者表示一个进度条

代码截图如下:

HTML5的form的自动功能是什么 html5中form属性_属性值_17


效果截图如下:

HTML5的form的自动功能是什么 html5中form属性_文本域_18


③校验属性:require:改属性指定表单控件必须填写

patten:该属性的值必须是一个合法的正则表达式

min、max、step:只对数值类型、日期类型的input有效

8、小结

要加强对这些标签的记忆以及运用,熟能生巧。同时也该注意部分新增属性和元素有些浏览器是并不支持的,一定要善于区分,灵活运用