《HYLI5教程课件》-《HYLI5教程课件》-第八章 网页表单应用

2021网页表单的应用01

表单目录CONTENT02CSS设置表单样式

表单018.1.1表单属性1、action属性

action属性用于接收处理表单数据提交的服务器程序URL地址，将信息传递给服务器进行解析，基本格式语法如下:<formaction="demo.php">

当提交表单时,表单数据会传送到名为"demo.php”的页面进行解析处理。action的属性值可以是相对路径、绝对路径或接收数据的E-mail邮箱地址。例如：<formaction="mailto:xxgcxy@">当表单提交的时候,表单数据则会以电子邮件的形式传递出去。2、method属性

method属性用于设置表单数据的提交方式,属性值为get或post。在HTML5中,可以通过form标记的method属性指明表单处理服务器处理数据的方法,代码如下。<formaction="form_action.asp"method="get">

method属性的默认值为get,此时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据。

当属性值为post时浏览器将会按照下面两步来发送数据。首先浏览器将与action属性中指定的表单处理服务器建立联系,然后浏览器将数据按分段传输的方法发送给服务器。此外采用get属性值提交的数据将显示在浏览器的地址栏中,保密性差,且有数据量的限制。而post属性值的保密性好,并且无数据量的限制,因此使用method="post"可以大量的提交数据。3、name属性name属性指定了表单的名称,以便区分同一个页面中的多个表单。4、autocomplete属性autocomplete属性用于指定表单提供自动完成功能。所谓“自动完成”是指将表单控件之前输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一个下拉列表里,以便通过选择达到快速完成输入的目的。autocomplete有两个属性值,其功能如下。●on:表单有自动完成功能。●off:表单无自动完成功能。我们通过实例来演示一下autocomplete属性的使用，如例所示。5、novalidate

属性novalidate属性用于指定在提交表单时取消对表单进行有效检查。当表单设置该属性时,可以关闭整个表单的验证,这样可以使<form>内的所有表单控件不被验证。下面我们通过实例来演示一下novalidate属性的使用,如例所示8.1.2<input>标记属性属性值功能描述typetext单行文本输入框

password密码输入框

radio单选按钮

checkbox复选框

button普通按钮

submit提交按钮

reset重置按钮

image图像形式的提交按钮

hidden隐藏域

file文件域

emailEmail地址的输入域

URLURL地址的输入域

number数值的输入域

range一定范围内数字值的输入域

Datepickers(date,month,week,time,datetime,datetime-local)日期和时间的输入类型search搜索域color颜色输入类型tel电话号码输入类型name由用户自定义控件的名称value由用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompleteon/off设定是否自动完成表单字段内容autofocusautofocus指定页面加载后是否自动获取焦点formform元素的id设定字段隶属于哪一个或多个表单listdatalist元素的id指定字段的候选数据值列表multiplemultiple指定输入框是否可以选择多个值min、max、step数值规定输入框所允许的最大值、最小值、间隔pattern字符串验证输入的内容是否与定义的正则表达式匹配placeholder字符串为input类型的输入框提供一种提示requiredrequired规定输入框填写的内容不能为空1、input元素的type属性在HTML5中,input元素的type属性有多个属性值,用于定义不同的控件类型。下面我们对input的各个控件进行说明。(1)单行文本输入框<inputtype="text"/>单行文本输入框常用来输入简短的信息,如用户名、账号、证件号码等,常用的属性有name、value、maxlength等。(2)密码输入框<inputtype="password"/>密码输入框用来输入密码,默认内容将以圆点的形式显示。(3)单选按钮<inputtype="radio"/>单选按钮用于单项选择,如选择性别、是否操作等。需要注意的是,在定义单选按钮时，必须为同一组中的其它选项指定相同的name值,这样“单选”才会生效。此外可以对单选按钮应用checked属性,指定默认选中项。(4)复选框<inputtype="checkbox"/>复选框常用于多项选择,如选择兴趣、爱好等,也可对其应用checked属性,指定默认选中项。(5)普通按钮<inputtype="button"/>普通按钮常常配合JavaScript脚本语言使用,使得页面具有更好的交互性。(6)提交按钮<inputtype="submit"/>提交按钮是表单中的核心控件,用户完成信息的输入后,一般都需要单击提8.1.3<input>标记的属性交按钮才能完成表单数据的提交。可以通过修改value属性的属性值来改变提交按钮上的默认文本。(7)重置按钮<inputtype="reset"/>当用户输入的信息有误时,可单击重置按钮取消已输入的所有表单信息。可以通过修改value属性的属性值来改变重置按钮上的默认文本。(8)图像形式的提交按钮<inputtype="image"/>

图像形式的提交按钮与普通的提交按钮在功能上基本相同,只是它用图像替代了默认的按钮,外观上更加美观。但是必须要设定src属性指定图像的URL地址。(9)隐藏域<inputtype="hidden"/>隐藏域对于用户是不可见的,通常用于后台的程序。(10)文件域<inputtype="file"/>当定义文件域时,页面中将出现一个文本框和一个“浏览…”按钮,用户可以通过填写文件路径或直接选择文件的方式,将文件提交给后台服务器。下面我们通过实例来演示一下这些控件和属性的使用,如例所示。(11)email类型<inputtype="email"/>email类型的input元素是一种专门用于输入E-mail地址的文本输入框,用来验证email输入框的内容是否符合E-mail邮件地址格式,如果不符合将提示相应的提示信息。(12)url类型<inputtype="url"/>url类型的input元素是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本,则会提交数据到服务器,如果输入的值不符合URL地址格式则不允许提交，并且会有提示信息。(13)tel类型<inputtype="tel"/>

tel类型用于提供输入电话号码的文本框,由于电话号码的格式千差万别,很难实现一个通用的格式。因此tel类型通常会和pattern属性配合使用,pattern属性是HTML5中的新属性，用来设定输入数据的格式。(14)search类型<inputtype="search"/>search类型是一种专门用于输入搜索关键词的文本框,它能自动记录一些字符,如站点搜索或者Google搜索。在用户输入内容后,右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容。(15)color类型<inputtype="color"/>color类型用于提供设置颜色的文本框,用于实现一个RGB颜色输入。其基本形式是#RRGGBB,(颜色由红(R)、绿(G)、蓝(B)组成。每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF))，默认值为#000000，通过value属性值的修改可以更改默认颜色。单击color类型文本框，可以快速打开拾色器面板,方便用户可视化的选取一种颜色。下面通过设置input元素的type属性来演示不同类型的文本框的用法。（16）number类型<inputtype="number"/>number类型的input元素用于提供输入数值的文本框。提交表单时会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内,则会出现错误提示。number类型的输入框可以通过设置属性对输入的数字进行限制，具体如下。●value:指定输入框的默认值。●max:指定输入框可以接受的最大的输入值。●min：指定输入框可以接受的最小的输入值。●step:输入域合法的间隔,如果不设置,默认值是1。下面通过一个案例来演示number类型的input元素的用法。(17)range类型<inputtype="range"/>range类型的input元素可以提供一定范围内数值的输入范围,在网页中显示为滑动条。它常用属性与number类型一样,通过min属性和max属性,可以设置最小值与最大值,通过step属性指定每次滑动的步幅。(18)Datepickers类型<inputtype="date,month,week…"/>Datepickers类型是时间日期类型,在HTML5中有多个可供选取日期和时间的输入类型,用于验证输入的日期,具体如表时间和日期类型说明date选取日、月、年month选取月、年week选取周和年time选取时间(小时和分钟)datetime选取时间、日、月、年(UTC时间)datetime-local选取时间、日、月、年(本地时间)2、input元素的其他属性除了type属性之外<input>标记还可以定义很多其他的属性,从而实现不同的功能,具体如表8-1所示。其中的某些属性在前面已经介绍并使用过了,如name,value和autocomplete属性等，下面介绍input元素的其他几种常用属性,具体如下。(1)autofocus属性在HTML5中autofocus属性用于指定页面加载后是否自动获取焦点。例如在访同Google主页时，页面中的文字输入框会自动获得光标焦点,以便快速输入关键词。下面通下例来演示autofocus属性的使用。(2)form属性在HTML5之前,如果用户要提交一个表单,必须把相关的控件元素都放在表单内部,即<form>和</form>标签之间。在提交表单时,会将页面中不是表单子元素的控件直接忽略掉。而HTML5中的form属性,可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可，此外form属性还允许一个表单控件从属于多个表单，这样可以大大的提高代码利用率。下面通过一个案例来演示form属性的使用。(3)list属性在上面的内容中我们已经学习了如何通过

datalist元素实现数据列表的下拉效果。而list属性用于指定输入框所绑定的datalist元素,其值是某个datalist元素id。下面通过例来进一步学习list属性的使用。(4)multiple属性multiple属性指定输入框可以选择多个值,该属性适用于email和file类型的input元素。multiple属性用于email类型的input元素时,表示可以向文本框中输入多E-mail地址,多个地址之间通过逗号隔开,multiple属性用于file类型的input元素时,表示可以选择多个文件。下面通过案例8-11来演示multiple属性的使用。(5)min、max和step属性HTML5中的min、max和step属性可以为包含数字或日期的input输入类型规定限值，也就是给这些类型的输入框加一个数值的约束,适用于date、pickers、number和range标签。具体属性说明如下。●max:规定输入框所允许的最大输入值。●min:规定输入框所允许的最小输入值。●step:为输入框规定合法的数字间隔,如果不设置,默认值是1。这与我们前面讲解input元素的number类型时的min、max和step属性类似，就不再举例说明。(6)pattern属性pattern属性用于验证input类型输入框中,用户输入的内容是否与所定义的正则表达式相匹配。pattern属性适用于的类型是:text、search、url、tel、email和password的<input>标记。下面通过案例来了解pattern属性及其常用的正则表达式(7)placeholder属性placeholder属性用于为input类型的输入框提供相关提示信息,以描述输入框允许用户输入何种内容。在输入框为空时显式出现,而当输入框获得焦点时则会消失。下面通过一个案例来演示

placeholder属性的使用(8)required属性HTML5中的输入类型,不会自动判断用户是否在输入框中输入了内容,如果开发者要求输入框中的内容是必填项,那么需要为input元素指定required属性。required属性规定了输入框填写的内容不能为空,否则不允许用户提交表单。下面通过案例来演示required属性的使用。8.1.4其他表元素（1）textarea元素当定义input控件的type属性值为text时,可以创建一个单行文本输入框。但如果需要输入大量的信息,单行文本输入框就不适用了,为此HTML语言提供了<textarea></textarea>标记。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下。<textareacols="每行中的字符数"rows="显示的行数">文本内容</textarea>在上面的语法格式中,cols和rows为<textarea>标记的必须属性,其中cols用来定义多行文本输入框每行中的字符数,rows用来定义多行文本输入框显示的行数,它们的取值均为正整数。textarea元素除了cols和rows属性外,还拥有几个可选属性,分别为disabled、name和readonly属性属性值描述name由用户自定义控件的名称readonlyreadonly该控件内容为只读(不能编辑修改)disableddisabled第一次加载页面时禁用该控件(显示为灰色)（2）select元素浏览网页时,常会看到包含多个选项的下拉菜单,如图所示即为一个下拉菜单,当单击下拉符号时,会出现一个选择列表，如图所示可以选择需要的城市名，要想制作这种下拉菜单效果,就需要使用到select元素。<select><option>选项1</option><option>选项2</option><option>选项3</option></select>在上面的语法中,<select></select>标记用于在表单中添加一个下拉菜单,<option></option>标记嵌套在<select></select>标记中,用于定义下拉菜单中的具体选项,<select></select>中至少包含一对<option></option>。标记名常用属性描述<select>size指定下拉菜单的可见选项数(取值为正整数)multiple定义multiple="multiple"时,下拉菜单将具有多项选择的功能,方法为同时按住Ctrl键进行多选<option>selectedselected定义selected="selected"时,当前项即为默认选中项<select></select>标记中,一对<select></select>中通常包含多对<optgroup></optgroup>。在<optgroup>与</optgroup>之间的<option></option>标记是定义具体选项。需要注意的是,<optgroup>标记有一个必须属性label,用于定义分组的组名。（3）datalist元素datalist元素用于定义输入框的选项列表,列表通过datalist内的option元素进行创建。如果用户不希望从列表中选择某项,也可以自行输入其他内容。datalist元素通常与input元素配合使用来定义input的取值。在使用<datalist>标记时,需要通过id属性为其指定一个唯一的标识,然后为input元素指定list属性,将该属性值设置为option元素对应的id属性值即可。（4）keygen元素keygen元素用于表单的密钥生成器,能够使用户验证更为安全、可靠。当提交表单时会生成两个键:一个是私钥,它存储在客户端;另一个是公钥,它被发送到服务器,验证用户的客户端证书。如果新的浏览器能够对keygen元素的支持度再增强一些,则有望使其成为一种有用的安全标准。属性说明autofocus使keygen字段在页面加载时获得焦点challenge如果使用,则将keygen的值设置为在提交时询问disabled禁用keytag字段form定义该keygen字段所属的一个或多个表单keytype定义keytype。rsa生成RSA密钥name定义keygen元素的唯一名称。name属性用于在提交表单时搜集字段的值（5）output元素output元素用于不同类型的输出,可以在浏览器中显示计算结果或脚本输出。其常用属性有3个,属性说明for定义输出域相关的一个或多个元素form定义输入字段所属的一个或多个表单name定义对象的唯一名称【小贴士】（1）<form>标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义,就必须在<form>与</form>之间添加相应的表单控件。（2）不同的浏览器对url类型的输入框的要求有所不同,在多数浏览器中,要求用户必须输入完整的URL地址,并且允许地址前有空格的存在。（3）form属性适用于所有的input输入类型。在使用时只需引用所属表单的id即可。（4）placeholder属性适用于type属性值为text、search、url、tel、email及password的<input/>标记。（5）各浏览器对cols和rows属性的理解不同,当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异所以在实际工作中,更常用的方法是使用CSS的width和height属性来定义多行文本输入框的宽高。CSS设置表单样式02

CSS3的功能强大，利用样式表可以重新定义各种表单元素的外观，比如字体样式、背景颜色和图像样式、边框样式等。我们可以通过CSS3可以快速修改表单元素的样式，例如下面的代码：form{

border:#fff4pxsolid;/*设置边框*/

margin:0px0px15px10px;/*设置外边距*/

padding:10px;/*设置内边框*/

float:left;/*设置是否浮动*/

font-size:2em;/*设置文本的字体尺寸*/

line-height:1.5em;/*设置行高*/

height:40px;/*设置元素高度*/

text-align:left;/*设置文本的水平对齐方式*/ }.blue{

background-color:#7598FB;/*设置元素的背景颜色*/

color:#000000;/*设置文本的颜色*/}【小贴士】(1)由于form是块元素,重置浏览器的默认样式时,需要清除其内边距padding和外边距margin,如上面CSS样式代码中的第3行代码所示。(2)input控件默认有边框效果,当使用<input>标记定义各种按钮时,通常需要清除其边框,如上面CSS样式代码中的第3行代码所示。(3)通常情况下需要对文本框和密码框设置2~3像素的内边距,以使用户输入的内容不会紧贴输入框,如上面CSS样式代码中的第26行代码所示。标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）点击输入标题内容此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设点击输入标题内容标题内容请替换文字内容，点击添加相关标题文字0390%80%70%95%标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）点击输入标题内容此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设点击输入标题内容标题内容请替换文字内容，点击添加相关标题文字041234此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）点击输入标题内容关键词关键词关键词标题文本预设此部分内容作为文字排版占位显示，

建议使用主题字体，以保持全文档文本格式的统一

此部分内容作为文字排版占位显示，

建议使用主题字体，以保持全文档文本格式的统一

点击输入标题内容此部分内容作为文字排版占位显示（建议使用主题字体）此部分