公司做网站 要准备哪些素材,公司官网的作用,在线购物商城平台,阳朔到桂林高铁HTML5基于Web Forms 2.0标准对HTML4表单进行全面升级#xff0c;在保持简便、易用的基础上#xff0c;新增了很多控件和属性#xff0c;从而减轻了开发人员的负担。表单为访问者提供了与网站进行互动的途径#xff0c;完整的表单一般由控件和脚本两部分组成。
1、认识HTML…HTML5基于Web Forms 2.0标准对HTML4表单进行全面升级在保持简便、易用的基础上新增了很多控件和属性从而减轻了开发人员的负担。表单为访问者提供了与网站进行互动的途径完整的表单一般由控件和脚本两部分组成。
1、认识HTML5表单
HTML5的一个重要特性就是对表单的完善其引入了新的表单元素和属性简单概况如下。
1、HTML5新增输入型表单控件如下
电子邮件框input typeemail。搜索框input typesearch。电话框input typetel。URL框input typeurl。
2、以下控件得到部分浏览器的支持更多信息可以访问链接www.wufoo.com/html5
日期input typedate浏览器支持https://caniuse.com/#featinput-datetime。数字input typenumber浏览器支持https://caniuse.com/#featinput-number。范围input typerange浏览器支持https://caniuse.com/#featinput-range。数据列表
input typetext namefavfruitlistfruit /
datalist idfruitoption备选列表项目1/optionoption备选列表项目2/optionoption备选列表项目3/option/datalist3、以下控件争议较大浏览器对其支持也不统一W3C曾经放弃把它们列入HTML5不过最后还是保留了下来
颜色input typecolor /。全局日期和时间input typedatetime /。局部日期和时间input typedatetime-local /。月input typemonth /。时间input typetime /。周input typeweek /。输出output/output。
4、HTML5新增的表单属性如下
accept限制用户可以上传文件的类型。autocomplete如果对form元素或特定的字段添加autocomplete“off”就会关闭浏览器对该表单或该字段的自动填写功能。默认值为on。autofocus页面加载后将焦点放到该字段。multiple允许输入多个电子邮件地址或者上传多个文件。list将datalist与input联系起来。maxlength指定textarea的最大字符数HTML5之前的文本框就支持该特性。pattern定义一个用户所输入的文本在提交之前必须遵循的模式。placeholder指定一个出现在文本框中的提示文本用户开始输入后该文本消失。required需要访问者在提交表单之前必须完成该字段。formnovalidate关闭HTML5的自动验证功能。应用于提交按钮。novalidate关闭HTML5的自动验证功能。应用于表单元素。
提示有关浏览器支持信息https://caniuse.com/上的信息通常比www.wufoo.com/html5上的更新一些不过后者仍然是有关HTML5表单信息的一个重要资源。Ryan Seddon的H5F(https://github.com/ryanseddon/H5F)可以为旧式浏览器提供模仿HTML5表单行为的JavaScript方案。
2、定义表单
每个表单都以form标签开始以/form标签结束。两个标签之间是各种标签和控件。每个控件都有一个name属性用于在提交表单时标识数据。访问者通过“提交”按钮提交表单触发“提交”按钮时填写的表单数据将被发送给服务器端的处理脚本。
【示例】新建HTML5文档保存为test.html在body内使用form标签设计一个简单的用户登录表单。 form methodpost actionshow-data.php!-- 各种表单元素 --fieldseth2 classhdr-account登录/h2div classfieldsp classrowlabel forfirst-name用户名:/labelinput typetext idfirst-name namefirst_name classfield-large //pp classrowlabel forlast-name昵称:/labelinput typetext idlast-name namelast_name classfield-large //p/div/fieldset!-- 提交按钮 --input typesubmit value提交 classbtn //formform标签包含很多属性其中HTML5支持的属性如下表所示。 提示如果使用methodget方式提交表单表单中的数据会显示在浏览器的地址栏里如果使用methodpost方式提交表单表单中的数据不会显示在浏览器的地址栏里这样比较安全。同时使用post可以向服务器发送更多的数据。如果需要在数据库中保存、添加和删除数据那么就应选择post方式提交数据。
3、组织表单
使用fieldset标签可以组织表单结构为表单对象进行分组这样表单会更容易理解。在默认状态下分组的表单对象外面会显示一个包围框。
使用legend标签可以定义每组的标题描述每个分组的目的有时这些描述还可以使用h1h6标题。默认显示在fieldset包含框的左上角。
对于一组单选按钮或复选框建议使用fieldset把它们包裹起来为其添加一个明确的上下文让表单结构显得更清晰。
【示例】为表单的四个部分分别使用fieldset标签并将公共字段部分的性别单选按钮使用一个嵌套的fieldset包围起来。被嵌套的fieldset添加radios类方便为其添加特定的样式。同时还在其中添加了一个legend元素用于描述单选按钮。 h1表单标题/h1form methodpost actionshow-data.phpfieldseth2 classhdr-account字段分组标题/h2... 用户名字段 .../fieldsetfieldseth2 classhdr-address字段分组标题/h2... 联系地址字段 .../fieldsetfieldseth2 classhdr-public-profile字段分组标题/h2... 公共字段 ...div classrowfieldset classradioslegend性别:/legendinput typeradio idgender-male namegender valuemale /label forgender-male男士/labelinput typeradio idgender-female namegender valuefemale /label forgender-female女士/label/fieldset/div/fieldsetfieldseth2 classhdr-emails电子邮箱/h2... Emails字段 .../fieldsetinput typesubmit value提交表单 classbtn //form使用fieldset元素对表单进行组织是可选的使用legend也是可选的使用legend则必须有fieldset。不过推荐使用fieldset和legend对相关的单选按钮、复选框进行分组。
4、常用表单控件
4.1、文本框
文本框是访问者输入单行字符串的控件常用于提交姓名、地址等信息。每个文本框都是通过带有typetext的input标签定义。除了type之外还有一些其他可用的属性其中最重要的就是name。服务器端的脚本使用name获取访问者在文本框中输入的值或预设的值即value属性值。注意name和value对其他的表单控件也是很重要的具有相同的功能。
HTML5允许使用下面两种形式的定义文本框。 input typetext /input typetext4.2、标签
标签(label)是描述表单字段用途的文本。label元素有一个特殊的属性for。如果for的值与一个表单字段的id的值相同该label就与该字段显式地关联起来。如果访问者与标签进行交互如使用鼠标单击标签与之对应的表单字段就会获得焦点这对提升表单的可用性和可访问性都有帮助。因此建议在label元素中包含for属性。
【示例】使用label标记提示标签提升用户体验。 p classrowlabel forname用户名span classrequired*/span:/labelinput typetext idname namename classfield-large requiredrequired aria-requiredtrue //p也可以将一个表单字段放在一个包含标签文本的label内例如 label用户名input typetext namename //label。在这种情况下就不需要使用for和id了。不过将标签与字段分开是更常见的做法原因之一是这样更容易添加样式。
4.3、密码框
密码框与文本框的唯一区别就是在密码框中输入的文本会使用圆点或星号进行隐藏。密码框的作用是防止其他人看到用户输入的密码。如果要真正地保护密码可以使用安全服务器(https://)。
使用typepassword创建密码框而不要用type“text”例如 p classrowlabel forpassword密码:/labelinput typepassword idpassword namepassword //p当访问者在表单中输入密码时密码会以圆点或星号的形式隐藏起来。但提交表单后访问者输入的真实值会被发送给服务器。信息在发送过程中没有加密。
使用sizen 属性可以定义密码框的大小n表示密码框宽度以字符为单位。如果需要可以使用maxlengthn 设置密码框允许输入的最大字符数。
4.4、单选按钮
为input元素设置typeradio属性可以创建单选按钮。
【示例】设计一个性别选项组。 fieldset classradioslegend姓名/legendp classrowinput typeradio idgender-male namegender valuemale /label forgender-male男士/label/pp classrowinput typeradio idgender-female namegender valuefemale /label forgender-female女士/label/p/fieldset同一组单选按钮的name属性值必须相同这样在同一时间只有其中一个能被选中。value属性也很重要因为对于单选按钮来说访问者无法输入值。
nameradioset用于识别发送至服务器的数据同时用于将多个单选按钮联系在一起以确保同一组中最多只有一个被选中。推荐使用fieldset组织单选按钮组并用legend进行描述。
4.5、复选框
在一组单选按钮中只允许选择一个答案但在一组复选框中可以选择任意数量的答案。为input元素设置typecheckbox属性可以创建复选框。
【示例】演示如何创建复选框。 div classfields checkboxesp classrowinput typecheckbox idemail nameemail[] value电子邮箱 /label foremail电子邮件/label/pp classrowinput typecheckbox idphone nameemail[] value电话 /label forphone电话/label/p/div标签文本不需要与value属性值一致。因为标签文本用于在浏览器中提示复选框而value则是发送到服务器端脚本的数据。
创建.checkboxes类可以方便地为复选框添加样式。使用checked或checkedchecked可以设置复选框在默认情况下处于选中状态。
访问者可以根据需要选择任意数量的复选框每个复选框对应的value值以及复选框组的name名称都会被发送给服务器端脚本。
使用name“email可以识别发送到服务器端的数据。对于组内所有复选框使用同一个name值可以将多个复选框组织在一起。空的方括号是为PHP脚本的name准备的如果使用PHP处理表单使用name” email[]就会自动地创建一个包含复选框值的数组名为$_POST[‘email’]。
4.6、文本区域
如果要设计多行文本框如回答问题、评论反馈等可以使用文本区域。 【示例1】演示如何创建一个反馈框。 label forjianyi建议/labeltextarea idjianyi namejianyi cols40 rows5 classfield-large/textareamaxlengthn设置输入的最大字符数colsn设置文本区域的宽度以字符为单位rowsn设置文本区域的高度以行为单位。
也可以使用CSS更好地控制文本区域的尺寸。如果没有使用maxlength限制文本区域的最大字符数最大可以输入32 700个字符如果输入内容超出文本区域则会自动显示滚动条。
textarea没有value属性在和标签之间包含的文本将作为默认值显示在文本区域中。可以设置placeholder属性定义用于占位的文本。
使用wrap属性可以定义当输入内容大于文本区域宽度时的显示方式
wrap“hard”如果文本区域内的文本自动换行显示则提交文本中会包含换行符。当使用hard时必须设置cols属性。wrap“soft”为默认值提交的文本不会为自动换行位置添加换行符。
【示例2】比较设置wraphard与wrapsoft时提交数据的不同效果如下图所示。
客户端表单 form actiontest.php methodposttextarea nametest maxlength40 rows6 wraphard cols30/textareainput typesubmit value提交//form服务器端脚本 ?phpecho pre.$_POST[test]./pre;?4.7、选择框
选择框为访问者提供一组选项允许从中选择。如果允许单选则呈现为下拉菜单样式如果允许多选则呈现为一个列表框在需要时会自动显示滚动条。
选择框由select和option元素合成。通常在select元素里设置name属性在每个option元素里设置value属性。
【示例1】创建一个简单的城市选择框。 label forstate省市/labelselect idstate namestateoption valueBJ北京/optionoption valueSH上海/option.../select在下拉菜单中默认选中的是第一个选项而在列表框中默认没有选中的项。
使用sizen设置选择框的高度以行为单位。使用multiple或者multiplemultiple允许多选。每个选项的value属性值是选项选中后要发送给服务器的数据如果省略value则包含的文本会被发送给服务器。使用selected或者selectedselected可以指定该选项被默认选中。
使用optgroup标签可以对选择项目进行分组一个optgroup标签包含多个option标签然后使用label属性设置分类标题分类标题是一个不可选的伪标题。
【示例2】使用optgroup元素对下拉菜单项目进行分组。 select name选择城市optgroup label山东省option value潍坊潍坊/optionoption value青岛 selectedselected青岛/option/optgroupoptgroup label山西省option value太原太原/optionoption value榆次榆次/option/optgroup/select4.8、上传文件
为input元素设置typefile属性可以创建文件域用来把本地文件上传到服务器。
【示例】演示如何创建上传控件。 form methodpost actionshow-data.php enctypemultipart/form-datalabel forpicture图片:/labelinput typefile idpicture namepicture /p classinstructions最大700kJPG, GIF 或PNG/p/form使用multiple属性可以允许上传多个文件。
4.9、隐藏字段
隐藏字段用于存储表单中的数据但不会显示给访问者可以视为不可见的文本框。它常用于存储先前表单收集的信息以便将这些信息同当前表单的数据一起提交给服务器脚本进行处理。
【示例】演示如何定义隐藏域。 form methodpost actionyour-script.phpinput typehidden namestep value6 /input typesubmit value提交 //form注意不要将密码、信用卡号等敏感信息放在隐藏字段中。虽然它们不会显示到网页中但访问者可以通过查看HTML源代码看到它。
4.10、提交按钮
提交按钮可以呈现为文本。 input typesubmit value提交表单 classbtn /也可以呈现为图像使用typeimage可以创建图像提交按钮width和height属性为可选。 input typeimage srcbutton-submit.png width188 height95 alt提交表单 /如果激活“提交”按钮可以将表单数据发送给服务器端的脚本。如果不设置name属性则“提交”按钮的value属性值就不会发送给服务器脚本。如果省略value属性那么根据不同的浏览器“提交”按钮会显示默认的“提交”文本。如果有多个“提交”按钮可以为每个按钮设置name属性和value属性从而让脚本知道用户按下的是哪个按钮否则最好省略name属性。
5、HTML5新型输入框
5.1、定义email框
email类型的input元素是一种专门用于输入email地址的文本框在提交表单的时候会自动验证email输入框的值。如果不是一个有效的电子邮件地址则该输入框不允许提交该表单。
【示例】email类型的应用。 form actiondemo_form.php methodget请输入您的email地址input typeemail nameuser_email /br /input typesubmit //form以上代码在Chrome浏览器中的运行结果如下图所示
如果输入了错误的email地址格式单击“提交”按钮时会出现如下图所示的“请在电子邮件地址中包括‘’”的提示。 对于不支持typeemail的浏览器来说将会以typetext来处理所以并不妨碍旧版浏览器浏览采用HTML5中typeemail输入框的网页。
5.2、定义URL框
url类型的input元素提供用于输入url地址的文本框。当提交表单时如果所输入的是url地址格式的字符串则会提交给服务器如果不是则不允许提交。
【示例】url类型的应用。 form actiondemo_form.php methodget请输入网址input typeurl nameuser_url /br/input typesubmit //form以上代码在Chrome浏览器中的运行结果如下图所示。 。如果输入了错误的url地址格式单击“提交”按钮时会出现如下图所示的“请输入网址”的提示。 对于不支持typeurl的浏览器将会以typetext来处理。
5.3、定义数字框
number类型的input元素提供用于输入数值的文本框。用户还可以设定对所接收的数字的限制包括允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内则会提示错误信息。number类型的属性如下表所示。 【示例】number类型的应用。 form actiondemo_form.php methodget请输入数值input typenumber namenumber1 min1 max20 step4input typesubmit //form以上代码在Chrome浏览器中的运行结果如下图所示。 如果输入了不在限定范围之内的数字单击“提交”按钮时会出现如下图所示的提示。
5.4、定义范围框
range类型的input元素提供用于输入包含一定范围内数字值的文本框在网页中显示为滑动条。用户可以设定对所接收的数字的限制包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内则会出现错误提示。
range类型的属性如下表所示。 可以看出range类型的属性与number类型的属性相同。这两种类型的不同在于外观表现上支持range类型的浏览器都会将其显示为滑块的形式而不支持range类型的浏览器则会将其显示为普通的文本框即以typetext来处理。
【示例】range类型的应用。 form actiondemo_form.php methodget请输入数值input typerange namerange1 min1 max30 /input typesubmit //form5.5、定义日期选择器
HTML5提供了多个可用于选取日期和时间的输入类型即6种日期选择器控件可选择的日期格式包括date日期、month月、week星期、time时间、datetime日期时间、dateime-local日期时间时区如下表所示。 提示UTC时间就是0时区的时间而本地时间就是本地时区的时间。例如北京时间为早上8点则UTC时间为0点也就是说UTC时间比北京时间晚8小时。
date类型date类型的日期选择器用于选取日、月、年即选择一个具体的日期。例如2021年1月10日选择后会以2021/01/10的形式显示。
【示例1】date类型的应用。 form actiondemo_form.php methodget请输入日期 input typedate name date1 /input typesubmit //form单击右侧小图标时会显示日期控件用户可以使用日期控件选择具体日期。
month类型month类型的日期选择器用于选取月、年即选择一个具体的月份。例如2021年1月选择后会以“2021年01月”的形式显示。
【示例2】month类型的应用。 form actiondemo_form.php methodget请输入月份 input typemonth name month1 /input typesubmit //formweek类型week类型的日期选择器用于选取周和年即选择一个具体的周。例如2021年1月第1周选择后会以“第01周2021”的形式显示。
【示例3】week类型的应用。 form actiondemo_form.php methodget请选择年份和周数 input typeweek nameweek1 /input typesubmit //formtime类型time类型的日期选择器用于选取时间具体到小时和分钟。例如选择时间后会以00:00的形式显示。
【示例4】time类型的应用。 form actiondemo_form.php methodget请选择或输入时间 input typetime nametime1 /input typesubmit //form除了可以使用控制按钮之外还可以直接输入时间值。如果输入了错误的时间格式并单击“提交”按钮则在Chrome浏览器中会自动更正为最接近的合法值而在IE10浏览器中则以普通的文本框显示。
time类型支持使用一些属性来限定时间的大小范围或合法的时间间隔如下表所示。
【示例5】使用下列代码来限定时间。 form actiondemo_form.php methodget请选择或输入时间input typetime nametime1 step5 value09:00input typesubmit //form可以看到在输入框中出现设置的默认值09:00并且当单击微调按钮时会以5 s为单位递增或递减。当然用户还可以使用min和max属性指定时间的范围。 在date类型、month类型、week类型中也支持使用上述属性值。
datetime类型:datetime类型的日期选择器用于选取时间、日、月、年其中时间为UTC时间。
【示例6】datetime类型的应用。 form actiondemo_form.php methodget请选择或输入时间input typedatetime namedatetime1 /input typesubmit //form注意IE、Edge、Firefox和Chrome最新版本不再支持元素Chrome和Safari部分版本支持Opera 12及更早的版本完全支持。
datetime-local类型datetime-local类型的日期选择器用于选取时间、日、月、年其中时间为本地时间。
【示例7】datetime-local类型的应用。 form actiondemo_form.php methodget请选择或输入时间input typedatetime-local namedatetime-local1 /input typesubmit //form5.6、定义搜索框
search类型的input元素提供用于输入搜索关键词的文本框。从外观上看search类型的input元素与普通的text类型的input元素的区别当输入内容时右侧会出现一个×图标单击即可清除搜索框。
【示例】Search类型的应用示例。 form methodget actionsearch-results.php rolesearchlabel forsearch请输入搜索关键词/labelinput typesearch idsearch namesearch size30 placeholder输入的关键字 /input typesubmit value Go //form搜索框是应用placeholder的最佳控件。同时注意这里的form用的是method“get”而不是method“post”。这是搜索字段的常规做法无论是type“search”还是type“text”。如果在搜索框中输入要搜索的关键词在搜索框右侧就会出现一个×按钮单击该按钮可以清除已经输入的内容。
5.7、定义电话号码框
tel类型的input元素提供专门用于输入电话号码的文本框。它并不限定只输入数字因为很多电话号码还包括其他字符如、-、(、)等例如86-0536-8888888。
【示例】tel类型的应用。 form actiondemo_form.php methodget请输入电话号码input typetel nametel1 /input typesubmit value提交//form从某种程度上说所有的浏览器都支持tel类型的input元素因为它们都会将其作为一个普通的文本框显示。HTML5规则并不需要浏览器执行任何特定的电话号码语法或以任何特别的方式显示电话号码。
5.8、定义拾色器
color类型的input元素提供专门用于选择颜色的文本框。当color类型的文本框获取焦点后会自动调用系统的颜色窗口包括苹果系统也能弹出相应的系统色盘。
【示例】color类型的应用。 form actiondemo_form.php methodget请选择一种颜色input typecolor namecolor1 /input typesubmit value提交//form以上代码在Edge浏览器中的运行结果如图7.28所示。单击颜色文本框会打开“颜色”控件如下图所示。
选择一种颜色之后可以看到颜色文本框显示对应颜色效果如下图所示。
6、HTML5输入属性
6.1、定义自动完成
autocomplete属性可以帮助用户在输入框中实现自动完成输入取值包括on和off用法如下所示。 input typeemail nameemail autocompleteoff /autocomplete属性适用input类型包括text、search、url、telephone、email、password、datepickers、range和color。
autocomplete属性适用于form元素。默认状态下表单的autocomplete属性处于打开状态其包含的输入域会自动继承autocomplete状态也可以为某个输入域单独设置autocomplete状态。 注意在某些浏览器中需要先启用浏览器本身的自动完成功能才能使autocomplete属性起作用。
【示例】设置autocomplete为“on”时可以使用HTML5新增的datalist元素和list属性提供一个数据列表供用户进行选择。下面演示如何应用autocomplete属性、datalist元素和list属性实现自动完成。 h2输入你最喜欢的城市名称/h2form autocompeleteoninput typetext idcity listcityListdatalist idcityList styledisplay:none;option valueBeiJingBeiJing/optionoption valueQingDaoQingDao/optionoption valueQingZhouQingZhou/optionoption valueQingHaiQingHai/option/datalist/form在浏览器中预览当用户将焦点定位到文本框中会自动出现一个城市列表供用户选择如下图所示。而当用户单击页面的其他位置时这个列表就会消失。 当用户输入时该列表会随用户的输入而自动更新。例如当输入字母q时会自动更新列表只列出以q开头的城市名称如下图所示。随着用户不断地输入新的字母下面的列表还会随之变化。 提示多数浏览器都带有辅助用户完成输入的自动完成功能只要开启了该功能浏览器就会自动记录用户所输入的信息当再次输入相同的内容时浏览器就会自动完成内容的输入。从安全性和隐私的角度考虑这个功能存在较大的隐患。如果不希望浏览器自动记录这些信息则可以为form或form中的input元素设置autocomplete属性关闭该功能。
6.2、定义自动获取焦点
autofocus属性可以实现在页面加载时让表单控件自动获得焦点。用法如下所示。 input typetext namefname autofocusautofocus /autocomplete属性适用所有input标签的类型如文本框、复选框、单选按钮、普通按钮等。
注意在同一页面中只能指定一个autofocus对象当页面中的表单控件比较多时建议为最需要聚焦的控件设置autofocus属性值如在页面中搜索文本框或者许可协议的“同意”按钮等。
【示例1】演示如何应用autofocus属性。 formp请仔细阅读许可协议/pplabel fortextarea1/labeltextarea nametextarea1 idtextarea1 cols45 rows5许可协议具体内容....../textarea/ppinput typesubmit value同意 autofocusinput typesubmit value拒绝/p/form页面载入后按“同意”按钮自动获得焦点因为通常会希望用户直接单击该按钮。如果将“拒绝”按钮的autofocus属性的值设置为on则页面载入后焦点就会在“拒绝”按钮上如下图所示但从页面功用的角度来说并不合适。 【示例2】如果浏览器不支持autofocus属性可以使用JavaScript实现相同的功能。在下面的脚本中先检测浏览器是否支持autofocus属性如果不支持则获取指定的表单域为其调用focus()方法强迫其获取焦点。 scriptif (!(autofocus in document.createElement(input))) {document.getElementById(ok).focus();}/script6.3、定义所属表单
form属性可以设置表单控件归属的表单它适用于所有input标签的类型。
提示在HTML4中用户必须把相关的控件放在表单内部即form和/form之间。在提交表单时在form和/form之外的控件将被忽略。
【示例】form属性必须引用所属表单的id如果一个form属性要引用两个或两个以上的表单则需要使用空格将表单的id值分隔开。下面是一个form属性应用。 form action methodget idform1请输入姓名input typetext namename1 autofocus/input typesubmit value提交//form请输入住址input typetext nameaddress1 formform1 /如果填写姓名和住址并单击“提交”按钮则name1和address1会被分别赋值为所填写的值。例如如果在姓名处填写“zhangsan”住址处填写“北京”则单击“提交”按钮后服务器端会接收到“name1zhangsan”和“address1北京”。用户也可以在提交后观察浏览器的地址栏可以看到有“name1张三address1北京”的信息。
6.4、定义表单重写
HTML5新增了5个表单重写属性用于重写标签属性设置简单说明如下。
formaction重写form标签的action属性。formenctype重写form标签的enctype属性。formmethod重写form标签的method属性。formnovalidate重写form标签的novalidate属性。formtarget重写form标签的target属性。
注意表单重写属性仅适用于submit和image类型的input元素。
【示例】通过formaction属性实现将表单提交到不同的服务器页面。 form action1.asp idtestform请输入电子邮件地址input typeemail nameuserid /br /input typesubmit value提交到页面1 formaction1.asp /input typesubmit value提交到页面2 formaction2.asp /input typesubmit value提交到页面3 formaction3.asp //form6.5、定义高和宽
height和width属性仅用于设置input typeimage标签的图像高度和宽度。
【示例】演示height与width属性的应用。 form actiontestform.asp methodget请输入用户名: input typetext nameuser_name /br /input typeimage srcimages/submit.png width72 height26 //form源图像的大小为288px×104px使用以上代码将其大小限制为72px×267px在Chrome浏览器中的运行结果如下图所示。
6.6、定义列表选项
list属性用于设置输入域的datalistdatalist是输入域的选项列表。list属性适用于text、search、url、telephone、email、date pickers、number、range和color类型的input标签。
注意目前最新的主流浏览器都已支持list属性不过呈现形式略有不同。
6.7、定义最小值、最大值和步长
min、max和step属性用于为包含数字或日期的input输入类型设置限值适用于date pickers、number和range类型的input标签。具体说明如下
max属性设置输入框所允许的最大值。min属性设置输入框所允许的最小值。step属性为输入框设置合法的数字间隔步长。例如step“4”则合法值包括-4、0、4等。
【示例】设计一个数字输入框并规定该输入框接收012的值且数字间隔为4。 form actiontestform.asp methodget请输入数值input typenumber namenumber1 min0 max12 step4 /input typesubmit value提交 //form如果单击数字输入框右侧的微调按钮则可以看到数字以4为步进值递增。
6.8、定义多选
multiple属性可以设置输入域一次选择多个值适用于email和file类型的input标签。
【示例】在页面中插入一个文件域使用multiple属性允许用户一次可以提交多个文件。 form actiontestform.asp methodget请选择要上传的多个文件input typefile nameimg multiple /input typesubmit value提交 //form如果单击“添加文件”按钮则会允许在打开的对话框中选择多个文件。选择文件并单击“打开”按钮后会关闭对话框。
6.9、定义匹配模式
pattern属性规定用于验证input域的模式。模式就是JavaScript正则表达式通过自定义的正则表达式匹配用户输入的内容以便进行验证。该属性适用于text、search、url、telephone、email和password类型的input标签。
【示例】使用pattern属性设置文本框必须输入6位数的邮政编码。 form action/testform.asp methodget请输入邮政编码: input typetext namezip_code pattern[0-9]{6}title请输入6位数的邮政编码 /input typesubmit value提交 //form6.10、定义替换文本
placeholder属性用于为input类型的输入框提供一种文本提示这些提示可以描述输入框期待用户输入的内容在输入框为空时显示而当输入框获取焦点时则自动消失。placeholder属性适用于text、search、url、telephone、email和password类型的input标签。
【示例】placeholder属性的应用。请注意比较本例与上例提示方法的不同。 form action/testform.asp methodget请输入邮政编码:input typetext namezip_code pattern[0-9]{6}placeholder请输入6位数的邮政编码 /input typesubmit value提交 //form当输入框获得焦点并输入字符时提示文字消失
6.11、定义必填
required属性用于定义输入框填写的内容不能为空否则不允许提交表单。该属性适用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file类型的input标签。
【示例】使用required属性规定文本框必须输入内容。 form action/testform.asp methodget请输入姓名: input typetext nameusr_name requiredrequired /input typesubmit value提交 //form当输入框内容为空并单击“提交”按钮时会出现“请填写此字段”的提示只有输入内容之后才允许提交表单。
6.12、定义复选框状态
在HTML4中复选框有两种状态选中和未选中。HTML5为复选框添加了一种状态—未知使用indeterminate属性可以对其进行控制它与checked属性一样都是布尔属性用法相同。 labelinput typecheckbox idchk1 未选中状态/labellabelinput typecheckbox idchk2 checked 选中状态/labellabelinput typecheckbox idchk3 indeterminate 未知状态/label【示例】在JavaScript脚本中直接设置或访问复选框的状态。 styleinput:indeterminate {width: 20px; height: 20px;} /*未知状态的样式*/input:checked {width: 20px; height: 20px;} /*选中状态的样式*//stylescriptchk3.indeterminate true; //设置为未知状态chk2.indeterminate false; //设置为确知状态if ( chk3.indeterminate ){ alert(未知状态) }else{if ( chk3.checked ){ alert(选中状态) }else{ alert(未选中状态) }}/script值得注意的是目前浏览器仅支持使用JavaScript脚本控制未知状态如果直接为复选框标签设置indeterminate属性则无任何效果如下图所示。 另外复选框的indeterminate状态的价值仅是视觉意义在用户界面上看起来更友好复选框的值仍然只有选中和未选中两种。
6.13、获取文本选取方向
HTML5为文本框和文本区域控件新增了selectionDirection属性用来检测用户在这两个元素中使用鼠标选取文字时的操作方向。如果是正向选择则返回forward如果是反向选择则返回backford如果没有选择则返回forward。
【示例】简单演示如何获取用户选择文本的操作方向。 scriptfunction ok() {var adocument.forms[0][test];alert(a.selectionDirection);}/scriptforminput typetext nametest valueselectionDirection属性input typebutton value提交 onClickok()/form6.14、访问标签绑定的控件
HTML5为label元素新增control属性允许使用该属性访问label绑定的表单控件。
【示例】使用包含一个文本框然后通过label.control来访问文本框。 script typetext/javascriptfunction setValue() {var label document.getElementById(label);label.control.value 010888; // 访问绑定的文本框并设置它的值}/scriptformlabel idlabel邮编 input idcode maxlength6/labelinput typebutton value默认值 onclicksetValue()/form提示可以通过label元素的for属性绑定文本框然后使用label的control属性访问它。
7.15、访问控件的标签集
HTML5为所有表单控件新增labels属性允许使用该属性访问与控件绑定的标签对象该属性返回一个NodeList对象节点集合再通过下标或for循环可以访问某个具体绑定的标签。
【示例】使用text.labels.length获取与文本框绑定的标签个数如果仅绑定一个标签则创建一个标签然后绑定到文本框上设置它的属性并显示在按钮前面。然后判断用户输入的信息并把验证信息显示在第二个绑定的标签对象中效果如下图所示。
7、HTML5新表单元素
7.1、定义数据列表
datalist元素用于为输入框提供一个可选的列表供用户输入匹配或直接选择。如果不想从列表中选择也可以自行输入内容。
datalist元素需要与option元素配合使用每一个option选项都必须设置value属性值。其中datalist标签用于定义列表框option标签用于定义列表项。如果要把datalist提供的列表绑定到某输入框上还需要使用输入框的list属性引用datalist元素的id。
【示例】演示datalist元素和list属性如何配合使用。 form actiontestform.asp methodget请输入网址input typeurl listurl_list nameweblink /datalist idurl_listoption label新浪 valuehttp://www.sina.com.cn /option label搜狐 valuehttp://www.sohu.com /option label网易 valuehttp://www.163.com //datalistinput typesubmit value提交 //form在Chrome浏览器中运行当用户单击输入框之后就会弹出一个下拉列表供用户选择网址效果如下图所示。
7.2、定义密钥对生成器
keygen元素的作用是提供一种验证用户的可靠方法。
作为密钥对生成器当提交表单时keygen元素会生成两个键私钥和公钥。私钥存储于客户端公钥被发送到服务器可用于之后验证用户的客户端证书。
目前浏览器对该元素的支持不是很理想。
【示例】keygen属性的应用。 form action/testform.asp methodget请输入用户名: input typetext nameusr_name /br请选择加密强度: keygen namesecurity /brinput typesubmit value提交 //form7.3、定义输出结果
output元素用于在浏览器中显示计算结果或脚本输出其语法如下。output元素应该位于表单结构的内部或者设置form属性指定所属表单也可以设置for属性绑定输出控件。 output nameText/output【示例】下面是output元素的一个应用示例。该示例计算用户输入的两个数字的乘积。 script typetext/javascriptfunction multi(){aparseInt(prompt(请输入第1个数字。,0));bparseInt(prompt(请输入第2个数字。,0));document.forms[form][result].valuea*b;}/scriptbody onloadmulti()form actiontestform.asp methodget nameform两数的乘积为: output nameresult/output/form/body8、HTML5表单属性
8.1、定义自动完成
autocomplete属性用于规定form中所有元素都拥有自动完成功能。该属性在介绍input属性时已经介绍过用法与之相同。
但是当autocomplete属性用于整个form时所有从属于该form的控件都具备自动完成功能。如果要关闭部分控件的自动完成功能则需要单独设置autocomplete“off”具体示例可参考autocomplete属性的介绍。
8.2、定义禁止验证
HTML5表单控件具有自动验证功能如果要禁止验证可以使用novalidate属性该属性规定在提交表单时不应该验证form或input域。它适用于form标签以及text、search、url、telephone、email、password、date pickers、range和color类型的input标签。
【示例1】使用novalidate属性取消整个表单的验证。 form actiontestform.asp methodget novalidate请输入电子邮件地址: input typeemail nameuser_email /input typesubmit value提交 //form【补充】HTML5为form、input、select和textarea元素定义了一个checkValidity()方法。调用该方法可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity()方法将返回布尔值以提示是否通过验证。
【示例2】使用checkValidity()方法主动验证用户输入的email地址是否有效。 scriptfunction check(){var email document.getElementById(email);if(email.value){alert(请输入email地址);return false;}else if(!email.checkValidity()){alert(请输入正确的email地址);return false;}elsealert(您输入的email地址有效);}/scriptform idtestform onsubmitreturn check(); novalidatelabel foremailemail/labelinput nameemail idemail typeemail /br/input typesubmit/form提示在HTML5中form和input元素都有一个validity属性该属性返回一个ValidityState对象。该对象具有很多属性其中最简单、最重要的属性为valid属性它表示表单内所有元素内容是否有效或单个input元素内容是否有效。
