文本输入字段
文本
注意： HTML 表单文本字段是简单的纯文本输入控件。这意味着您不能使用它们来执行富文本编辑（粗体、斜体等）。您会遇到的所有富文本编辑器都是使用 HTML、CSS 和 JavaScript 创建的自定义小部件。
所有基本文本控件都具有一些共同的行为：
它们可以标记为 readonly（用户不能修改输入值，但它仍与表单的其余数据一起发送）或 disabled（输入值不能修改，也从不与表单的其余数据一起发送）。
它们可以有一个 placeholder；这是出现在文本输入框内的文本，用于简要描述该框的用途。
它们可以在 size（框的物理大小）和 maxlength（可以输入到框中的最大字符数）上受到限制。
它们可以受益于拼写检查（使用 spellcheck 属性）。
注意：
单行文本字段
单行文本字段是使用
注意： 您可以在 GitHub 上找到所有单行文本字段类型的示例，网址为 single-line-text-fields.html（也可在线查看）。
这是一个基本的单行文本字段示例：
html
单行文本字段只有一个真正的限制：如果您输入带有换行符的文本，浏览器会在将数据发送到服务器之前删除这些换行符。
下面的截图显示了文本输入框在默认、聚焦和禁用状态下的样子。大多数浏览器使用控件周围的聚焦环来指示聚焦状态，并使用灰色文本或褪色/半透明控件来指示禁用状态。
本文档中使用的屏幕截图是在 macOS 上的 Chrome 浏览器中拍摄的。这些字段/按钮在不同浏览器之间可能存在细微差异，但基本的高亮显示技术保持相似。
注意： 我们将在下一篇文章 HTML5 输入类型中讨论用于强制执行特定验证约束的 type 属性值，包括颜色、电子邮件和 URL 输入类型。
密码字段
最初的输入类型之一是 password 文本字段类型：
html
下面的截图显示了密码输入字段，其中每个输入字符都显示为圆点。
password 值不会对输入的文本添加任何特殊限制，但它会模糊输入字段中的值（例如，用点或星号），以便其他人无法轻易读取。
请记住，这只是一个用户界面功能；除非您安全地提交表单，否则它将以纯文本形式发送，这对安全性不利——恶意方可能会截取您的数据并窃取密码、信用卡详细信息或您提交的任何其他信息。保护用户免受此影响的最佳方法是通过安全连接（即，位于 https:// 地址）托管涉及表单的任何页面，这样数据在发送之前就会加密。
浏览器认识到通过不安全连接发送表单数据的安全隐患，并发出警告以阻止用户使用不安全的表单。有关 Firefox 实施的更多信息，请参阅 不安全密码。
隐藏内容
另一个原始文本控件是 hidden 输入类型。它用于创建一个对用户不可见的表单控件，但在提交后仍与表单的其余数据一起发送到服务器——例如，您可能希望向服务器提交一个时间戳，说明订单何时下达。由于它是隐藏的，用户无法看到也无法有意编辑其值，它永远不会获得焦点，屏幕阅读器也不会注意到它。
html
如果您创建此类元素，则需要设置其 name 和 value 属性。该值可以通过 JavaScript 动态设置。hidden 输入类型不应具有关联的标签。
其他文本输入类型，如搜索、URL和电话，将在下一教程HTML5 输入类型中介绍。
可选择项：复选框和单选按钮
可选择项是您可以通过单击它们或其相关标签来更改状态的控件。可选择项有两种：复选框和单选按钮。两者都使用 checked 属性来指示小部件是否默认选中。
值得注意的是，这些小部件的行为并非完全与其他表单小部件相同。对于大多数表单小部件，一旦提交表单，所有带有 name 属性的小部件都会发送，即使没有填写值。在可选择项的情况下，它们的值仅在被选中时才发送。如果未选中，则不发送任何内容，甚至不发送它们的名称。如果选中但没有值，则名称会与一个值为 on 的值一起发送。
注意： 您可以在 GitHub 上找到本节的示例，网址为 checkable-items.html（也可在线查看）。
为了最大化可用性/可访问性，建议您将每个相关的项目列表放在一个
中，并使用 提供列表的整体描述。每个单独的 / 通常放置在单选按钮或复选框之前或之后，而单选按钮或复选框组的说明通常是 的内容。请参阅上面链接的示例以获取结构示例。
复选框
复选框是使用
html
相关的复选框项目应使用相同的 name 属性。包含 checked 属性会使复选框在页面加载时自动选中。单击复选框或其关联的标签会切换复选框的开/关状态。
html
Choose all the vegetables you like to eat
以下截图显示了复选框在默认、聚焦和禁用状态下的样子。默认和禁用状态下的复选框显示为选中，而聚焦状态下的复选框未选中，其周围有一个聚焦环。
注意： 任何在加载时带有 checked 属性的复选框和单选按钮都匹配 :default 伪类，即使它们不再被选中。任何当前被选中的都匹配 :checked 伪类。
由于复选框的开-关特性，复选框被认为是切换按钮，许多开发人员和设计师在默认复选框样式的基础上进行扩展，创建了看起来像切换开关的按钮。您可以在此处查看一个实际示例（另请参阅源代码）。
单选按钮
单选按钮是使用
html
多个单选按钮可以绑定在一起。如果它们共享相同的 name 属性值，则它们将被视为同一组按钮。在一个给定组中，一次只能选中一个按钮；这意味着当其中一个被选中时，所有其他按钮都会自动取消选中。当表单发送时，只发送被选中的单选按钮的值。如果没有一个被选中，则整个单选按钮池被视为处于未知状态，不发送任何值。一旦同一组中有一个单选按钮被选中，用户将无法在不重置表单的情况下取消选中所有按钮。
html
What is your favorite meal?
以下截图显示了处于选中状态的默认和禁用单选按钮，以及处于未选中状态的聚焦单选按钮。
实际按钮
单选按钮实际上并不是一个按钮，尽管它的名字如此；让我们继续看看实际的按钮！有三种输入类型会产生按钮：
submit
将表单数据发送到服务器。对于 元素，省略 type 属性（或 type 的无效值）将导致一个提交按钮。
reset
将所有表单小部件重置为其默认值。
button
没有自动效果但可以使用 JavaScript 代码自定义的按钮。
然后我们还有 元素本身。它可以接受 type 属性值 submit、reset 或 button，以模仿上述三种 元素更容易设置样式。
html
Using <input>
Using <button>
Submit this form
Reset this form
Do Nothing without JavaScript
注意： image 输入类型也呈现为按钮。我们稍后也会介绍。
注意： 您可以在 GitHub 上找到本节的示例，网址为 button-examples.html（也可在线查看）。
下面您可以找到每种按钮 类型。
submit
htmlThis is a submit button
reset
htmlThis is a reset button
anonymous
htmlThis is an anonymous button
无论您使用 元素还是 元素允许您在其内容中使用 HTML，这些内容插入在开头和结尾的 标签之间。另一方面，
以下截图显示了按钮在默认、聚焦和禁用状态下的样子。在聚焦状态下，按钮周围有一个聚焦环，而在禁用状态下，按钮显示为灰色。
图像按钮
图像按钮控件的渲染方式与
图像按钮是使用
html
如果图像按钮用于提交表单，此控件不提交其值——相反，它会提交点击图像的 X 和 Y 坐标（坐标是相对于图像的，这意味着图像的左上角代表坐标 (0, 0)）。坐标以两个键/值对的形式发送：
X 值键是 name 属性的值后跟字符串 ".x"。
Y 值键是 name 属性的值后跟字符串 ".y"。
例如，当您在坐标 (123, 456) 处点击图像并使用 get 方法提交时，您会看到这些值附加到 URL 中，如下所示：
urlhttp://foo.com?pos.x=123&pos.y=456
这是一种非常方便的构建“热图”的方法。这些值如何发送和检索在发送表单数据文章中详细介绍。
文件选择器
还有一种早期的 HTML
要创建文件选择器小部件，您可以使用
示例
在此示例中，创建了一个文件选择器，请求图形图像文件。在这种情况下，允许用户选择多个文件。
html
在某些移动设备上，文件选择器可以通过在 accept 属性中添加捕获信息来直接访问设备相机和麦克风捕获的照片、视频和音频，如下所示：
html
下面的截图显示了文件选择器小部件在未选择文件时的默认、聚焦和禁用状态。
通用属性
许多用于定义表单控件的元素都有一些自己的特定属性。然而，有一组属性是所有表单元素通用的。您已经遇到过其中一些，但下面列出了这些通用属性，供您参考：
属性名称
默认值
描述
autofocus
false
这个布尔属性允许你指定页面加载时元素是否应该自动获得输入焦点。文档中只有一个与表单关联的元素可以指定此属性。
disabled
false
此布尔属性表示用户无法与该元素交互。如果未指定此属性，则该元素会从包含元素（例如
）继承其设置；如果没有包含设置了 disabled 属性的元素，则该元素被启用。
form
小部件关联的
