☀ autofocus 属性
<input type="text" autofocus/>设置 autofocus 属性,使文本框自动获得焦点
注意:一个页面中最多只能有一个表单元素设置该属性,否则功能将失效,建议对第一个input元素设置autofocus属性。
☀ formaction 属性
<input type="submit" formaction="处理逻辑"><!-- 处理逻辑可为add.jsp(添加)、update.jsp(修改)、delete.jsp(删除)。 -->
所有提交按钮(<input type="submit">、<input type="image">、<button type="submit">)都可以使用 formaction 属性。
HTML5只需添加formaction属性就可实现增加、修改和删除3个按钮功能,不再需要脚本的控制。
☀ autocomplete 属性
若一个元素内包含有 autocomplete="off" 属性,这意味着涉及机密信息,不应被浏览器保存。
若表单未定义 autocomplete,则默认设置为开启自动完成、显示输入提示(记忆用户在曾访问网站上所输入的内容)。
☀ pattern 属性
pattern 属性是input元素的验证属性,该属性的值是一个正则表达式,通过这个表达式可以验证输入内容的有效性。
|
☀ placeholder 属性,也叫占位符
占位符值可以给予用户一个快速提示,让他们了解该在输入字段中输入什么,它并不会取代标签元素。当需要用户输入某一特定格式的内容时,
占位符显得尤其有用。浏览器会在输入字段显示提示文字。当该输入字段被聚焦(focus)激活,该提示文字则消失,失去焦点时又将自动显示。
姓名:<input type="text" placeholder="请输入您的真实姓名" name="username"><br />
required 属性 定义必填项
required 是一个布尔型属性,包含此属性的表单元素必须被填写。在发送时若仍为空,浏览器就会给予相关相应。
2、新增的 input 元素类型
☀ 输入类型 tel 及 search
tel(电话输入文本) 及 search(搜索关键字输入的文本框) 类型与普通的文本没什么不同,
唯一不同的是输入关键字后search文本框右侧会出现一个"X"按钮,单击"X"后清空输入内容,由此带来方便。
☀ 输入类型 url 及 email
URL地址输入框要求必须输入一个包含访问协议的完整的URL路径。
URL网址:<input type="url" name="rul" title="URL应包括访问协议"> email邮箱输入框要求输入正确格式,此外,还可以添加 multiple 属性以允许同时输入多个以逗号分隔的email。 Email:<input type="email" name="email" title="email的格式是 XXX@XXX.XX ">
☀ 输入类型 number 及 range
number 及 range 类型与包含数值的输入有关,并且支持浮点数表达式。不同的是range类型是用一个滑块来进行输入。
输入数值的取值范围由 min和 max两个属性来设置,默认是不限定;调节步长使用 step属性,默认步长是1.
<input type="number/range" min="最小值" max="最大值" step="改变数值的步长" name="number/range">
☀ 输入类型 color
color 类型让 input元素生成一个颜色选择器。<input type="color" name="color">
☀ datalist 选项列表
datalist 元素用于生成一个隐藏的下拉菜单,其相当于一个“看不见”的 select元素。为什么需要设置id值呢?
因为 datalist元素一般需要跟某个文本框结合使用,结合方式是通过将文本框的"list"属性值设置为 datalist的 id值,这样就将 datalist绑定到了某个文本框。用户选中选项后datalist元素自动隐藏。记住,跟文本框一起使用并给文本框list和自身id相同的值。
1 2 3 4 5 6 |
|
☀ 用 datetime(日期和时间),date(日期),time(时间),month,week以及 datetime-local(本地日期时间)这几个type类型表示日期和时间
<input type="datetime/date/time/month/week/datetime-local" name="...">
datetime包括日期以及时间信息;时间设置始终为UTC。规范允许用户通过浏览器选择不同时区,但input元素的值始终会被转换为UTC格式。datetime属性 字符串必须以 Z 结束以表明它是UTC格式。"YYYY-MM-DDThh:mm:ss.ssZ"这是UTC格式.目前,很多浏览器都不支持datetime这个类型。
在 date和 month中,时间及时区则被忽略。根据规范定义,date必须是所选月份中的一个有效日期,同时考虑到闰年。年、月、日必须用“ - ”号隔开。为了确保星期与月份不被混淆,week前面通常会加上一个字母 W 。
datetime-local 与之前描述过的 datetime 作用基本相同,唯一不同之处是不需要表明时区。
☀ 使用 meter 显示度量
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。例子:磁盘用量、查询结果的相关性,等等。
注释:<meter> 标签虽说也可标记进度条,但并不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。
<meter value="3" min="0" max="10">十分之三</meter>或<meter value="0.6"></meter>
☀ 用 progress 显示任务进程
progress 元素被作用于展示一个任务的完成度,典型的例子是用户文件上传或下载。
举例来说,设计10个 checkbox类型的 input元素,当它们全部被激活时,进度条将显示到100%。
1 2 3 4 5 6 7 8 |
|
元素 progress的初始值为0,最大值为10.当 input元素被激活时,就会调用 updateProgress()函数,函数内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
变量 ip包括了一个包含所有输入元素的节点列表(NodeList)。for循环测试每一个元素的当前状态,若其被激
活(checked==true),计数器变量cnt将增加1.同时,progress元素值将被设成计数器值。
☀ 用 output 进行计算
output 元素用于显示各种表单元素的内容或脚本执行结果,它的作用只是用于显示输出。最常用的例子是电子商务网站的
购物车。通过可选的 for属性,你可以决定将哪些字段添加到计算机中。执行运算需要提供一个或更多的相对应输入字段的 id。
举例来说,3种不同商品购物车:为了在 output元素中及时更新每次数量变化,使用表单的 oninput 事件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
我们运用JavaScript的 Number()函数将相关列的 innerHTML值转换为数字,并根据它直接从表格中的到商品价格,input字段也用这个方法
取值(ips[i].value)。如果略过这个步骤的话,JavaScript会直接将字符串加入计算,这样可能导致无法得到正确的结果,计算结果将被赋
值给 output 元素的 value 属性。
暂时还没研究出来怎么在博客里面加script代码,以便更好的将效果展示出来,现在只能给个样式让你们看看:
Product | Price(US$) | Quantity |
---|---|---|
Keyboard | 39.50 | |
Mouse | 26.30 | |
Monitor | 264.50 |
Your shopping cart contains items.Total price: US$
3、客户端表单验证
★ 自动校验
通过对元素使用 required、pattern、min、max和 step等属性以及新增的 input类型,可实现在表单提交时进行自动校验。前面有介绍过,
下面仅举一个简单的执行自动校验的示例。
1 2 3 |
|
★ 显式校验:check Validity()方法进行校验
check Validity()返回一个布尔值,为表单中所有的元素或某个元素的内容无效时,返回 false值,否则返回 true。
我们可以通过编写JavaScript代码调用该方法,以将校验结果显示出来,所以又称该方法为“显式校验方法”。
1 2 3 4 5 6 7 8 9 10 |
|
1 2 3 4 5 |
|
上述代码对密码输入有效性进行显式校验,分别将校验结果以警告对话框的形式展现。
★ 取消校验
有时需要把表单中已填写好的数据暂存一下,以便将来继续填写,即不管数据是否有效,取消表单的有效性校验。
取消表单校验的常用方法有两种:一种是为<form>元素设置 novalidate属性;另一种是对提交按钮设置formnovalidate
属性。第一种方式将关闭整个表单的校验,不管提交什么按钮都将不进行校验。第二种方式则由指定的提交按钮来关闭表单的输
入校验,只有当用户通过指定了 fornvalidate属性的按钮提交表单时才会关闭表单的输入校验。
方法一:<form novalidate>
方法二:<input type="submit" value="保存" formaction="save.jsp" formnovalidate>
★ 自定义校验错误提示信息
使用 setCustomValidity()自定义错误提示信息,可用于检测两次密码输入是否一致:
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 5 |
|