HTML5表单

程序员文章站 2022-05-11 10:17:55

...

新增的表单元素与属性

新增属性

form属性
在HTML5中表单元素可放在表单之外，通过给该元素添加form属性即可，如：

<form method="get" id="test">
 username:<input name="username" type="text" id="username" value="oseye">
 <input type="submit" value="提交">
</form>
url:<input form="test" name="url" type="text" id="url" value="http://www.oseye.net">

点击提交即可看到url:

?username=oseye&button=提交&url=http%3A%2F%2Fwww.oseye.net

formaction属性
HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址，如：

<form method="get" id="test">
    username:<input name="username" type="text" id="username" value="oseye">
  <input formaction="a.html" type="submit" value="提交到a.html">
  <input formaction="b.html" type="submit" value="提交到b.html">
</form>

formmethod属性
既然对提交按钮有了formaction属性，就相应的有了formmethod属性：

<form method="get" id="test">
  username:<input name="username" type="text" id="username" value="oseye">
  <input formaction="a.html" formmethod="get" type="submit" value="get提交到a.html">
  <input formaction="b.html" formmethod="post" type="submit" value="post提交到b.html">
</form>

placeholder属性
给文本框(text或textarea)处于未输入状态时的一种文字提示：
```
<input name="username" placeholder="oseye" type="text" id="username">
```
autofocus属性
自动获得焦点，一个页面只能有一个控件具有该属性：
```
<input name="username" autofocus type="text" id="username">
```
list属性
HTML5为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框(select)，但允许用户自定义输入，为了避免没有支持该蒜素的浏览器出现错误，我们通常使用CSS设置不显示：
```
order:<input list="list" name="order" autofocus type="text" id="order">
<datalist id="list" style="display:none">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</datalist>
```
autocomplete属性
自动完成允许浏览器预测对字段的输入，在HTML5之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。
```
<form action="/autocomplete.html" 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>
```

新增元素
HTML5大幅度地增加和改良了input元素的种类
- search 与text文本框类似，用于搜索；
- tel 与text文本框类似，用于电话；
- url 与text文本框类似，用于url格式的地址；
- email 与text文本框类似，用于email格式的地址；
- number 与text文本框类似，用于数值；
- range 只允许输入一段范围内的数值，通过min和max属性来设置范围；
- color 颜色文本框，“#000000”格式的文字；
- file 文件选择文本框，HTML5中通过multiple属性可以多选；
- datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；
- output 定义不同类型的输出；

表单验证

自动验证
所谓自动验证，就是通过为元素添加相应的属性来达到验证的要求
- required属性
  具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示
```
<form>
  <input required type="text">
  <input type="submit" value="提交">
</form>
```
- pattern属性
  具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示
```
<form>
  <input pattern="\d+" type="text">
  <input type="submit" value="提交">
</form>
```
- min属性和max属性
  它们是值类型和日期类型的input元素专用属性，限制了输入的范围
```
<form>
  <input min="10" max="100" type="number">
  <input type="submit" value="提交">
</form>
```
- step属性
  控制元素的值增加或减少的步幅，如输入11-100之间的数字，且步幅是5，那么只能输入11、16、21....
```
<form>
  <input min="11" max="100" step="5" type="number">
  <input type="submit" value="提交">
</form>
```

显示验证
除了给元素添加属性来自动验证外，在HTML5中，form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法，调用该方法可以进行手动验证，checkValidity方法以boolean的形式返回验证结果。

<form name="form1" method="post" action="">
  <input type="email" name="email" id="email">
  <input type="button" name="button" id="button" value="按钮" onClick="check()">
</form>
<script type="text/javascript">
function check(){
	var email=document.getElementById("email");
	if(email.checkValidity()){
		alert("email格式正确");
	}else{
		alert("email格式不正确");
	}
}
</script>

取消验证
取消表单验证有两个属性：用于form的novalidate和用于submit的formnovalidate：

<form novalidate>
  <input type="text" name="name" id="name" required>
  <input type="submit" name="button" id="button"  value="提交">
</form>
<form>
  <input type="text" name="name" id="name" required>
  <input type="submit" formnovalidate name="button" id="button"  value="提交">
</form>

据说novalidate可以用于元素，但本人没成功，有兴趣的同学可以试试。

自定义错误
在HTML5中没经过验证的表单浏览器会有默认的提示，但也提供了通过JavaScript的来设置自定义错误提示信息：

<form>
  <input type="text" name="name" id="name" required>
  <input type="submit" name="button" id="button" onClick="showErr();" value="提交">
</form>
<script type="text/javascript">
	function showErr(){
		var name=document.getElementById("name");
		if(name.value==""){
			name.setCustomValidity("不能为空");
		}	
	}
</script>

增强的页面元素

figure元素
figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption：
```
<figure>
	<img src="logo.png">
	<figcaption>标志</figcaption>
</figure>
```
details元素
details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法：
```
<details>
	<summary>Copyright 2011.</summary>
	<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
```
不过支持的浏览器比较少。
mark元素
mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果：
```
<mark>osEye</mark> 的理念以开源项目为中心进行相关的问题讨论。
```
progress元素
可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。
```
<p><progress /></p>
<p><progress value="20" max="100" /></p>
<p><progress value="0.5" /></p>
```
meter元素
定义度量衡
```
<p><meter value="0.3"></p>
<p><meter value="10" max="100" low="20"></meter></p>
<p><meter value="20" max="100" high="60"></meter></p>
<p><meter value="80" max="100" high="60"></meter></p>
```
- high:定义度量的值位于哪个点，被界定为高的值。
- low:定义度量的值位于哪个点，被界定为低的值。
- max:定义最大值。默认值是 1。
- min:定义最小值。默认值是 0。
- optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
- value:定义度量的值。

改良的ol列表
在HTML5中为ol元素添加了start属性和reversed属性：

<ol start="3" reversed>
	<li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ol>

改良的dl列表
dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn

<dl>
    <dt>术语1</dt>
    <dd>描述...</dd>
    <dt><dfn>名字</dfn>术语2</dt>
    <dd>描述...</dd>
</dl>

另外还有cite用于表示作者，small用于标识“小型文本”等。

上一篇：小米盒子4S Pro首销：8K视频解码 399元

下一篇： CSS光标cursor_html/css_WEB-ITnose

HTML5表单

PHP获取表单所有复选框的值的方法

js仿网易表单及时验证功能

vue中vee validate表单校验的几种基本使用

Bootstarp 基础教程之表单部分实例代码

微信小程序 PHP后端form表单提交实例详解

jQuery中验证表单提交方式及序列化表单内容的实现

站长福音，不懂编程和数据库也能创建表单

Jquery插件easyUi表单验证提交(示例代码)

利用表单大师帮助市场人员收集数据和管理商机

不懂HTML，也能创建表单