html5 input新输入类型 – HTML5教程 html5input新输入类型|HTML

上一章HTML教程请查看：html ISO语言代码
在本教程中，你将了解HTML5中引入的input输入类型。
HTML5中的input新输入类型HTML5引入了几种新的< input> 类型，如电子邮件、日期、时间、颜色、范围等，改善用户体验，使表单更具交互性。但是，如果浏览器不能识别这些新的输入类型，它将把它们当作普通的文本框。
在本节中，我们将简要介绍以下每种新的输入类型：

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

还有一个datetime输入类型用于输入日期和时间，但是现在已经过时了。
input类型：color颜色输入类型允许用户从颜色选择器中选择一个颜色，并以十六进制格式(#rrggbb)返回颜色值。如果没有指定值，默认值是#000000，它是黑色的。
让我们尝试下面的例子来理解它是如何工作的：

< form> < label for="mycolor">选择颜色:< /label> < input type="color" value="http://www.srcmini.com/#00ff00" id="mycolor"> < /form>

注意：颜色输入(即type=” color” )在所有主要的现代web浏览器中都是受支持的，如Firefox、Chrome、Opera、Safari(12.1+)、Edge(14+)。不支持微软Internet Explorer和旧版本的苹果Safari浏览器。
Input类型：date日期date输入类型允许用户从下拉日历中选择日期。
date值包括年、月、日，但不包括时间。

< form> < label for="mydate">选择日期:< /label> < input type="date" value="http://www.srcmini.com/2020-04-15" id="mydate"> < /form>

注意：日期输入(即type=” date” )是由Chrome、Firefox、Opera和Edge浏览器支持的。Internet Explorer和Safari浏览器不支持。
input类型Datetime-localdatetime-local输入类型允许用户选择本地日期和时间，包括年、月、日以及以小时和分钟为单位的时间。
让我们尝试下面的例子来理解它是如何工作的：

< form> < label for="mydatetime">选择日期和时间:< /label> < input type="datetime-local" id="mydatetime"> < /form>

警告：Firefox、Safari和Internet Explorer浏览器不支持输入类型=“datetime-local”。目前支持Chrome、Edge和Opera浏览器。
Input类型：emailemail输入类型允许用户输入电子邮件地址，它与标准的文本输入类型非常相似，但是如果它与required属性结合使用，浏览器可能会查找模式，以确保输入格式正确的电子邮件地址。
让我们尝试一下这个例子，输入任何电子邮件地址，看看它实际上是如何工作的：

< form> < label for="myemail">输入邮件地址:< /label> < input type="email" id="myemail" required> < /form>

提示：当使用:valid、:invalid或:required伪类输入值时，你可以为不同的验证状态设置电子邮件输入字段的样式。
注意：所有主流浏览器如Firefox、Chrome、Safari、Opera、internetexplorer10及以上浏览器均支援电邮输入(即type=” email” )的验证。
Input类型：monthmonth输入类型允许用户从下拉日历中选择月份和年份。
该值是格式为“YYYY-MM”的字符串，其中YYYY是四位数的年份，MM是月份号。让我们尝试一个例子，看看这基本上是如何工作：

< form> < label for="mymonth">选择月份:< /label> < input type="month" id="mymonth"> < /form>

警告：Firefox、Safari和Internet Explorer浏览器不支持输入类型=” month” 。目前支持Chrome、Edge和Opera浏览器。
input类型：number数字输入类型可用于输入数值。你还可以使用附加属性min、max和step来限制用户只输入可接受的值。
下面的示例允许你输入1到10之间的数值。

< form> < label for="mynumber">输入一个数:< /label> < input type="number" min="1" max="10" step="0.5" id="mynumber"> < /form>

注意：所有主要浏览器，例如：Firefox、Chrome、Safari、Opera、internetexplorer10及以上，均支援数字输入(即type=” number” )。但Internet Explorer识别数字，但不提供递增和递减自旋按钮。
input类型：rangerange输入类型可用于在指定范围内输入数值，它的工作原理与number输入非常相似，但它提供了一个更简单的数字输入控件。
让我们尝试下面的例子来理解它是如何工作的：

< form> < label for="mynumber">选择一个数:< /label> < input type="range" min="1" max="10" step="0.5" id="mynumber"> < /form>

注：range输入(即typle=” range” )是由所有主要的网页浏览器支持的，如Firefox, Chrome, Safari, Opera, internetexplorer10及以上。
Input类型：searchsearch输入类型可用于创建搜索输入字段。
一个搜索字段通常表现得像一个普通的文本字段，但在一些浏览器中，比如Chrome和Safari，当你开始在搜索框中键入时，一个小的十字会出现在字段的右侧，让你快速清除搜索字段。让我们尝试一个例子，看看它是如何工作的：

< form> < label for="mysearch">搜索网站:< /label> < input type="search" id="mysearch"> < /form>

注：所有主要浏览器，例如Firefox、Chrome、Safari、Opera、internetexplorer10及以上，均支持search输入(即type=” search” )。
input类型teltel输入类型可用于输入电话号码。
浏览器本身不支持tel输入验证。但是，你可以使用placeholder属性帮助用户输入电话号码的正确格式，或者指定一个正则表达式来使用pattern属性验证用户输入。让我们来看一个例子：

< form> < label for="myphone">电话号码:< /label> < input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required> < /form>

注意：任何浏览器目前都不支持对电话号码输入(即type=” tel” )的验证，因为不同国家的电话号码格式差异很大，但它仍然很有用。移动浏览器显示用于输入电话号码的tel输入字段的数字键盘。
input类型time时间输入类型可用于输入时间(小时和分钟)。
浏览器可根据本地系统的时间设置，以12小时或24小时的格式输入时间。

< form> < label for="mytime">选择时间:< /label> < input type="time" id="mytime"> < /form>

警告：Internet Explorer和Safari浏览器不支持输入类型=” time” ，目前支持Chrome、Firefox、Edge和Opera浏览器。
input类型的URLurl输入类型可用于输入url或web地址。
你可以使用多个属性来输入多个URL。另外，如果指定了required属性，浏览器将自动执行验证，以确保输入框中只输入与url标准格式匹配的文本。让我们看看它是如何工作的：