HTML5的Form表单输入类型实例分析

本篇内容介绍了“HTML5的FORM表单输入类型实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

 您可能已经熟悉input元素的type属性。这是一个能够决定何种表单输入将呈现给用户的属性。如果它被省略——或者是在旧版浏览器中使用新的输入类型，

尽管浏览器不能识别，但仍可运行：input元素将默认为type=”text”。这就是如今html5表单便于使用的关键。如果您使用新的输入类型，如email或search，旧版浏览器将简单地呈现给用户一个标准的文本字段。

    我们的注册表单目前使用您比较熟悉的10种输入类型中的4种：check-box、text、passWord和submit。在HTML5之前，所有类型的完整列表如下所示：

  button、checkbox、file、hidden、image、password、radio、reset 、submit、text。

    HTML5带给我们的输入类型提供了更多的数据特定相关的用户界面元素以及自带的数据验证。HTML5共有13种新输入类型：

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

    让我们详细看一下这些新类型，并学习如何使用它们。

search

    search输入类型(type=”search”)提供一个搜索字段，是一个一行的文本输入控件，可以输入一个或多个搜索术语。规范说明如下：

    文本状态与搜索状态的区别主要是在格式上：搜索字段平台与常规文本字段平台的不同之处在于，搜索状态可能导致外观与平台搜索字段一致，而不像一个常规的文本字段。

    许多浏览器在设置search输入的样式时，与浏览器或操作系统搜索框风格一致。一些浏览器添加了单击鼠标清除输入的功能。

<form  id= " searchH  method='get">

  <input   type=' search '   id= " s "   name= " s '>

  <input type='submit" value=Search >

</form>

email

   指定一个或多个电邮件地址。它支持布尔硝multiple属性，允许多个逗号分隔的电子邮件地址。

<label  for= " emaiI">My  email  address  is</label>

<input  type='"email"    id='email'   name=email">

    如果您使用iOS设备，变化就会很明湿。当您聚焦电子邮件字段时，iPhone、iPad和iPod都会显示一个电子邮件输入的键盘（有一个@符号的快捷键）。

Firefox、Chrome和Opera还提供电子邮件输入错误信息。

自定义验证信息

    不喜欢提供的错误信息吗？在某些浏览器中，您可以使用．setCustomVal-idity (errorMsg)设置您自己的错误信息。．setCustomValidity仅将您想提供的错误信息当作唯一的参数．如果您想完全删除错误信息，可向．setCustomValidity传递空字符串。

    不幸的是，尽管您可以改变信息的内容，但您不能更改它的外观，至少目前是这样。

URL

    url 输入类型(type=”url”)用于说明网站地址。

<label  for= " url" >My  WEBsite   is   located   at : </label>

<input type='url' id='url' name='url">

    Opera、Firefox和WebKit支持url输入类型，如果URL格式不正确，将会报告输入无效。只有常规的URL格式才能通过骏证。因此，例如，q://example.xyz被认为是有效的，即使q://不是一个真正的协议以及.xyz不是一个真正的顶级网域名称。同样，如果您想使输入的值符合更具体的格式，请在标签（或占位符）提供信息以便使用户了解，并且可以使用pattern属性以确保正确。

tel

    对于电话号码，使用tel输入类型(type=”tel”)。与url和email类型不同。tel类型不会强制执行特定的语法或模式。字母和数字&mdash;&mdash;只要是不是新的一行或回车符的其他任何字符都是有效的。这里有一个很好的理由：世界上各个国家有许多不同类型的有效电话号码，并具有不同的长度和标点符号，所以不可能指定唯一的格式作为标准。例如，在美国，+1(415)555-1212通常被理解为415.555.1212。您可以通过包含使用正确语法的占位符支持一种特殊格式，或红输入类型后用一个示例加以注释。另外，您可以通过使用pattern属性规定一种格式或使用setCustomValidity方法提供客户端验证。

number

    number类型(type=”number”)提供了一个输入数字的输入类型。通常，这是一个“微调”框，在这里您可以输入一个数字或单击向上或向下的箭头来选择数字。

让我们使用number输入类型来更改数量字段：

<label for-"'quantity>l would like to receive <input type='nuiber'

lname="quantity" id-"'quantity '> copies of <cite>The HTML5 Herald

--</cite></label>

    数字输入类型由min和max属性来规定最人和最小允许值。我们强烈推荐您使用这些属性，否则使用向上和向下箭头可能会导致不同的值（非常奇怪），这取决

于浏览器。

    您也可以提供step属性，这样可以通过单击上和下的箭头使数值增加或减少。

range

    range输入类型(type=”range”)在览器中显示一个滚动控件。和数字类型一样，它允许使用min、max和step属性。根据规范，number和range的区别是：在range类型中所输入的具体数

的精确值是不重要的。如果您想得到一个小精确的数字，这是一个理想的输入类型。

<input  type=" range" min="1"  max="10"   name= "rating'   type= " range" >

    step属性的默认值是1，所以它不是必需的。range输入类型的默认值是滚轴的中间点&mdash;&mdash;换句话说，就是最小值和最大值之

间的中间值。规范规定：如果指定的最大值小于最小值，就允许使用反向滚动轴（数值从右到左，而不足从左到右）。

color

    color输入类型(type=”color”)为用户提供了颜色选取器，颜色选取器会返回一个十六进制的RGB颜色值，比如#FF3300。

    如果您想使用color输入提供占位符文本，表明必须使用十六进制RGB颜色格式，井使用pattern属性对其进行限制，只允许输入有效的十六进制颜包值，那么就必须等到完全支持这个输入类型。

    我们不存表单中使用color输入类型，但是，如果采用此输入类型，应使用下

列代码：

<label  for= ' clr">Color:   </label>

<input id-"'clr' name-"'clr type="text' placeholder=-#FFFFFF"

-pattern= "#(? : [0-9A-Fa-f] {6}1 [0-9A-Fa-f] {3}) '   required>

日期和时间

    现在有一些新的Ej期和时间输入类型，包括date、datetime、datetime-local、month、time和week。所有日期和时间输入将接受符合IS09601标准的

数据格式&lsquo;。

Date

    它包括日期（年，月，日），但小包括时间。例如，2004-06-24。

Month

    仪包括年和月。例如．2012-12。

Week

    它包括年和周数（从l到52）。例如，2011-WOI或2012-W52。

Time

    一天的时间，使用军用格式（以24小时记时）。例如，22:00代替10.00pm。

Datetime

    它包含日期和时间，由“T”分隔，在后面跟一个“Z”代表UTC (CoordinatedUniversal Time，世界标准时问)，或由a+或&middot;字符指定的时区。例如，“2010-03-17 T10:45-5:00”表示2011年3月l7日上午10点45分，UTC减去5个小时时区（美国东部标准时问）。

Datetime-local

    除了省略了时区，其他都与datetime 一样。

    这些类型中最常用的是date。规范要求浏览器显示日期控件。

    让我们使用date输入类型改进我们的认购开始日期字段：

<input   type= "date"   min= ' 1904 -03 - 17'   max=' 1904 - 05- 17 " id= " startdate"   name= ' startdate "   required  aria- required= " true " placeholder="1911 -03-17">

“HTML5的Form表单输入类型实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！