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之间循环一次,一次输入两个单位。
文章链接:https://www.lilianhua.com/html5-table-pt-1-input-type.html
English (US)
Español (ES)
Português (PT)
Français (CA)
Español (MX)
Español (VE)
Español (CO)
Español (AR)
Português (BR)
Quechua (PE)
Guaraní (PY)
简体中文 (ZH)
繁體中文 (HK)
日本語 (JP)
한국어 (KR)
हिन्दी (HI)
Pilipino (PH)
ไทย (TH)
Tiếng Việt (VN)
Bahasa Melayu (MY)
Bahasa Indonesia (ID)
বাংলা (BD)
اردو (PK)
සිංහල (LK)
ភាសាខ្មែរ (KH)
English (UK)
Français (FR)
Deutsch (DE)
Italiano (IT)
Русский (RU)
Nederlands (NL)
Türkçe (TR)
Polski (PL)
Svenska (SE)
Norsk (NO)
Dansk (DK)
Suomi (FI)
Ελληνικά (GR)
Čeština (CZ)
Magyar (HU)
Română (RO)
Български (BG)
Српски (RS)
Українська (UA)







