新！ 我的 44 页电子书“44 分钟学会 CSS” 已经发布了！ 😃

立即获取 →

# input

在网页表单中定义一个交互式控件。

示例: 复制

<input type="text" name="first_name" placeholder="e.g. Alex">

type

定义表单输入的类型。

必需。

"text"

简单的单行文本输入，可以接受任何类型的字符

"email"

与文本输入类似，但浏览器会尝试只允许有效的电子邮件地址。

在移动设备上，将显示电子邮件键盘。

"number"

与文本输入类似，但浏览器会尝试只允许有效的数字。

在移动设备上，将显示数字键盘。

"checkbox"

一个复选框切换，只能处于两种状态之一：选中或未选中。如果选中复选框，则仅提交表单的值。

您可以将复选框包装在标签中，以增加点击区域。

<label>
  <input type="checkbox">
  I accept the terms and conditions
</label>

请注意，点击文本会切换复选框。

"radio"

需要与其他单选按钮结合使用，使其互斥。

您通过类似的name值链接单选按钮

<label>
  <input type="radio" name="newsletter" value="yes">
  Yes
</label>
<label>
  <input type="radio" name="newsletter" value="no">
  No
</label>

请注意，点击一个会取消选择另一个。

"submit"

提交按钮，在点击或按回车键时触发。

name

定义表单中该输入的唯一标识符。它允许服务器在提交时访问每个输入的值。

必需。

"first_name"

name值必须在<form>容器的上下文中是唯一的。

它只能包含字母数字字符a-z A-Z 0-9和一些特殊字符，如- _… 但不能包含空格。

placeholder

定义一个不可选择的占位符文本，该文本仅在输入为空时出现。

最佳实践是为输入提供标签来描述输入，并使用占位符来展示示例

<form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. [email protected]">
</form>

请注意，占位符在获得焦点时会消失，因此需要保留单独的标签。

required

告诉浏览器此输入是必需的。如果为空，将显示警告。

不需要值。

您只需添加required属性，不带任何值

<form>
  <input type="text" required>
</form>

如果您尝试提交包含空文本输入的表单，浏览器应该会显示警告。

disabled

禁用输入。

不需要值。