表单的输入类型
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.
号码 (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中的外观。
![alt](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/03/1489464542fig_4_number_opera_new.png)
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中不可移动,从而破坏了范围。
![alt](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/03/1489465047fig_4_safari_range_new.png)
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浏览器支持此功能。
![alt](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/03/1489465432fig_4_chrome_color_new.png)
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 pmmonth
: 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设置样式。
![alt](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/03/1489465862fig_4_chrome_calendar_new.png)
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/
表单的输入类型