表单的输入类型_HTML5表单：输入类型（第2部分）

表单的输入类型

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版 》一书。 副本在世界各地的商店中都有出售，您也可以在这里以电子书的形式购买。

You can find Part 1 here.

您可以在此处找到第1部分 。

号码 (Numbers)

The number type (type="number") provides an input for entering a number. Usually, this is a spinner box, where you can either enter a number, or click on the up/down arrows in a native browser spinner UI to select a number.

number类型( type="number" )提供用于输入数字的输入。 通常，这是一个微调框，您可以在其中输入数字，或单击本机浏览器微调器UI中的向上/向下箭头以选择一个数字。

Let’s change our quantity field to use the number input type:

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

<label for="quantity">I would like to receive <input type="number" 
↵min="1" name="quantity" id="quantity"> copies of 
<cite>The HTML5 ↵ Herald</cite></label>

Figure 4.8 shows what this looks like in Opera.

图4.8显示了Opera中的外观。

Figure 4.8. The number input seen in Opera

图4.8。 在Opera中看到的数字输入

On many touchscreen devices, focusing on a number input type will bring up a number touch pad (rather than a full keyboard).

在许多触摸屏设备上，专注于number输入类型将调出数字触摸板(而不是完整的键盘)。

The number input has min,max, and step attributes to specify the minimum, maximum, and incremental values allowed. If the step is omitted it defaults to 1. If you would like to allow float values, you must specify a float step, such as 0.1 or the keyword any to allow for any value. Note that some browsers will minimize the width of the number form field for restricted numbers. For example, min="0" max="10" step="1" doesn’t need to be as wide as step="any", where the user could enter the full value of Pi.

输入的number具有min ， max和step属性，以指定允许的最小值，最大值和增量值。 如果省略该step ，则默认为1 。 如果要允许浮点值，则必须指定一个浮点步长，例如0.1或关键字any以允许任何值。 请注意，某些浏览器会将受限制的数字的数字形式字段的宽度最小化。 例如， min="0" max="10" step="1"不需要与step="any"一样宽，用户可以在其中输入Pi的完整值。

警告：谨慎使用number (Warning: Use number with Caution)

( )

There will be times when you may think you want to usenumber, when in reality another input type is more appropriate. For example, it might seem to make sense that a street address should be a number. But think about it: would you want to click the spinner box all the way up to 34154? More importantly, many street numbers have non-numeric portions: think 24½ or 36B, neither of which work with the number input type.

有时您可能会想使用number ，而实际上另一种输入类型更合适。 例如，街道地址应该是数字似乎很有意义。 但是请考虑一下：您是否要一直单击微调框直到34154？ 更重要的是，许多街道号码都包含非数​​字部分：以24½或36B为例，它们都不适合number输入类型。

Additionally, account numbers may be a mixture of letters and numbers, or have dashes. If you know the pattern of your number, use the pattern attribute. Just remember not to use number if the range is extensive or the number could contain non-numeric characters and the field is required. If the field is optional, you might want to use number anyway, or tel in order to prompt the number or telephone keyboard as the default on touchscreen devices.

此外，帐号可以是字母和数字的组合，也可以带有破折号。 如果您知道数字的模式，请使用pattern属性。 请记住，如果范围很广，或者数字可能包含非数字字符，并且必须填写该字段，请不要使用number 。 如果该字段是可选的，则无论如何您都可能要使用number或tel ，以在触摸屏设备上将数字或电话键盘作为默认提示。

范围 (Ranges)

The range input type (type="range") displays a slider control. As with the number type, it allows the min, max, and step attributes. The difference between number and range, according to the spec, is that the exact value of the number is unimportant with range. It’s ideal for inputs where you want an imprecise number; for example, a customer satisfaction survey asking clients to rate aspects of the service they received.

range输入类型( type="range" )显示一个滑块控件。 与数字类型一样，它允许min ， max和step属性。 根据规范， number和range之间的区别在于， number的确切值与range无关紧要。 对于需要不精确数字的输入，它是理想的选择。 例如，一项客户满意度调查要求客户对他们收到的服务的各个方面进行评分。

Let’s change our registration form to use the range input type. We’ll create a field asking users to rate their knowledge of HTML5 on a scale of 1 to 10:

让我们更改注册表格以使用range输入类型。 我们将创建一个字段，要求用户以1到10的等级对他们对HTML5的了解进行评分：

<label for="rating">On a scale of 1 to 10, my knowledge of HTML5
↵is:</label> 
<input name="rating" type="range" min="1" max="10" step="1">

Figure 4.9 shows what this input type looks like in Safari. In this case the step attribute is not required, as it defaults to 1. A negative value for step will break the range by making the thumb immovable in Firefox.

图4.9显示了该输入类型在Safari中的外观。 在这种情况下，不需要step属性，因为它的默认值为1 。 step的负值将使拇指在Firefox中不可移动，从而破坏了范围。

Figure 4.9. The range input type in Safari

图4.9。 Safari中的范围输入类型

The default value of a range is the midpoint of the slider—in other words, halfway between the minimum and the maximum. Including the list attribute with an associated datalist enables creating little notches along the slider path showing the location of the suggested values.

范围的默认值是滑块的中点，换句话说，介于最小值和最大值之间。 通过将list属性与关联的datalist list一起使用，可以沿滑块路径创建一些小的凹口，以显示建议值的位置。

The spec allows for a reversed slider (with values from right to left) if the maximum specified is less than the minimum; however, no browsers currently support this. Additionally, the spec allows for two thumbs with the inclusion of the multiple attribute. No browsers support this either.

如果指定的最大值小于最小值，则规范允许使用反向滑块(值从右到左)。 但是，当前没有浏览器支持此功能。 此外，该规范还允许在包含multiple属性的情况下保留两个大拇指。 也没有浏览器支持此功能。

range is supported in all browsers, starting with Firefox 23, Android 4.2, and Internet Explorer 10. list support on the range input type is currently only found in Chrome 20+, Opera, and Internet Explorer 10+.

range是在所有的浏览器都支持，开始与Firefox 23，Android的4.2和Internet Explorer 10 list上的支持range输入型目前仅在Chrome 20+，Opera和Internet Explorer的10+发现。

色彩 (Colors)

The color input type (type="color") provides the user with a color picker—or at least it does in some browsers, including BlackBerry 10, Firefox 29+, Safari 8+ for desktop, Chrome, Opera, and Android 4.4. WebKit for iOS 8 and Internet Explorer 11 are yet to support the color input type. The color picker returns a lower-case hexadecimal RGB color value, such as #ff3300, with the default value being #000000 (black).

color输入类型( type="color" )为用户提供了一个颜色选择器，或者至少在某些浏览器中，包括BlackBerry 10，Firefox 29+，用于桌面的Safari 8 +，Chrome，Opera和Android 4.4。 适用于iOS 8和Internet Explorer 11的WebKit尚不支持color输入类型。 颜色选择器返回小写的十六进制RGB颜色值，例如#ff3300 ，默认值为#000000 (黑色)。

If you want to use a color input, provide placeholder text indicating that a hexadecimal RGB color format is required, and use the pattern attribute to restrict the entry to only valid hexadecimal color values.

如果要使用颜色输入，请提供占位符文本，指示需要十六进制RGB颜色格式，并使用pattern属性将输入限制为仅有效的十六进制颜色值。

We don’t use color in our form, but if we did, it would look a little like this:

我们不会在表单中使用颜色，但是如果使用了，它将看起来像这样：

<label for="clr">Color: </label> 
<input id="clr" name="clr" type="color" placeholder="#ffffff" 
↵pattern="#(?:[0-9A-Fa-f]{6})">

The resulting color picker is shown in Figure 4.10. Clicking the Other… button brings up a full color wheel, allowing the user to select any hexadecimal color value. If you’re after other colors, use the list attribute with an associated datalist to define each color you want to suggest as individual options. This is currently supported in Blink browsers only.

最终的颜色选择器如图4.10所示。 单击“其他...”按钮将弹出一个全色轮，允许用户选择任何十六进制颜色值。 如果您想使用其他颜色，请使用list属性和关联的datalist list将要建议的每种颜色定义为单独的选项。 目前仅Blink浏览器支持此功能。

Figure 4.10. Chrome’s color picker control for the color input type

图4.10。 Chrome的颜色选择器控件，用于颜色输入类型

日期和时间 (Dates and Times)

There are new date and time input types, some of which are included in the HTML5 specification, as well as a few others that are still listed in the HTML Living Standard and the HTML5.1 draft that may be at risk. The date and time input types made it into the HTML5 W3C Recommendation, while datetime, datetime-local, month, and week are at risk of being dropped. All date and time inputs accept data formatted according to the ISO 8601 standard.

有一些新的日期和时间输入类型，其中一些包含在HTML5规范中，还有一些其他类型仍在HTML Living Standard和HTML5.1草案中列出，可能会带来危险。 date和time输入类型已纳入HTML5 W3C建议书，而datetime ， datetime-local ， month和week则有被删除的风险。 所有日期和时间输入均接受根据ISO 8601标准格式化的数据。

Here are the available date and time input types:

以下是可用的日期和时间输入类型：

• date: comprises the date (year, month, and day), but no time; for example, 2004-06-24.

  date ：包含日期(年，月和日)，但没有时间； 例如2004-06-24。

• time: signifies a time of day using the military format (24-hour clock); for example, 22:00 instead of 10.00 p.m.

  time ：使用军事格式表示一天中的时间(24小时制)； 例如22:00而不是10.00 pm

• month: only includes the year and month; for example, 2012-12.

  month ：仅包括年份和月份； 例如2012-12。

• week: covers the year and week number (from 1 to 52); for example, 2011-W01 or 2012-W52.

  week ：涵盖年和周的数字(从1到52)； 例如2011-W01或2012-W52。

• datetime: includes both the date and time, separated by a “T”, and followed by either a “Z” to represent UTC (Coordinated Universal Time) or by a time zone specified with a + or – character; for example, “2011-03-17T10:45-5:00” represents 10:45 a.m. on the 17th of March, 2011 in the UTC minus five hours time zone (Eastern Standard Time). This value has been removed from the spec and then added back in. It is currently without support.

  datetime ：包括日期和时间，两者之间用“ T”分隔，后跟“ Z”以表示UTC(世界标准时间)或用+或–字符指定的时区； 例如，“ 2011-03-17T10：45-5：00”表示2011年3月17日上午10:45，以UTC减去5小时时区(东部标准时间)。 此值已从规格中删除，然后又重新添加。目前不受支持。

• datetime-local: is identical to datetime, except that it omits the time zone; the main difference is that datetime-local is supported in browsers that support date and time, while datetime is not.

  datetime-local ：与datetime相同，只是它省略了时区。 主要区别在于支持日期和时间的浏览器支持datetime-local，而不支持datetime。

The most commonly used of these types is date. The specifications call for the browser to display date controls. At the time of writing, WebKit for iOS, Chrome 20+, and Opera provide calendar controls for most of these values. Internet Explorer 11, Safari for desktop, and Firefox 37 still do not.

这些类型中最常用的是date 。 该规范要求浏览器显示日期控件。 在撰写本文时，适用于iOS，Chrome 20+和Opera的WebKit为大多数这些值提供了日历控件。 Internet Explorer 11，用于桌面的Safari和Firefox 37仍然没有。

Let’s change our subscription start date field to use the date input type:

让我们将订阅开始日期字段更改为使用date输入类型：

<label for="startdate">Please start my subscription on:</label>
<input type="date" min="1904-03-17" max="1904-05-17" 
↵id="startdate" name="startdate" required aria-required="true" 
↵placeholder="1904-03-17">

Now, we’ll have a calendar control when we view our form in Opera, Chrome, or iOS WebKit, as shown in Figure 4.11. Unfortunately, it’s unable to be styled with CSS at present.

现在，当我们在Opera，Chrome或iOS WebKit中查看表单时，将拥有一个日历控件，如图4.11所示。 不幸的是，目前尚无法使用CSS设置样式。

Figure 4.11. A calendar control

图4.11。 日历控件

For the month and week types, browsers display a similar UI as the date input type, but only allow the user to select full months or weeks. In those cases, individual days are unable to be selected; instead, clicking on a day selects the whole month or week. While datetime-local is supported in these browsers, datetime is not. datetime has been deprecated. month, week, anddatetime-local are at risk as well, but have yet to fall to the same fate. Chrome lost support for datetime in version 26, Opera in version 15, and Safari in iOS7. Instead of using datetime since support should be deprecated, use date and time as two separate input types.

对于month和week类型，浏览器显示的UI与日期输入类型类似，但只允许用户选择完整的月或周。 在这种情况下，无法选择单个日期； 相反，单击一天将选择整个月或整个星期。 虽然这些浏览器支持datetime-local不支持datetime 。 datetime已被弃用。 month ， week和datetime-local也同样处于危险之中，但尚未陷入同样的​​命运。 Chrome在版本26中失去了对datetime时间的支持，在版本15中失去了Opera的功能，而在iOS7中失去了Safari的支持。 由于应该弃用支持，因此不要使用datetime而应将date和time用作两个单独的输入类型。

We recommend including a minimum and maximum when using the date input type. As with number and range, this is done with the min and max attributes.

我们建议在使用date输入类型时包括最小值和最大值。 与number和range ，这是通过min和max属性完成的。

The placeholder attribute that we added to our start date field earlier is made redundant in browsers supporting the datepicker interface, but it makes sense to leave it in place to guide users of IE, Safari, and Firefox until they implement the date and time controls. Until all browsers support the UI of the new input types, placeholders are a good way to hint to your users what kind of data is expected in those fields. Remember, they’ll just look like regular text fields in nonsupporting browsers.

我们先前在开始日期字段中添加的placeholder属性在支持datepicker界面的浏览器中已变得多余，但将其保留在适当的位置以指导IE，Safari和Firefox用户在实现日期和时间控件之前是有意义的。 在所有浏览器都支持新输入类型的UI之前，占位符是一种向用户提示在这些字段中期望什么样的数据的好方法。 请记住，它们在不支持的浏览器中看起来就像常规文本字段。

提示：动态日期 (Tip: Dynamic Dates)

In our example, we hardcoded the min and max values into our HTML. If you wanted the minimum to be the day after the current date—which makes sense for a newspaper subscription start date—this would require updating the HTML every day. The best way to handle it is to dynamically generate the minimum and maximum allowed dates on the server side. A little PHP can go a long way:

在我们的示例中，我们将min和max硬编码到我们HTML中。 如果您希望最小值是当前日期之后的一天(这对于报纸订阅的开始日期是有意义的)，则需要每天更新HTML。 最好的处理方法是在服务器端动态生成最小和最大允许日期。 一点PHP可以走很长一段路：

<?php function daysFromNow($days){ 
  $added = ($days * 24 * 3600) + time(); 
  return date("Y-m-d", $added); 
} 
?>

In our markup where we had static dates, we now dynamically create them with the above function:

在具有静态日期的标记中，我们现在使用上述函数动态创建它们：

<li> 
  <label for="startdate">Please start my subscription on: 
↵</label> 
  <input type="date" min="<?php 
echo(daysFromNow(1)); ?>" 
↵max="<?php echo(daysFromNow(91)); ?>" 
id="startdate" 
↵name="startdate" required aria-required="true"
↵placeholder="<?php echo(daysFromNow(1)); ?>"> 
</li>

This way, the user is limited to entering dates that make sense in the context of the form.

这样，用户就只能输入在表单上下文中有意义的日期。

You can also include the step attribute with these input types. For example, step="7" on date will limit the user to selecting only one day per week: the particular weekday depends on the min if one is present, or is the current day of the week if none is present. On time input, the step attribute must be expressed in seconds, so adding step="900" on the time input type will cause the input to step in increments of 15 minutes.

您还可以在这些输入类型中包括step属性。 例如， date上的step="7"将限制用户每周仅选择一天：特定的工作日取决于min如果有的话)，还是取决于星期几(如果没有)。 在输入time ， step属性必须以秒表示，因此在time输入类型上添加step="900"将使输入以15分钟为增量步进。

翻译自: https://www.sitepoint.com/html5-forms-input-types-part-2/

表单的输入类型