数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML 中引入的新输入类型有哪些？
HTML5 提供了许多新的表单输入类型，确切地说有13种，这使得网页设计师更容易创建引人入胜且用户友好的网页表单。在支持它们的网络浏览器中，新的 HTML5 输入类型提供了数据验证、日期选择器控件、颜色选择器控件、内联帮助文本和其他功能。
HTML5 提供的输入类型
在本文中，我们将了解所有新的表单输入类型以及一些演示其用法的示例。
<input type=”color”>
颜色输入类型允许用户从颜色选择器中选择一种颜色，并返回十六进制值（#rrggbb）。如果未指定值，则默认为 #000000，即黑色。
<input type=”date”>
使用日期输入类型，用户可以从下拉日历中选择一个日期。日期值中不包含时间，只包含年份、月份和日期。
<input type=”datetime”>
此输入类型允许用户输入日期、时间和时区。
<input type=”datetime-local”>
用户可以使用 datetime-local 输入类型选择本地日期和时间，包括年份、月份和日期，以及小时和分钟的时间。
<input type=”email”>
用户可以使用电子邮件输入类型输入他们的电子邮件地址。它与典型的文本输入类型非常相似，但是当与 required 属性结合使用时，浏览器可能会检查模式以确保以正确的格式输入电子邮件地址。
<input type=”month”>
使用月份输入类型，用户可以从下拉日历中选择月份和年份。该值为“YYYY-MM”格式的字符串，其中 YYYY 表示四位数年份，MM 表示月份编号。
<input type=”number”>
数字输入类型允许输入数值。我们还可以使用附加属性 min、max 和 step 将用户限制为仅输入可接受的值。
<input type=”range”>
范围输入类型允许我们输入位于给定范围内的数值。它的功能类似于数字输入，但输入数字的控件更简单。
<input type=”search”>
可以使用搜索输入类型创建搜索输入字段。搜索字段通常的行为类似于常规文本字段，但在某些浏览器（如 Chrome 和 Safari）中，只要您开始在搜索框中输入内容，搜索字段右侧就会出现一个小叉，允许您快速清除搜索字段。
<input type=”tel”>
tel 输入类型允许输入电话号码。浏览器本身不支持 tel 输入验证。但是，您可以使用 placeholder 属性帮助用户输入电话号码的正确格式，或者可以使用 pattern 属性指定正则表达式来验证用户输入。
<input type=”time”>
可以使用时间输入类型（小时和分钟）输入时间。根据本地系统上的时间设置，浏览器可以以 12 小时或 24 小时格式输入时间。
<input type=”url”>
可以使用 url 输入类型输入 URL 或网页地址。我们可以使用 multiple 属性输入多个 URL。此外，如果指定了 required 属性，则浏览器将执行验证以确保仅将与标准 URL 格式匹配的文本输入到输入框中。
<input type=”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 中使用 month、week、number 和 range 输入类型。
<!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 的 form 标签内使用 search、email、tel 和 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>
167 次浏览
