七、表单的应用:

(一)表单属性:

设置表单属性可以实现提交方式、自动完成、表单验证等不同功能

HTML5表单风格 html5表单的应用_HTML5表单风格

1、action属性:用于指定接受并处理表单数据的服务器程序url地址

2、method属性:用于设置表单数据提交方式,可以取值为get或post。

get:为默认属性,浏览器会与表单服务器建立连接,然后直接在一个传输步骤中发送所有表单数据。然后再地址栏中显示提交的数据。特点:保密性差、有数据量的限制。

post:建立连接后采用分段传输的方式将数据发送到服务器,地址栏中不显示提交的数据。特点:保密性好、无数据量限制、可以大量提交数据

3、name属性:用于指定表单名称,以区分同一个页面的多个表单

4、autocomplete属性:指定表单是否有自动完成功能。(是否记录上一次输入的数据),这个属性不仅可以用于form元素还可以用于input元素。

on:表单有自动完成功能

off::表单没有自动完成功能

HTML5表单风格 html5表单的应用_学习_02

5、novalidate属性:指定再提交表单时取消对表单进行有效检查(验证)

HTML5表单风格 html5表单的应用_HTML5表单风格_03

(二)input元素及属性:

<input />是常用于单行文本框、单选按钮、复选框等

HTML5表单风格 html5表单的应用_学习_04

HTML5表单风格 html5表单的应用_HTML5表单风格_05

HTML5表单风格 html5表单的应用_学习_06

(三)其他表单元素:

1、textarae元素——用于大量输入,弥补input中text只能单行文本输入

name:控件名称

readonly:该控件内容为只读

disable:第一次加载页面时禁用该控件

2、select元素——通常用于制定下拉菜单效果

size:指定下拉菜单的可见选项数

multiple:具有多项选择功能

HTML5表单风格 html5表单的应用_HTML5表单风格_07

3、datalist元素——定义输入框的选项列表

HTML5表单风格 html5表单的应用_HTML5表单风格_08

4、keygen元素——用于表单密钥生成器,使用户验证更为安全、可靠

autofocus:在页面加载时获得焦点

challenge:设置为在提交时间问

disabled:禁用

form:定义所属的一个或多个表单

keytype:rsa生成RSA密钥

name:唯一名称

(四)CSS控制表单样式:

(和CSS相结合)