第07章 HTML5的表单
- 格式:ppt
- 大小:475.50 KB
- 文档页数:10


2、<form>标签常用属性详解在表单的<form>标记中还可以设置表单的基本属性,包括表单的名称、处理程序、传送方法等。
一般情况下,表单的处理程序action和传送方法method是必不可少的参数。
action属性定义一个URL。
当点击提交按钮时,向这个URL 发送数据。
真正处理表单的数据脚本或程序是在action属性里,这个属性值可以是程序或脚本的一个完整的URL。
说明:在该语法中,表单的处理程序定义的是表单要提交的地址,也就是表单中收集到的资料将要传递的程序地址。
这一地址可以是绝对地址,也可以是相对地址,还可以是一些其他的地址形式,例如发送E-mail等。
<form action="mailto:1347014722@"> </form>method属性用于向action URL 发送数据的HTTP 方法。
method=get:使用这个设置时,来访者输入的数据会附加在URL之后,由用户端直接发送至服务器,所以速度上会比post快,但缺点是数据长度不能够太长。
在没有指定method的情形下一般都会视get为默认值。
method=post:使用这种设置时,表单数据是与URL分开发送的,用户端的计算机会通知服务器来读取数据,所以通常没有数据长度上的限制,缺点是速度上也会比POST慢。
enctype属性对表单内容进行编码的MIME 类型。
Text/plain 以纯文本的形式传送application /x-www-form-urlencoded 默认的编码形式multipart/form-data MIME编码,上传文件的表单必须选择该项target属性目标显示方式。
target属性用来指定目标窗口的打开方式。
_blank是指将返回的信息显示在新打开的窗口中;_parent是指将返回信息显示在父级的浏览器窗口中;_self则表示将返回信息显示在当前浏览器窗口;_top表示将返回信息显示在顶级浏览器窗口中。
HTML5--新增表单元素属性事件(3)前⾔: HTML5在原本已有表单元素的基础上新增了新的表单元素和属性,增强了表单元素的功能。
第⼀类.新增input(type)类型 1.type为email 作⽤:email 类型⽤于包含 email 地址的输⼊域。
特性:提供了默认电⼦邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满⾜验证,则会阻⽌当前的表单提交 email⽰例:如果内容不满⾜邮箱格式,提交表单会有错误提⽰信息。
<body><form action="#">邮箱:<input type="email"><input type="submit" value="提交"></form></body> 2.type为url 作⽤:url类型⽤于包含⽹址的输⼊域。
特性:提供了⽹址完整验证,只能输⼊合法的⽹址:必须包含http://(例:) url⽰例:如果内容不满⾜⽹址格式,提交表单会有错误提⽰信息。
<body><form action="#">⽹址:<input type="url"><input type="submit" value="提交"></form></body> 3.type为number 作⽤:number 类型⽤于包含数值的输⼊域。
特性:只能输⼊数字(包含⼩数点),不能输⼊其它的字符 属性: max -- 限制输⼊框的最⼤值 min -- 限制输⼊框的最⼩值 value -- 输⼊框的默认值 step -- 规定数字增长间隔 number⽰例:输⼊框中只能输⼊number类型值,不能输⼊其他类型的值<form action="#">数量:<input type="number" value="60" max="100" min="0" step="3"><br><input type="submit" value="提交"></form> 4.type为search 作⽤:search 类型⽤于搜索域,⽐如站点搜索或 Google 搜索 特性:输⼊值后,输⼊框后带有关闭按钮可以清除输⼊框内容 search⽰例:<body><form action="#">请输⼊商品名称:<input type="search"> <br><input type="submit" value="提交"></form></body> 5.type为range 作⽤:range 类型⽤于包含⼀定范围内数字值的输⼊域(可以⽤作⾳量键) 特性:显⽰为滑动条 属性: max -- 允许的最⼤值 min -- 允许的最⼩值 value -- 规定的默认值 step -- 规定数字增长间隔 range⽰例:<body><form action="#">范围:<input type="range" max="100" min="0" value="50"> <br><input type="submit" value="提交"></form></body> 6.type为color 作⽤:输⼊类型⽤于规定颜⾊ 特性:该类型允许你从拾⾊器中选取颜⾊ color⽰例:<body><form action="#">颜⾊:<input type="color"> <br><input type="submit" value="提交"></form></body> 7.type为tel 作⽤:tel 输⼊类型⽤于包含电话号码的输⼊字段 特性:tel它并不是来实现验证。
HTML5中表单验证的8种⽅法前⼀篇,我们介绍了,今天就继续来谈谈HTML5的表单验证。
在深⼈探讨表单验证之前,让我们先思考⼀下表单验证的真实含义。
就其核⼼⽽⾔,表单验证是⼀套系统,它为终端⽤户检测⽆效的控件数据并标记这些错误。
换⾔之,表单验证就是在表单提交服务器前对其进⾏⼀系列的检查并通知⽤户纠正错误。
但是真正的表单验证是什么?是⼀种优化。
之所以说表单验证是⼀种优化,是因为仅通过表单验证机制不⾜以保证提交给服务器的表单数据是正确和有效的。
另⼀⽅⾯,设计表单验证是为了让Web应⽤更快地抛出错误。
换句话说,最好利⽤浏览器内置的处理机制来告知⽤户⽹页内包含⽆效的表单控件值。
过去,数据在⽹络上转⼀圈,仅仅是为了让服务器通知⽤户他输⼊了错误的数据。
如果浏览器完全有能⼒让错误在离开客户端之前就被捕获到,那么我们应该利⽤这个优势。
不过,浏览器的表单检查还不⾜以处理所有的错误。
话虽如此,HTML5还是引⼊了⼋种⽤于验证表单控件的数据正确性的⽅法。
让我们依次了解⼀下,不过先要介绍⼀下⽤于反馈验证状态的ValidityState对象。
在⽀持HTML5表单验证的浏览器中,可以通过表单控件来访问ValidityState对象:var valCheck = document.myForm.myInput.validity;这⾏代码获取了名为myInput的表单元素的ValidityState对象。
对象包含了对所有⼋种验证状态的引⽤,以及最终验证结果。
调⽤⽅式如下:valCheck.valid执⾏完毕,我们会得到⼀个布尔值,它表⽰表单控件是否已通过了所有的验证约束条件。
可以把valid特性看做是最终验证结果:如果所有⼋个约束条件都通过了,valid特性就是true,否则,只要有⼀项约束没通过,valid标志都是false。
如前所述,任何表单元素都有⼋个可能的验证约束条件。
每个条件在ValidityState对象中都有对应的特性名,可以⽤适当的⽅式访问。
HTML5 表格 style用法随着互联网的快速发展,网页设计和开发的技术也日新月异。
作为网页设计和开发的重要组成部分,HTML5语言在页面布局和样式设计上有着丰富的功能和特性。
其中,表格是网页中常见的元素之一,而对表格的样式定制,也是网页设计中的重要任务之一。
本文将介绍HTML5 中表格 style 的用法,帮助读者更好地掌握表格样式的定制技巧。
一、HTML5 表格的基本结构在介绍HTML5中表格的样式用法之前,首先需要了解HTML5中表格的基本结构。
HTML5中的表格通过`<table>`、 `<tr>`、`<td>`等标签来构建。
`<table>` 用于声明一个表格,`<tr>` 用于声明表格的行,`<td>` 用于声明每一行中的单元格。
例如:```html<table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格4</td></tr></table>```以上代码中,`<table>`声明了一个表格,其中包含两行(`<tr>`),每行包含两个单元格(`<td>`)。
这是一个最基本的表格结构,接下来将介绍如何对这个表格进行样式的定制。
二、使用属性实现表格样式HTML5中,可以通过给表格的`<table>`、`<tr>`、`<td>`标签添加样式属性来改变表格的样式。
常用的表格样式属性包括:`border`、`background-color`、`text-align`、`width`等。
例如:1. 设置表格边框通过`border`属性可以设置表格的边框样式,包括边框宽度、颜色等。