表单表单样式

单元一Web开发概述理解表单的构成,可以快速创建表单;掌握表单相关标记,能够创建具有相应功能的表单控件;掌握表单样式的控制,能够美化表单界面教学目标任务1:表单标记了解表单能够创建表单掌握表单的属性在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成,如下图所示,即为一个简单的HTML表单界面及其构成.
表单控件(包含单行文本输入框、密码输入框、提交按钮等)提示信息表单域(容纳表单控件和提示信息)表单的构成对于表单构成中的表单控件、提示信息和表单域,初学者可能比较难理解,对它们的具体解释如下:表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等.
提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作.

表单域:它相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法.
如果不定义表单域,表单中的数据就无法传送到后台服务器.
表单的构成通过认识表单,我们知道要想让表单中的数据传送给后台服务器,就必须定义表单域.
在HTML中,标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,中的所有内容都会被提交给服务器.
创建表单的基本语法格式如下:各种表单控件创建表单action属性在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址.
例如:表示当提交表单时,表单数据会传送到名为"form_action.
asp"的页面去处理.
action的属性值可以是相对路径或绝对路径,还可以为接收数据的E-mail邮箱地址.
例如:表示当提交表单时,表单数据会以电子邮件的形式传递出去.
表单属性method属性method属性用于设置表单数据的提交方式,其取值为get或post.
在HTML5中,可以通过form标记的method属性指明表单服务器处理数据的方法,示例代码如下:在上面的代码中,get为method属性的默认值,采用get方法,提交的数据将显示在浏览器的地址栏中,保密性差,且有数据量的限制.
而post方式的保密性好,并且无数据量的限制,所以使用method="post"可以大量的提交数据.
表单属性name属性name属性用于指定表单的名称,以区分同一个页面中的多个表单.
表单属性autocomplete属性autocomplete属性用于指定表单是否有自动完成功能,所谓"自动完成"是指将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一个下拉列表里,以实现自动完成输入.

autocomplete属性有2个值,对它们的解释如下:on:表单有自动完成功能off:表单无自动完成功能novalidate属性novalidate属性指定在提交表单时取消对表单进行有效的检查.
为表单设置该属性时,可以关闭整个表单的验证,这样可以使form内的所有表单控件不被验证.
注意:标记的属性并不会直接影响表单的显示效果.
要想让一个表单有意义,就必须在与之间添加相应的表单控件.
表单属性任务2:输入标记了解输入标记的各种属性掌握各种属性的用法.
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等,要想定义这些元素就需要使用input控件,其基本语法格式如下:Input元素的type属性(1)单行文本输入框单行文本输入框常用来输入简短的信息,如用户名、账号、证件号码等,常用的属性有name、value、maxlength.
(2)密码输入框密码输入框用来输入密码,其内容将以圆点的形式显示.
(3)单选按钮单选按钮用于单项选择,在定义单选按钮时,必须为同一组中的选项指定相同的name值,这样"单选"才会生效.
(4)复选框复选框常用于多项选择,如选择兴趣、爱好等,可对其应用checked属性,指定默认选中项.

Input元素的type属性(5)普通按钮普通按钮常常配合javaScript脚本语言使用,初学者了解即可.
(6)提交按钮提交按钮是表单中的核心控件,用户完成信息的输入后,一般都需要单击提交按钮才能完成表单数据的提交.
可以对其应用value属性,改变提交按钮上的默认文本.
(7)重置按钮当用户输入的信息有误时,可单击重置按钮取消已输入的所有表单信息.
可以对其应用value属性,改变重置按钮上的默认文本.
Input元素的type属性(8)图像形式的提交按钮图像形式的提交按钮用图像替代了默认的按钮,外观上更加美观.
需要注意的是,必须为其定义src属性指定图像的url地址.
(9)隐藏域隐藏域对于用户是不可见的,通常用于后台的程序,初学者了解即可.
(10)文件域当定义文件域时,页面中将出现一个文本框和一个"浏览.
.
.
"按钮,用户可以通过填写文件路径或直接选择文件的方式,将文件提交给后台服务器.
Input元素的type属性单行文本输入框text密码输入框password单选按钮radio复选框checkbox文件域file提交按钮重置按钮普通按钮图像域image(11)email类型email类型的input元素是一种专门用于输入E-mail地址的文本输入框,用来验证email输入框的内容是否符合Email邮件地址格式;如果不符合,将提示相应的错误信息.
(12)url类型url类型的input元素是一种用于输入URL地址的文本框.
如果所输入的内容是URL地址格式的文本,则会提交数据到服务器;如果输入的值不符合URL地址格式,则不允许提交,并且会有提示信息.

(13)tel类型tel类型用于提供输入电话号码的文本框,由于电话号码的格式千差万别,很难实现一个通用的格式.
因此,tel类型通常会和pattern属性配合使用.

(14)search类型search类型是一种专门用于输入搜索关键词的文本框,它能自动记录一些字符,例如站点搜索或者Google搜索.
在用户输入内容后,其右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容.

Input元素的type属性(15)color类型color类型用于提供设置颜色的文本框,实现一个RGB颜色输入.
其基本形式是#RRGGBB,默认值为#000000,通过value属性值可以更改默认颜色.
单击color类型文本框,可以快速打开拾色器面板,方便用户可视化选取一种颜色.
(16)number类型number类型的input元素用于提供输入数值的文本框.
在提交表单时,会自动检查该输入框中的内容是否为数字.
如果输入的内容不是数字或者数字不在限定范围内,则会出现错误提示.

number类型的输入框可以对输入的数字进行限制,规定允许的最大值和最小值、合法的数字间隔或默认值等.
具体属性说明如下:value:指定输入框的默认值.
max:指定输入框可以接受的最大的输入值.
min:指定输入框可以接受的最小的输入值.
step:输入域合法的间隔,如果不设置,默认值是1.
Input元素的type属性(17)range类型range类型的input元素用于提供一定范围内数值的输入范围,在网页中显示为滑动条.
它的常用属性与number类型一样,通过min属性和max属性,可以设置最小值与最大值,通过step属性指定每次滑动的步幅.

(18)Datepickers类型Datepickers类型是指时间日期类型,HTML5中提供了多个可供选取日期和时间的输入类型,用于验证输入的日期,具体如下表所示.
时间和日期类型说明date选取日、月、年month选取月、年week选取周和年time选取时间(小时和分钟)datetime选取时间、日、月、年(UTC时间)datetime-local选取时间、日、月、年(本地时间)Input元素的type属性除了type属性之外,标记还可以定义很多其他的属性,以实现不同的功能.

(1)autofocus属性在HTML5中,autofocus属性用于指定页面加载后是否自动获取焦点,将标记的属性值指定为true时,表示页面加载完毕后会自动获取该焦点.
(2)form属性在HTML5之前,如果用户要提交一个表单,必须把相关的控件元素都放在表单内部,即和标签之间.
在提交表单时,会将页面中不是表单子元素的控件直接忽略掉.

Input元素的其他属性(3)list属性通过datalist元素实现数据列表的下拉效果.
而list属性用于指定输入框所绑定的datalist元素,其值是某个datalist元素的id.
(4)multiple属性multiple属性指定输入框可以选择多个值,该属性适用于email和file类型的input元素.
multiple属性用于email类型的input元素时,表示可以向文本框中输入多个E-mail地址,多个地址之间通过逗号隔开;multiple属性用于file类型的input元素时,表示可以选择多个文件.
Input元素的其他属性(5)min、max和step属性HTML5中的min、max和step属性用于为包含数字或日期的input输入类型规定限值,也就是给这些类型的输入框加一个数值的约束,适用于date、pickers、number和range标签.
具体属性说明如下:max:规定输入框所允许的最大输入值.
min:规定输入框所允许的最小输入值.
step:为输入框规定合法的数字间隔,如果不设置,默认值是1.
Input元素的其他属性(6)pattern属性pattern属性用于验证input类型输入框中,用户输入的内容是否与所定义的正则表达式相匹配.
pattern属性适用于的类型是:text、search、url、tel、email和password的标记.
常用的正则表达式如下表所示.
Input元素的其他属性正则表达式说明^[0-9]*$数字^d{n}$n位的数字^d{n,}$至少n位的数字^d{m,n}$m-n位的数字^(0|[1-9][0-9]*)$零和非零开头的数字^([1-9][0-9]*)+(.
[0-9]{1,2})$非零开头的最多带两位小数的数字d+(.
d+)$正数、负数、和小数^d+$或^[1-9]d*|0$非负整数^-[1-9]d*|0$或^((-d+)|(0+))$非正整数^[u4e00-u9fa5]{0,}$汉字^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$英文和数字^[A-Za-z]+$由26个英文字母组成的字符串^[A-Za-z0-9]+$由数字和26个英文字母组成的字符串^w+$或^w{3,20}$由数字、26个英文字母或者下划线组成的字符串^[u4E00-u9FA5A-Za-z0-9_]+$中文、英文、数字包括下划线^w+([-+.
]w+)*@w+([-.
]w+)*.
w+([-.
]w+)*$Email地址[a-zA-z]+://[^s]*或^http://([w-w-]+(/[w-URL地址^d{15}|d{18}$身份证号(15位、18位数字)^([0-9]){7,18}(x|X)$或^d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}$以数字、字母x结尾的短身份证号码^[a-zA-Z][a-zA-Z0-9_]{4,15}$帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线)^[a-zA-Z]w{5,17}$密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)(7)placeholder属性placeholder属性用于为input类型的输入框提供相关提示信息,以描述输入框期待用户输入何种内容.

在输入框为空时显式出现,而当输入框获得焦点时则会消失.
(8)required属性HTML5中的输入类型,不会自动判断用户是否在输入框中输入了内容,如果开发者要求输入框中的内容是必须填写的,那么需要为input元素指定required属性.
required属性用于规定输入框填写的内容不能为空,否则不允许用户提交表单.
Input元素的其他属性任务3:文本域标记了解文本域标记掌握文本域标记的使用方法.
当定义input控件的type属性值为text时,可以创建一个单行文本输入框.
但是,如果需要输入大量的信息,单行文本输入框就不再适用,为此HTML语言提供了标记.
通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:文本内容textarea元素元素除了cols和rows属性外,还拥有几个可选属性,分别为disabled、name和readonly,详见下表所示.
属性属性值描述name由用户自定义控件的名称readonlyreadonly该控件内容为只读(不能编辑修改)disableddisabled第一次加载页面时禁用该控件(显示为灰色)textarea元素任务4:列表菜单标记了解列表菜单标记掌握列表菜单标记的属性及其使用方法.
浏览网页时,经常会看到包含多个选项的下拉菜单,例如选择所在的城市、出生年月、兴趣爱好等.
如图左所示即为一个下拉菜单,当点击下拉三角时,会出现一个选择列表,如图右所示.

(左)(右)select元素使用select控件定义下拉菜单的基本语法格式如下:在上面的语法中,标记用于在表单中添加一个下拉菜单,标记嵌套在标记中,用于定义下拉菜单中的具体选项,每对中至少应包含一对.
选项1选项2选项3.
.
.
select元素在HTML中,可以为和标记定义属性,以改变下拉菜单的外观显示效果,具体如下表所示.
标记名常用属性描述size指定下拉菜单的可见选项数(取值为正整数).
multiple定义multiple="multiple"时,下拉菜单将具有多项选择的功能,方法为按住Ctrl键的同时选择多项.
selected定义selected="selected"时,当前项即为默认选中项.
select元素上面我们实现了不同的下拉菜单效果,但是,在实际网页制作过程中,有时候需要对下拉菜单中的选项进行分组,这样当存在很多选项时,要想找到相应的选项就会更加容易.
如下图所示即为选项分组后的下拉菜单中选项的展示效果.
select元素datalist元素用于定义输入框的选项列表,列表通过datalist内的option元素进行创建.
如果用户不希望从列表中选择某项,也可以自行输入其他内容.
datalist元素通常与input元素配合使用,来定义input的取值.

在使用标记时,需要通过id属性为其指定一个唯一的标识,然后为input元素指定list属性,将该属性值设置为option元素对应的id属性值即可.
datalist元素keygen元素用于表单的密钥生成器,能够使用户验证更为安全、可靠.
当提交表单时会生成两个键:一个是私钥,它存储在客户端;一个是公钥,它被发送到服务器,验证用户的客户端证书.
如果新的浏览器能够对keygen元素的支持度再增强一些,则有望使其成为一种有用的安全标准.