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可以添加另一个属性,以指定每次增加时从数字中增加或减少多少。

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

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

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

©️李联华的博客网 当前IP地址:44.200.27.215,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/html5-table-pt-1-input-type.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

留下评论

Loading...