HTML <input> 标签

定义和用法

<input> 标签定义输入字段，用户可以在其中输入数据。

<input> 元素是最重要的表单元素。

<input> 元素可以以多种方式显示，具体取决于 type 属性。

以下是不同的输入类型：

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">（默认值）
  • <input type="time">
  • <input type="url">
  • <input type="week">

参阅 type 属性，以查看每种输入类型的实例！

实例

包含三个输入字段的 HTML 表单；两个文本字段和一个提交按钮：

<form action="/action_page.php">
  <label for="fname">名字：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">姓氏：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
</form>

亲自试一试

提示和注释

提示：请始终使用 <label> 标签为以下元素定义标签：

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

属性

属性 值 描述
accept
  • 文件扩展名
  • audio/*
  • video/*
  • image/*
  • 媒体类型

规定通过文件上传来提交的文件的类型。

规定用户可以从文件输入对话框中选择哪些文件类型的过滤器（仅适用于 type="file"）。
alt 文本 规定图像的替代文本（仅适用于 type="image"）。
autocomplete
  • on
  • off
 规定 <input> 元素是否应该启用自动完成。
autofocus autofocus 规定 <input> 元素应在页面加载时应自动获得焦点。
checked checked 规定在页面加载时应预先选中 <input> 元素（适用于 type="checkbox" 或 type="radio"）。
dirname inputname.dir 规定将被提交的文本方向。
disabled disabled 规定应禁用 <input> 元素。
form 表单 id 规定 <input> 元素所属的表单。
formaction URL 规定提交表单时将处理输入控件的文件的 URL（适用于 type="submit" 和 type="image"）。
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 规定将表单数据提交到服务器时应如何对其进行编码（适用于 type="submit" 和 type="image"）。
formmethod
  • get
  • post
 定义用于将数据发送到 action URL 的 HTTP 方法（适用于 type="submit" 和 type="image"）。
formnovalidate formnovalidate 定义在提交表单元素时不应对其进行验证。
formtarget
  • _blank
  • _self
  • _parent
  • _top
框架名称 		规定在何处显示提交表单后收到的响应（适用于 type="submit" 和 type="image"）。
height 像素 规定 <input> 元素的高度（仅适用于 type="image"）。
list datalist_id 引用包含 <input> 元素的预定义选项的 <datalist> 元素。
max
  • 数字
  • 日期
 规定 <input> 元素的最大值。
maxlength 数字 规定 <input> 元素允许的最大字符数。
min
  • 数字
  • 日期
 规定 <input> 元素的最小值。
minlength 数字 规定 <input> 元素中所需的最少字符数。
multiple multiple 规定用户可以在 <input> 元素中输入多个值。
name 文本 规定 <input> 元素的名称。
pattern 正则表达式 规定检查 <input> 元素值的正则表达式。
placeholder 文本 规定描述 <input> 元素预期值的简短提示。
popovertarget 元素 id 规定要调用的弹出框元素（仅适用于 type="button"）。
popovertargetaction
  • hide
  • show
  • toggle
 规定当您单击按钮时弹出框元素会发生什么（仅适用于 type="button"）。
readonly readonly 规定输入字段是只读的。
required required 规定在提交表单之前必须填写输入字段。
size 数字 规定 <input> 元素的宽度（以字符数为单位）。
src URL 规定用作提交按钮的图像的 URL（仅适用于 type="image"）。
step
  • 数字
  • any
 规定输入字段中合法数字之间的间隔。
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 规定要显示的 <input> 元素的类型。
value 文本 规定 <input> 元素的值。
width 像素 规定 <input> 元素的宽度（仅适用于 type="image"）。

全局属性

<input> 标签还支持 HTML 中的全局属性。

事件属性

<input> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

无。

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

相关页面

HTML 教程：

HTML DOM 参考手册：