lt;form></form>标记新增属性

required 规定必需在提交之前填写输入字段。

<form name="frm">
姓名：<input type="text" name="username" required="required"></br>
<input type="submit" name="submit" value="提交">
</form>

placeholder 默认显示内容

实例：带有 placeholder 文本的搜索字段：

<form action="demo_form.asp" method="get">
    <input type="search" name="user_search" placeholder="请输入默认值" />
    <input type="submit" />
</form>

autocomplete 用来设置input组件是否使用自动完成功能,HTML5新增的属性值有on(使用)或off(不使用)两种。

input的属性autocomplete默认为on,其含义代表是否让浏览器自动记录之前输入的值,很多时候，

需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到,可以在input中加入autocomplete="off" 来关闭记录

系统需要保密的情况下可以使用此参数，该属性也可作用于表单元素

实例：

<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>

novalidate 用来设置是否在发送表单时验证表单，如需要验证则填入novalidate即可。

novalidate也是HTML5新增的属性,IE并不支持novalidate属性

HTML5新的input类型(目前IE都不支持,Opera和Chrome对新的输入类型的支持最好,即使不被支持,仍然可以显示为常规的文本域。)

input类型 - email

email类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

E-mail: <input type="email" name="user_email" />

input类型 - url

url类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

Homepage: <input type="url" name="user_url" />

input类型 - number

number类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)

value number 规定默认值

Points: <input type="number" name="points" min="1" max="10" />

input类型 - range

range类型用于应该包含一定范围内数字值的输入域。

range类型显示为滑动条。

您还能够设定对所接受的数字的限定：

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)

value number 规定默认值

<input type="range" name="points" min="1" max="10" />

input类型 - Date Pickers(日期选择器)

HTML5拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

Date: <input type="date" name="user_date" />

input类型 - search

search类型用于搜索域，比如站点搜索或 Google 搜索。

search域显示为常规的文本域。

Search: <input type="search" name="user_color" />

input类型 - color

color输入类型用于规定颜色。

该输入类型允许您从拾色器中选取颜色：

Color: <input type="color" name="user_color" />

HTML5的新的表单元素：(目前IE都不支持)

datalist元素

datalist元素规定输入域的选项列表,功能类似于自造词列表。

列表是通过datalist内的option元素创建的。

如需把datalist绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

实例1：

<input list="browsers"/>
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>

实例2：

Webpage: <input type="url" list="url_list" name="link" /> <!--对输入框进行限制-->
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

提示：option元素永远都要设置 value 属性。

keygen元素

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

keygen元素是密钥对生成器(key-pair generator)。当提交表单时，会生成两个键，一个是私钥，一个公钥。

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

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

实例

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output元素

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

实例

<output id="result" onforminput="resCalc()"></output>

表单元素新增的属性值

文本框text

autofocus属性 自动获得焦点,也就是指加载网页之后,自动将光标(插入点)移到此文本框内。

多行文本框textarea

warp属性在HTML5属性值有：

soft 当在表单中提交时,textarea 中的文本不换行。默认值。

hard 当在表单中提交时,textarea 中的文本换行(包含换行符)。当使用 "hard" 时，必须规定 cols 属性。

wrap属性在HTML4属性值有：

off(也可写成wrap)：不换行，当输入的内容超出文本区域右边界时，文本将向左滚动，并显示滚动条。

如果希望换行，必须手动输入回车键才能将插入点移到下一行；

virtual：文本能够自动换行，当数据提交到服务器被处理时，换行符不会随输入文本一同提交到服务器；(默认值)

physical：文本能够自动换行，当数据提交到服务器被处理时，换行符将会随输入的文本一同被提交到服务器进行处理；

表单分组fieldset

fieldset元素可将表单内的相关元素分组。

HTML5新增的属性

disabled disabled 规定应该禁用fieldset。

form form_id 规定fieldset所属的一个或多个表单。

name value 规定fieldset的名称。

实例

组合表单中的相关元素：

<form>
<fieldset disabled="disabled" form="formid" name="person">
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>

legend元素为fieldset元素定义标题(caption)。

TML5 为前端开发者带来了许多表单增强功能，这些功能使得创建交互式和用户友好的表单变得更加容易。在本文中，我们将介绍几种 HTML5 新增的表单功能，并提供完整的 HTML 示例，以帮助你了解如何在实际项目中应用这些功能。

1. 新的输入类型

HTML5 引入了一系列新的 input 类型，以支持更多种类的数据输入，比如电子邮件、日期等。

例子：电子邮件和网址输入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电子邮件和网址输入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            padding: 20px; /* 页面内边距 */
        }

        form {
            max-width: 400px; /* 表单最大宽度 */
            margin: 0 auto; /* 居中显示 */
            padding: 20px; /* 表单内边距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
            background-color: #f9f9f9; /* 背景颜色 */
        }

        label {
            display: block; /* 使标签独占一行 */
            margin-bottom: 5px; /* 标签下方间距 */
            font-weight: bold; /* 字体加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 输入框宽度 */
            padding: 8px; /* 内边距 */
            margin-bottom: 20px; /* 与下一个元素的间距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 4px; /* 边框圆角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 边框圆角 */
            cursor: pointer; /* 鼠标样式 */
            font-size: 16px; /* 字体大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">个人网站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在这个示例中，我们使用了 type="email" 和 type="url" 来要求用户输入有效的电子邮件地址和网址。如果用户输入的不符合格式，浏览器会在提交表单前显示一个警告。

2. 占位符属性

placeholder 属性允许我们在输入字段中设置一个提示文本，当输入字段为空时显示，一旦开始输入，提示文本就会消失。

例子：带占位符的输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带占位符的输入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            padding: 20px; /* 页面内边距 */
        }

        form {
            max-width: 300px; /* 表单最大宽度 */
            margin: 0 auto; /* 居中显示 */
            padding: 20px; /* 表单内边距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
            background-color: #f9f9f9; /* 背景颜色 */
        }

        label {
            display: block; /* 使标签独占一行 */
            margin-bottom: 10px; /* 标签下方间距 */
            font-weight: bold; /* 字体加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 输入框宽度，减去内边距和边框的宽度 */
            padding: 10px; /* 内边距 */
            margin-bottom: 20px; /* 与下一个元素的间距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 4px; /* 边框圆角 */
            box-sizing: border-box; /* 盒子模型，使宽度包含边框和内边距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 边框圆角 */
            cursor: pointer; /* 鼠标样式 */
            font-size: 16px; /* 字体大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="请输入搜索关键字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

这里的 placeholder="请输入搜索关键字" 就是一个占位符，它会在用户输入之前显示在搜索框中。

3. 自动聚焦属性

autofocus 属性可以让页面加载时自动将焦点放到某个表单元素上。

例子：自动聚焦的输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动聚焦的输入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在这个示例中，当页面加载完成后，姓名输入框将自动获得焦点。

4. 表单验证

HTML5 为表单验证提供了内置支持，通过简单的属性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情况下进行基本的验证。

例子：表单验证

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括边框和内边距在内的宽度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年龄:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">邮编:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="请输入5位数字的邮编" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在这个示例中，年龄字段要求用户输入一个介于 18 到 99 之间的数字，而邮编字段要求用户输入一个符合特定模式（5位数字）的文本。

结语

HTML5 的表单增强功能大大简化了表单处理和验证的工作，使得开发更加高效，同时也提高了用户体验。通过上述示例，我们可以看到，利用 HTML5 的新特性，可以创建功能强大且易于使用的表单。随着技术的不断进步，我们作为开发者应该不断学习和实践，以便更好地利用这些新工具来构建更好的网页。