介绍
<input>元素是所有HTML5元素中最复杂和最强大的元素之一。反过来,type属性决定了给定的<input>元素将如何接受用户数据。
标准属性
在讨论不同的输入类型之前,请注意,每个类型都接受以下常见属性:
autocomplete- 指示哪个自动完成功能适用于输入的字符串,通常设置为on允许自动完成autofocus- boolean 指示输入是否应该自动集中(在页面负载)清单- boolean 指示输入是否应该被禁用形式- 输入的
任何特定类型的属性都记录在该类型的部分中。
<$>[注] **注:**虽然在现代浏览器中得到相当好的支持,但仍有浏览器在HTML5中可能不支持更先进的输入类型。
此外,虽然许多类型包括电子邮件类型等验证,但建议您始终执行服务器侧验证。
文本
1<input type="text">
文本接受以下属性:
maxlength- 被认为是有效的最大字符minlength- 被认为是有效的最小字符模式- 规则表达式被认为是有效的placeholder- 示例文本显示时输入是空的readonly- 布尔式是否输入应该只读大小- 输入应该显示为 多少字符宽的spellcheck- 布尔式到 toggle spellchecking
密码
1<input type="password">
与我们的文本输入一样, 密码类型是一个免费的文本输入,增加了隐藏用户输入的安全性。
密码接受所有额外的属性作为类型,除了拼写检查。
隐藏
1<input type="hidden">
隐藏类型是另一个自由格式的文本字段,但它是不可见的。
隐藏类型没有任何额外的属性,但它确实有另一个功能:
如果您将名称属性设置为_charset_,则输入值将成为提交表单的字符编码的值。
电子邮件地址(es)
1<input type="email">
电子邮件类型提供电子邮件地址格式验证。
除了常见的属性,以及文本类型的属性,电子邮件类型接受一个名为多种的布尔属性,这允许输入接受一个单元列表的电子邮件地址。
号码
1<input type="number">
‘数字’类型限制输入到一个数字(浮点或整数)。在大多数浏览器中,它还提供了增加或减少值的按钮。
为了进一步这一点,大多数移动浏览器都采用这种类型的线索,在输入数据时呈现一个数字盘而不是一个完整的键盘。
数字类型接受所有常见的属性,与文本类型共享位置保持者和 readonly,并引入几个数字特性:
min- 被认为是有效的最小值max- 被认为是有效的最大值step- 点击上下箭头 时使用的间隔
搜索
1<input type="search">
搜索类型实际上是一个文本类型,添加了一个按钮来清除输入的文本,它与正常的文本类型输入共享相同的额外属性。
电话号码
1<input type="tel">
tel类型旨在接受电话号码,但tel类型实际上不会处理电话号码的验证,但是,由于这种类型接受模式属性,我们可以为我们想要的电话号码格式添加验证:
1<input type="tel" pattern="([0-9]{3}) [0-9]{3}-[0-9]{4}">
2<br><small>Format: (800) 555-1212</small>
电话号码类型接受文本类型的所有标准属性,除了拼写检查。
通用资源定位器(URL)
1<input type="url">
与电话号码类型不同,URL类型(LINK0)接受并验证用户输入,预计它要么是空的,要么是正确格式化的绝对URL。
此类型不保证URL实际有效(域解析、网站加载等),并且只是对输入数据的模式进行健全检查:protocol://domainAndSlashesAndSuch。
与我们大多数其他文本输入类型一样,URL类型也接受与我们的文本类型相同的属性,而无需拼写检查。
检查箱
1<input type="checkbox">
checkbox 是一个输入类型,代表一个或多个项目的选择,通常显示为选项列表。
输入本身只显示实际的检查框,而不是任何文本,因此您必须自行处理该部分。
checked- 布尔语表示是否已被检查
无线电按钮
1<input type="radio">
radio类型输入可以被视为检查框的选择一版本。 多个无线电类型输入被视为一个组,并且在该组中只能一次选择一个无线电按钮。
checked- 布尔语表示是否已选择无线电
无线电类型也使用了检查布尔语。
范围
1<input type="range">
范围类型输入类似于数字类型的成熟版本,它代表一个数字值,但向用户呈现一个滑动器来选择其值。
与数字类型一样,范围类型输入除了常见的输入属性之外,还接受相同的min,max和step属性。
色彩
1<input type="color">
您再也不需要浏览互联网,寻找最适合您喜爱的框架的最佳颜色选择器。
颜色类型输入向用户呈现一个按钮,显示当前选择的颜色,并在点击时向用户呈现一个可移动的颜色板,允许他们点击选择颜色,甚至输入六十一色彩代码。
颜色输入类型比我们大多数其他输入类型更为有限,它支持的唯一属性(除了类型)是值。
檔案
1<input type="file">
其中一个更壮观的输入类型是(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)。这种类型的输入使得用户可以轻松地从计算机中选择一个文件或文件,通常是上传到远程服务器。
最近,文件类型的输入被扩展到接受用户摄像头的数据,然后可以传输。
接受- 有效的文件类型(comma-separated,扩展和/或MIME类型)capture- 用于图像或视频输入的来源. 您可以为面向用户/自拍摄像头指定用户和外向摄像头文件- 选定的文件或文件<FileList>或multiple- boolean 表示用户是否可以选择多个文件
按钮
1<input type="button">
非常类似于按钮元素, 按钮类型输入只是一个按钮。
如果你想要一个按钮来做一些事情,你需要附上一个事件处理器或使用提交或重置来获得一个功能的按钮。
按钮类型输入的最重要的属性是值,因为它是按钮本身所显示的(类似于按钮值)。
图片
1<input type="image">
图像输入类型用于您想要有一个按钮,但想要使用图像。
与按钮类型不同,图像有更多的功能,取决于您提供的属性:
alt- 替代文本字符串高度- 像素表示图像的高度src- 图像的源URL宽度- 像素显示图像的宽度
如果你想用它作为表单提交按钮:
formation- 向 提交表单的URL *formenctype- 使用的编码类型,在提交文件时处理formmethod- 提交表单时使用的HTTP方法formnovalidate- boolean 表示是否应该跳过表单验证formtarget- 在哪里加载表单提交结果
重置按钮
1<input type="reset">
重置类型是按钮类型输入的扩展。
由于它是按钮类型的扩展,所以重置类型接受作为按钮文本使用的值。
提交按钮
1<input type="submit">
稍微不那么破坏性, 提交类型输入在点击时会提交当前表单。
日期
1<input type="date">
日期类型输入不仅期望用户以日期格式输入,还提供更新日期的上下按钮和可爱的小日期选择器,用户可以曝光和使用。
<$>[注]
注: 显示的值将始终以基于用户的本地格式显示,但本身的值始终以 CCYY-MM-DD 格式显示。
参数:
min- 最早的日期被认为是有效的max- 最新的日期被认为是有效的readonly- boolean 输入是否应该只读step- 在点击向上和向下箭头 时使用的间隔
时间
1<input type="time">
类似于日期输入, 时间输入类型预计用户输入以时间字符串的格式,并为用户提供向上和向下按钮,以增加和减少小时和分钟值,以及切换(AM/PM)。
在一些浏览器中,一个更现代的体验是以具有小时和分钟滑动器的时间选择器的形式呈现的,以便使事情变得更容易。
min- 最早被认为是有效的时间max- 最晚被认为是有效的时间readonly- 布尔语是否应该只读step- 点击上下箭头时使用的间隔
当地日期和时间
1<input type="datetime-local">
将日期和时间输入并将它们合并成一个输入是下一个逻辑步骤,但不幸的是(‘datetime-local’输入类型)(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local)几乎不像上面提到的那样受支持。
min- 最早的日期和时间被认为是有效的max- 最新的日期和时间被认为是有效的readonly- 布尔语是否输入应该只读step- 在点击向上和向下箭头 时使用的间隔
月
1<input type="month">
月类型输入为日期类型和日期部分提供类似的界面,限制选择到月和年。
一旦支持到位,这将是一个很好的输入类型来接受信用卡的到期日期以及生日。
min- 最早的年月被认为是有效的max- 最晚的年月被认为是有效的readonly- boolean是否输入应该只读step- 在点击向上和向下箭头时使用的间隔
周
1<input type="week">
周类型输入类似于月类型,向用户提供相同的熟悉的日历选择器,但限制选择到特定的周。
min- 最早的年周被认为是有效的max- 最晚的年周被认为是有效的readonly- 布尔语是否输入应该只读step- 在点击向上和向下箭头 时使用的间隔
结论
<input>元素已经走了一段很长的路,扩展到一个完整的(虽然尚未完全支持)用户输入类型套件。对这些新类型的支持正在迅速提高,对于大多数新类型的支持,回到简单的文本输入可能不是理想的,但至少它是相当优雅的。