HTML5 表单元素

TML5 新的表单元素

HTML5 有以下新的表单元素:

<datalist>
<keygen>
<output>

注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。

HTML5 <datalist> 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

实例

<input> 元素使用<datalist>预定义值:

<inputlist="browsers"><datalistid="browsers"><optionvalue="Internet Explorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

实例

带有keygen字段的表单:

<formaction="demo_keygen.asp"method="get">用户名: <inputtype="text"name="usr_name">加密: <keygenname="security"><inputtype="submit"></form>

尝试一下 »

HTML5 <output> 元素

<output> 元素用于不同类型的输出，比如计算或脚本输出：

实例

将计算结果显示在 <output> 元素:

<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0<inputtype="range"id="a"value="50">100 +<inputtype="number"id="b"value="50">=<outputname="x"for="a b"></output></form>

HTML5 新表单元素

标签	描述
<datalist>	<input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	><keygen> 标签规定用于表单的密钥对生成器字段。
<output>	<output> 标签定义不同类型的输出，比如脚本的输出。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群{{308855039，我们一起飞！

html5 中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，接下来我们来说1下自动验证。

在html5中，通过对元素使用属性的方法，可以实现在表单提交时履行自动验证的功能，在履行代码后，将在表单提交时自动验证输入的内容是不是为数字，如果验证通不过，将显示毛病信息文字。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="text" required pattern="^\w.*$">
            <input type="submit" value="提交">
    </form>
</body>
</html>

接下来我们来看1下在html5 中追加的关于对元素内输入内容进行限制的属性的指定。

1.required属性

html5 中新增的required属性可以利用在大多数输入元素上（除隐藏元素，图片元素按钮上）。在提交时，如果元素中内容为空白。则不允许提交，同时在阅读器中显示信息提示文字，提示用户这个元素中必须输入内容，效果如图

2.pattern属性之条件到的新增的input元素，比如email，number，URL等，要求输入内容符合1定的格式，对input元素使用pattern属性，并且将属性值设置为某个格式的正则表达式，在提交时会检查其内容是不是符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在阅读器中显示信息提示文字，提交输入的内容必须符合给定格式，代码以下，要求输入内容为1个数字与3个大写字母：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            请输入指定内容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="输入:1个数字3个大写字母">
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

3.min属性与max属性

min与max这两个属性是日期类型或数值类型的input元素的专用属性，他们限制了在input元素中输入的数值与日期的范围。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            请输入数值:<input type="number" name="point" min="0" max="100" />
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

4.step属性

step属性控制input元素中的值增加过减少时的步骤。例如当你想让用户输入的值在0与100之间，但必须是5的倍数时，你可以指定step为5，代码以下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="get">
      <input type="number" name="point" step="5" />
      <input type="submit" />
    </form>
</body>
</html>

效果以下：

原文：http://www.wfuyu.com/htmlcss/27520.html

用过Delphi的程序员，对Form这个词应该比较熟悉。在Delphi中，Form被翻译为“窗体、窗口”，作用是：为用户提供界面，供用户输入信息，向用户展示处理结果。

HTML5中也有Form，功能与Delphi中的Form差不多，用于接收用户输入，和服务器进行交互。不过HTML5中的Form，中文一般译为“表单”。

1、Web前端与Web后端的交互

Web前端，指浏览器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript脚本。

Web后端，指运行在服务器上的，为Web前端提供服务的软件，Web后端也常常被称为Web服务器。

在HTML5中，Web前端与Web后端交互的流程一般如下：

（1）Web前端向Web后端发起HTTP请求；

（2）Web后端收到HTTP请求后，进行业务处理；

（3）Web后端向Web前端返回HTTP响应。

到目前为止，我们在HTML5中碰到的Web前端发起HTTP请求的方式有两种：

第1种：HTML页面通过<a>元素向用户提供超级链接，用户点击该链接时，会向服务器发起请求；

第2种：HTML页面通过表单为用户提供输入界面，用户提交表单时，会向服务器发起请求。

2、GET请求和POST请求

HTTP请求有八种，对Web前端开发者来说，最常用的是GET请求和POST请求。

GET请求：向Web后端请求指定的页面；GET请求携带的数据，以URL参数的形式提供；

POST请求：向Web后端提交数据，请求Web后端对数据进行处理；POST请求携带的数据，在请求消息体中提供。

在HTML5中，用户点击链接地址，Web前端向后端发起GET请求；

在HTML5中，用户提交表单，Web前端可以向后端发起GET请求，也可以发起POST请求。

说明：由于目前没有和后端服务器对接，为了便于对表单设计进行展示，下面的例子HTML文档，都是用GET请求来提交数据。

3、表单的主要元素

<form>元素：表示表单；

<input>元素：表单中的输入控件，输入控件可以是文本框、单选框、复选框、按钮等等；

<label>元素：表单中的标签控件；

<button>元素：表单中的按钮控件；

<select>与<option>元素：用于实现列表框和下拉菜单；

<textarea>元素：多行文本控件。

4、表单提交文本框的输入

下面是一个可以提交文本框输入的HTML文档：

<!DOCTYPE html>
<html>
<head>
<title>form001</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请输入您的姓名：</label>
<input type="text" name="name" />
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，展示效果如下：

我们可以在文本框中输入信息，例如输入tom：

当我们点击“提交”按钮后，浏览器显示信息如下；

可以看到，数据被提交给process.html页面，并且附带了一个参数name，且值为我们输入的tom。

5、表单提交用户对单选框的选择

下面是一个可以提交单选框被选信息的HTML文档：

<!DOCTYPE html>
<html>
<head>
<title>form002</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>性别：</label>
<br/>
男：<input type="radio" name="gender" value="male" />
女：<input type="radio" name="gender" value="female" />
<br/><br/>
<label>国籍：</label>
<br/>
中国：<input type="radio" name="nationality" value="Chinese" /> <br/>
美国：<input type="radio" name="nationality" value="American" /> <br/>
日本：<input type="radio" name="nationality" value="Japanese" /> <br/>
英国：<input type="radio" name="nationality" value="English" /> <br/>
其它：<input type="radio" name="nationality" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择性别和国籍，例如我们选择“男”和“中国”：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了gender参数的值为male，nationality参数的值为Chinese。

6、表单提交用户对复选框的选择

下面是一个可以提交复选框被选信息的HTML文档；

<!DOCTYPE html>
<html>
<head>
<title>form003</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请选择您的业余爱好：</label>
<br/>
美术：<input type="checkbox" name="hobby" value="Art" /> <br/>
足球：<input type="checkbox" name="hobby" value="Football" /> <br/>
唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/>
厨艺：<input type="checkbox" name="hobby" value="Cook" /> <br/>
其它：<input type="checkbox" name="hobby" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择自己的业余爱好，例如我们选择足球、唱歌、厨艺：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了三个hobby参数，其值分别为Football，Singing和Cook。

7、表单提交用户对下拉菜单的选择

下面是一个可以提交下拉菜单被选信息的HTML文档；

<!DOCTYPE html>
<html>
<head>
<title>form004</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请选择您的学历：</label>
<br/>
<select name="education">
<option value="primary_school">小学</option>
<option value="junior_high_school">初中</option>
<option value="senior_high_school">高中</option>
<option value="college">大学</option>
</select>
<br/><br/>
<label>请选择您的兴趣爱好：</label>
<br/>
<select name="hobby" multiple="true">
<option value="Art">美术</option>
<option value="Football">足球</option>
<option value="Singing">唱歌</option>
<option value="Cook">厨艺</option>
<option value="Other">其它</option>
</select>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以单选我们的学历，也可以通过按下Shift+鼠标键多选我们的兴趣。例如我们选择“初中”学历，选择“美术”和“厨艺”两项爱好：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了education参数和两个hobby参数，education的值为junior_high_school，hobby的值为Art和Cook。

上面列举了几种控件的HTML5表单设计方法，其它的控件也大概差不多，把多个控件组合在同一个<form>元素中的方法也是相同的，这里就不再赘述了。

在线咨询

上一篇：手把手教你前端的各种文件上传攻略和大文件断点续传
下一篇：绑架什么的太低级太没技术含量你听说过自己纯手工打造的钢琴吗