HTML 中引入了哪些新的输入类型?
HTML5 新增了许多 HTML5 表单输入 类型，确切地说是 13 种，它们使网页设计师能够更轻松地创建引人入胜且用户友好的网页表单。在支持这些类型的网页浏览器中，新的 HTML5 输入类型提供数据验证、日期选择器控件、颜色选择器控件、内联帮助文本和其他功能。
HTML5 提供的输入类型
在本文中，我们将介绍所有新的表单输入类型，并通过一些示例来演示它们的用法。
<input type="color">
颜色输入类型允许用户从颜色选择器中选择颜色，并返回十六进制值 (#rrggbb)。如果未指定值，则默认值为 #000000，即黑色。
<input type="date">
使用日期输入类型，用户可以从下拉日历中选择日期。日期值中不包含时间，仅包含年、月、日。
<input type="datetime">
此输入类型允许用户输入日期、时间和时区。
<input type="datetime-local">
用户可以使用 datetime-local 输入类型选择本地日期和时间，包括年、月、日以及小时和分钟的时间。
<input type="email">
用户可以使用 email 输入类型输入其电子邮件地址。它与典型的文本输入类型非常相似，但当与 required 属性结合使用时，浏览器可能会检查模式以确保电子邮件地址的输入格式正确。
<input type="month">
使用 month 输入类型，用户可以从下拉日历中选择月份和年份。其值是一个字符串，格式为"YYYY-MM"，其中 YYYY 代表四位数年份，MM 代表月份。
<input type="number">
number 输入类型允许输入数值。我们还可以使用附加属性 min、max 和 step 来限制用户只能输入可接受的值。
<input type="range">
range 输入类型允许我们输入给定范围内的数值。它的功能类似于数字输入，但输入数字的控件更简单。
<input type="search">
可以使用搜索输入类型创建搜索输入字段。搜索字段的行为通常与常规文本字段类似，但在某些浏览器(例如 Chrome 和 Safari)中，当您开始在搜索框中输入内容时，字段右侧会出现一个小十字，方便您快速清除搜索字段。
<input type="tel">
tel 输入类型允许输入电话号码。浏览器本身不支持 tel 输入验证。但是，您可以使用 placeholder 属性帮助用户输入正确的电话号码格式，或者使用 pattern 属性指定正则表达式来验证用户输入。
<input type="time">
可以使用 time 输入类型(小时和分钟)输入时间。根据本地系统上的时间设置，浏览器可以输入 12 小时或 24 小时格式的时间。
<input type="url">
可以使用 url 输入类型输入 URL 或网址。我们可以使用 multiple 属性输入多个 URL。此外，如果指定了 required 属性，浏览器将执行验证，以确保只有符合标准 URL 格式的文本才会输入到输入框中。
<input type="week">
使用 week 输入类型，用户可以从下拉日历中选择周数和年份。
示例
在此示例中，我们将创建一个表单并在其中使用以下输入元素:color、date、datetime 和 datetime local。
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:400px;
background-color:mistyrose;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="color">Choose a Color : </label>
<input type="color"><br>
<label for="date">Choose a Date : </label>
<input type="date"><br>
<label for="time">Select the Time :</label>
<input type="time"><br>
<label for="datetime">Enter the DateTime :</label>
<input type="datetime"><br>
<label for="datetime-local">Choose the DateTime-local :</label>
<input type="datetime-local">
</form>
</body>
</html>
示例
以下示例演示了 HTML5 中月份、星期、数字和范围输入类型的用法。
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:350px;
background-color:lightgoldenrodyellow;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="month">Select a month : </label>
<input type="month"><br>
<label for="week">Select the week : </label>
<input type="week"><br>
<label for="number">Choose a number :</label>
<input type="number"><br>
<label for="range">Range :</label>
<input type="range" min="1" max="5" step="2"><br>
</form>
</body>
</html>
示例
在此示例中，我们将在 HTML 的表单标签中使用搜索、电子邮件、电话和 url 输入类型。
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:350px;
background-color:lightpink;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="search">Enter the search string: </label>
<input type="search"><br>
<label for="email">Enter Email ID : </label>
<input type="email"><br>
<label for="tel">Enter Phone Number :</label>
<input type="tel"><br>
<label for="url">Type the URL : </label>
<input type="url"><br>
</form>
</body>
</html>
