HTML5表格Pt。1：输入类型

HTML5大大改进了表单控件，其中包括许多其他input types，几个new attributes以及少数几个extra elements。

搜索

用于搜索查询文本框，其性能与标准文本输入应完全相同。

<input type="search" name="search">

在HTML5规范中包括此输入类型的主要目的是style之一。除了使您的HTML更加清晰外，您还可以使用CSS属性选择器将此元素作为目标：

input[type=search] { background: url(magnifyingglass.png) right no-repeat) }

电话，URL和电子邮件地址

其他“特殊”文本输入类型包括tel，用于电话号码url，，用于Web地址，和email，用于电子邮件地址。

<input type="tel" name="telephone_number">
<input type="url" name="web_address">
<input type="email" name="email_address">

您可以使用:valid和:invalidCSS3伪类根据这些字段的内容是否有效来设置其样式。

input[type=email]:valid { background: green }
input[type=email]:invalid { background: red }

如果输入的文本被识别为电子邮件地址（例如“ sausage@htmldog.com”），则此示例将电子邮件字段的背景涂成绿色；否则，将其涂成红色（如果用户键入“ sausages？”，则为红色）。例）。

数字和范围

使用可以实现一个简单的文本框，该文本框还允许用户直接输入数字或在数字之间循环（通常使用字段旁边的向上和向下箭头）type="number"。step可以添加另一个属性，以指定每次增加时从数字中增加或减少多少。

如果您还希望数字具有最小值或最大值，则可以进一步使用min和max属性。

<input type="number" name="quantity" step="2" min="20" max="30">

再一次，如果支持，用户将可以直接在字段中键入内容，或者使用箭头在20到30之间循环一次，一次输入两个单位。

• 洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
• 蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
• 适用于新款车载手机支架无线器快充智能自动感应汽车
• 皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴