原生表单部件
文本输入框
文本输入框是最基本的表单小部件。这是一种非常方便的方式,可以让用户输入任何类型的数据。我们已经看到过几个简单的例子。
备注:
HTML 表单文本字段是简单的纯文本输入控件。这意味着你不能将它们用作富文本编辑(粗体、斜体等)。你遇到的所有富文本编辑器都是使用 HTML、CSS 和 JavaScript 所创建的自定义小部件。
所有文本框都有一些通用规范:
它们可以被标记为 readonly(用户不能修改输入值)甚至是 disabled(输入值永远不会与表单数据的其余部分一起发送)。
它们可以有一个 placeholder;这是文本输入框中出现的文本,用来简略描述输入框的目的。
它们可以使用 size(框的物理尺寸)和 maxlength(可以输入的最大字符数)进行限制。
如果浏览器支持的话,它们可以从拼写检查(使用 spellcheck 属性)中获益。
备注:
元素是如此特别因为它可以通过简单设置 type 属性,来接收多种类型的数据。它被用于创建大多数类型的表单小部件,包括单行文本字段、没有文本输入的控件、时间和日期控件和按钮。
单行文本框
使用 type 属性值被设置为 text 的 元素创建一个单行文本框(同样的,如果你不提供 type 属性,该属性将被默认设置为 text)。在你指定的 type 属性的值在浏览器中是未知的情况下(比如你指定 type="date",但是浏览器不支持原生日期选择器),属性值也将会回落到 text。
备注:
你可以在 Github 上的 single-line-text-fields.html 找到所有单行文本框类型(你也可以直接看预览版)。
这是一个基本的单行文本框示例:
html
单行文本框只有一个真正的约束:如果你输入带有换行符的文本,浏览器会在发送数据之前删除这些换行符。
以下截图现实了 macOS 上的 Firefox 71 和 Safari 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的文本输入框。
备注:
HTML5 通过为 type 属性增加特殊值增强了基本单行文本框。这些值仍然将 元素转换为单行文本框,但它们为字段添加了一些额外的约束和特性。例如,URL 和 数值类型的约束,我们将会在下一篇文章中介绍:HTML5 input 类型。
密码框
通过设置 type 属性值为 password 来设置该类型框:
html
它不会为输入的文本添加任何特殊的约束,但是它会模糊输入到字段中的值(例如,用点或星号),这样它就不能被其他人读取。
请记住,这只是一个用户界面特性;除非你安全地提交你的表单,否则它会以明文发送,这不利于安全——恶意的一方可能会截获你的数据,窃取你的密码、信用卡信息,或者你提交的其他任何东西。保护用户不受此影响的最佳方式是在安全连接上托管任何涉及表单的页面(例如:https://……地址),使得数据在发送之前就已加密。
现代浏览器认识到在不安全的连接上发送表单数据所带来的安全影响,并且已经实现了警告,以阻止用户使用不安全的表单。有关 Firefox 实现的更多信息,请参见不安全的密码。
隐藏内容
另一个原生的文本框控件是 hidden input 类型。它被用于创建对用户不可见的表单部件,但在发送表单时,会与其他的表单数据一起被发送到服务器——例如,你可能希望向服务器提交一个时间戳,说明订单是何时产生的。因为它是隐藏的,所以用户看不到也不能简单地修改该值,它将永远不会获得焦点,屏幕阅读器也不会注意到它。
html
如果你创建了这样一个元素,就需要设置它的 name 和 value 属性。元素的值可以通过 JavaScript 动态设置。hidden input 类型不应有关联的标签(label 元素)。
HTML5 中添加了其他的文本输入类型,如:search、url 和 tel。这些内容将在下一篇文章 HTML5 input 类型中介绍。
可选中项:复选框和单选按钮
可选中项是可以通过单击它们来更改状态的小部件。有两种可选中项:复选框和单选按钮。两者都使用 checked 属性,以指示该部件的默认状态:“选中”或“未选中”。
值得注意的是,这些小部件与其他表单小部件不一样。对于大多数表单部件,一旦表单提交,所有具有 name 属性的小部件都会被发送,即使没有任何值被填。对于可选中项,只有在勾选时才发送它们的值。如果他们没有被勾选,就不会发送任何东西,甚至连他们的名字也没有。而在它们被勾选且没有提供值(value)时,将会发送名字和缺省值 on。
备注:
你可以在 Github 上看到 checkable-items.html(你也可以直接看预览版)。
为了获得最大的可用性和无障碍(无障碍),建议你在