HTML 总结-表单-表单属性
HTML5 表单属性
HTML5 的新的表单属性
本章讲解涉及 <form> 和 <input> 元素的新属性。
新的 form 属性:
- autocomplete
- novalidate
新的 input 属性:
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
浏览器支持
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
autofocus | No | No | 10.0 | 3.0 | 4.0 |
form | No | No | 9.5 | No | No |
form overrides | No | No | 10.5 | No | No |
height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
list | No | No | 9.5 | No | No |
min, max and step | No | No | 9.5 | 3.0 | No |
multiple | No | 3.5 | No | 3.0 | 4.0 |
novalidate | No | No | No | No | No |
pattern | No | No | 9.5 | 3.0 | No |
placeholder | No | No | No | 3.0 | 3.0 |
required | No | No | 9.5 | 3.0 | No |
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
实例
<form action="demo_form.asp" method="get"autocomplete="on"
>
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email"autocomplete="off"
/><br />
<input type="submit" />
</form>
注释:在某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。
autofocus 属性
autofocus 属性规定在页面加载时,域自动地获得焦点。
注释:autofocus 属性适用于所有 <input> 标签的类型。
实例
User name: <input type="text" name="user_name" autofocus="autofocus"
/>
form 属性
form 属性规定输入域所属的一个或多个表单。
注释:form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id:
实例
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname"form="user_form"
/>
注释:如需引用一个以上的表单,请使用空格分隔的列表。
表单重写属性
表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。
表单重写属性有:
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
注释:表单重写属性适用于以下类型的 <input> 标签:submit 和 image。
实例
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit"formaction="demo_admin.asp"
value="Submit as admin" />
<br />
<input type="submit"formnovalidate="true"
value="Submit without validation" />
<br />
</form>
注释:这些属性对于创建不同的提交按钮很有帮助。
height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释:height 和 width 属性只适用于 image 类型的 <input> 标签。
实例
<input type="image" src="img_submit.gif"width="99"
height="99"
/>
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释:list 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。
实例
Webpage: <input type="url"list="url_list"
name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。
注释:min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
下面的例子显示一个数字域,该域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9):
实例
Points: <input type="number" name="points"min="0"
max="10"
step="3"
/>
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。
实例
Select images: <input type="file" name="img" multiple="multiple"
/>
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释:novalidate 属性适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.
实例
<form action="demo_form.asp" method="get"novalidate="true"
>
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
pattern 属性
pattern 属性规定用于验证 input 域的模式(pattern)。
模式(pattern) 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
注释:pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):
实例
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}"
title="Three letter country code" />
placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
实例
<input type="search" name="user_search" placeholder="Search W3School"
/>
required 属性
required 属性规定必须在提交之前填写输入域(不能为空)。
注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
实例
Name: <input type="text" name="usr_name" required="required"
/>
HTML 总结-表单-表单属性的更多相关文章
- Js document.frmLogin.action = '/login.htm';的意义和form表单的target属性
一.解答:就是把 这个id名为frmLogin的form的提交地址改为上面的/login.htm <form id="frmLogin" name="frmLogi ...
- HTML5初步——新的表单元素和属性
HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...
- 关于html表单的disabled属性的设置问题
首先,我的看法是无论disable的值是否有值,只要设置了disabled属性的表单,无论是否有值,无论值为什么,都会被禁用. 来看下面例子: 在一个群里有人说因为直接写在表单属性上是字符串,因为 ...
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- hibernate学习笔记(6)组件属性以及单表操作
组件属性:实体类中的某个属性属于用户自定义类的对象: 作用:将两个实体类合并在一起组建成一个表 在hbm.xml文件中配置: 格式: <component name="取的名字&quo ...
- html5--3.13 表单的新增属性
html5--3.13 表单的新增属性 学习要点 掌握表单新增属性的使用 HTML5新增表单属性 之前课程中已经接触过的新增属性:autocomplete属性/autofocus属性/list属性/m ...
- input from 表单提交 使用 属性 disabled="disabled" 后台接收不到name="username"的值
input from 表单提交 使用 属性 disabled="disabled" 后台接收不到name="username"的值
- hibernate单表junit测试
首先,创建java project ,导入需要的jar包 添加hibernate.cfg.xml <?xml version='1.0' encoding='UTF-8'?> <!D ...
随机推荐
- hdu 1394 zoj 1484 求旋转序列的逆序数(并归排序)
题意:给出一序列,你可以循环移动它(就是把后面的一段移动到前面),问可以移动的并产生的最小逆序数. 求逆序可以用并归排序,复杂度为O(nlogn),但是如果每移动一次就求一次的话肯定会超时,网上题解都 ...
- c#中常用的异常类型
c#中异常捕获catch{}常用的异常类型 Exception 类 描述 SystemException 其他用户可处理的异常的基本类 ArgumentException 方法的参数是非法的 ...
- VB.NET版机房收费系统---SqlHelper
SqlHelper,最早接触这个词儿的时候,好像是13年的暑假,那个夏天来的比往年来的稍晚一些,呵呵,sqlhelper,翻译成中文就是数据库助手,帮手.百度百科这样对她进行阐述: SqlHelper ...
- C# 对象拷贝问题 =等同于浅拷贝
大家都知道,在C#中变量的存储分为值类型和引用类型两种,而值类型和引用类型在数值变化是产生的后果是不一样的,值类型我们可以轻松实现数值的拷贝,那么引用类型呢,在对象拷贝上存在着一定的难度. 下 ...
- 纯css加伪类实现关闭提示创窗口
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- ie6兼容性,还需要测试么?迷茫。。。
最近公司网站在谷歌,火狐上测试都没有问题,但是在ietest,ie6上出现兼容问题 ,由于ietest好几次打开ie6都报错(尝试卸载重新安装几次无果),下载virtualbox安装自带ie6的xp系 ...
- Web前端开发工程师为什么讨厌IE6!
- hud 2089 不要62 (数位dp)
#include<stdio.h> #include<string.h> #include<math.h> #define max 10 ]; int number ...
- UltraISO做U盘启动盘教程
用UltraISO做U盘启动盘教程 注意:制作前请先备份u盘内重要文件 vista.win7系统需要以管理员身份运行UltraISO,其他系统直接运行即可 1.打开UltraISO选择iso镜像文件 ...
- slf4j+log4j配置(Maven)
首先配置Maven依赖 <!-- http://mvnrepository.com/artifact/org.slf4j/slf4j-log4j12 --> <dependency& ...