HTML Input 属性


value属性

value属性指定输入字段的初始值:

实例

<form action="">
  姓名:<br>
  <input type="text" name="name" value="张三">
</form>
运行 »

readonly属性

readonly属性指定输入字段是只读的(不能更改):

实例

<form action="">
  姓名:<br>
  <input type="text" name="name" value="张三" readonly>
</form>
运行 »

disabled属性

disabled属性指定禁用输入字段。

禁用的输入字段不可用且不可点击,并且在提交表单时不会发送其值:

实例

<form action="">
  姓名:<br>
  <input type="text" name="name" value="张三" disabled>
</form>
运行 »

size属性

size属性指定输入字段的大小(以字符为单位):

实例

<form action="">
  姓名:<br>
  <input type="text" name="name" value="张三" size="40">
</form>
运行 »

maxlength属性

maxlength属性指定输入字段的最大允许长度:

实例

<form action="">
  姓名:<br>
  <input type="text" name="name" maxlength="10">
</form>
运行 »

使用maxlength属性时,输入字段将不会接受超过允许的字符数。

maxlength属性不提供任何提示。如果要提示用户,则必须编写JavaScript代码。

注意:输入限制并非万无一失,JavaScript提供了许多添加非法输入的方法。要安全地限制输入,必须由接收端(服务器)进行检查!


HTML5属性

HTML5为<input>添加了以下属性:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

以及<form>的以下属性:

  • autocomplete
  • novalidate

autocomplete属性

autocomplete属性规定表单是否应该启用自动完成功能

启用自动完成功能后,浏览器会根据用户之前输入的值自动完成输入值。

提示:表单可以自动完成"打开",特定输入字段可以"关闭",反之亦然。

autocomplete属性与 <form>和以下 <input>类型一起使用:text,search,url,tel,email,password,datepickers,range和color。

Opera Safari Chrome Firefox Internet Explorer

实例

一个自动填充的HTML表单(和一个输入字段关闭):

<form action="/action_page" autocomplete="on">
  姓名:<input type="text" name="name"><br>
  邮箱: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
运行 »

提示:在某些浏览器中,您可能需要激活自动完成功能才能使其正常工作。


novalidate属性

novalidate属性是<form>属性。

如果form存在novalidate属性,在提交时不会验证表单数据。

Opera Safari Chrome Firefox Internet Explorer

实例

表示提交时不会验证表单:

<form action="/action_page" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
运行 »

autofocus属性

autofocus属性指定输入字段应在页面加载时自动获得焦点。

Opera Safari Chrome Firefox Internet Explorer

实例

当页面加载时,让"name"字段自动获得焦点:

姓名:<input type="text" name="name" autofocus>
运行 »

form属性

form属性指定<input>元素所属的一个或多个表单。

提示:要引用多个表单,请使用以空格分隔的表单ID列表。

Opera Safari Chrome Firefox Internet Explorer

实例

位于HTML表单外部的输入字段(但仍然是表单的一部分):

<form action="/action_page" id="form1">
  姓名: <input type="text" name="name"><br>
  <input type="submit" value="Submit">
</form>

年龄: <input type="text" name="age" form="form1">
运行 »

formaction属性

formaction属性指定在提交表单时将处理输入控件的文件的URL

formaction属性会覆盖<form>元素的action属性

formaction属性与type="submit"type="image"

Opera Safari Chrome Firefox Internet Explorer

实例

带有两个提交按钮的HTML表单,具有不同的操作:

<form action="/action_page">
  姓名: <input type="text" name="name"><br>
  年龄: <input type="text" name="age"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="/action_page2"
  value="以管理员身份提交">
</form>
运行 »

formenctype属性

formenctype属性指定在提交时如何编码表单数据(仅适用于method="post"的表单)。

formenctype属性会覆盖<form>元素的enctype属性。

formenctype属性与type="submit"type="image"

Opera Safari Chrome Firefox Internet Explorer

实例

发送默认编码的表单数据(第一个提交按钮),并编码为"multipart/form-data"(第二个提交按钮):

<form action="/action_page_binary" method="post">
  姓名: <input type="text" name="name"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data方式提交">
</form>
运行 »

formmethod属性

formmethod属性定义用于将表单数据发送到操作URL的HTTP方法。

formmethod属性会覆盖<form>元素的method属性。

formmethod属性可以与type="submit"type="image"

Opera Safari Chrome Firefox Internet Explorer

实例

第二个提交按钮覆盖表单的HTTP方法:

<form action="/action_page" method="get">
  姓名: <input type="text" name="name"><br>
  年龄: <input type="text" name="age"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" value="使用POST提交">
</form>
运行 »

formnovalidate属性

formnovalidate属性会覆盖<form>元素的novalidate属性。

formnovalidate属性可以与type="submit"

Opera Safari Chrome Firefox Internet Explorer

实例

带有两个提交按钮的表单(有和没有验证):

<form action="/action_page">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="提交无需验证">
</form>
运行 »

formtarget属性

formtarget属性指定一个名称或关键字,指示在提交表单后显示收到的响应的位置。

formtarget属性会覆盖<form>元素的target属性。

formtarget属性可以与type="submit"type="image"

Opera Safari Chrome Firefox Internet Explorer

实例

带有两个提交按钮的表单,具有不同的目标窗口:

<form action="/action_page">
  姓名: <input type="text" name="name"><br>
  年龄: <input type="text" name="age"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank"
  value="提交到新窗口">
</form>
运行 »

height和width属性

heightwidth属性指定 <input type="image">元素的高度和宽度。

始终指定图像的大小。如果浏览器不知道大小,则图像加载时页面会闪烁。

Opera Safari Chrome Firefox Internet Explorer

实例

将图像定义为提交按钮,具有高度和宽度属性:

<input type="image" src="img_submit.gif" alt="提交" width="48" height="48">
运行 »

list属性

list属性引用<datalist>元素,该元素包含<input>元素的预定义选项。

Opera Safari Chrome Firefox Internet Explorer

实例

<datalist>中具有预定义值的<input>元素:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
运行 »

min和max属性

minmax属性指定<input>元素的最小值和最大值。

minmax属性使用以下输入类型:number, range, date, datetime-local, month, time and week.

Opera Safari Chrome Firefox Internet Explorer

实例

具有最小值和最大值的<input>元素:

输入1980-01-01之前的日期:
<input type="date" name="bday" max="1979-12-31">

输入2000-01-01之后的日期:
<input type="date" name="bday" min="2000-01-02">

数量(1到5之间):
<input type="number" name="quantity" min="1" max="5">
运行 »

multiple属性

multiple属性指定允许用户在<input>元素中输入多个值。

multiple属性适用于以下输入类型:email,file。

Opera Safari Chrome Firefox Internet Explorer

实例

一个接受多个值的文件上载字段:

选择图像: <input type="file" name="img" multiple>
运行 »

pattern属性

pattern属性指定一个正则表达式,检查<input>元素的值。

pattern属性使用以下输入类型:text, search, url, tel, email, password。

提示:使用全局标题属性来描述帮助用户的模式。

提示:在JavaScript教程中了解有关正则表达式的更多信息。

Opera Safari Chrome Firefox Internet Explorer

实例

一个输入字段,只能包含三个字母(无数字或特殊字符):

国家代码: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="三个字母的国家代码">
运行 »

placeholder属性

placeholder属性指定描述输入字段的预期值的提示(样本值或格式的简短描述)。

在用户输入值之前,提示将显示在输入字段中。

placeholder属性使用以下输入类型:text, search, url, tel, email, password

Opera Safari Chrome Firefox Internet Explorer

实例

带有占位符文本的输入字段:

<input type="text" name="name" placeholder="姓名">
运行 »

required属性

required属性指定在提交表单之前必须填写输入字段。

required属性适用于以下输入类型:text, search, url, tel, email, password, date pickers, number, checkbox, radio, file

Opera Safari Chrome Firefox Internet Explorer

实例

必填输入字段:

用户名: <input type="text" name="usrname" required>
运行 »

step属性

step属性指定<input>元素的合法数字间隔。

示例:如果step ="3",则合法数字可以是-3,0,3,6等。

提示: step属性可与max和min属性一起使用,以创建一系列合法值。

step属性使用以下输入类型: number, range, date, datetime-local, month, time, week。

Opera Safari Chrome Firefox Internet Explorer

实例

具有指定法定数量间隔的输入字段:

<input type="number" name="points" step="3">
运行 »

HTML表单和输入元素

标签 描述
<form> 为用户输入定义HTML表单
<input> 定义输入控件