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 参考手册: