Html input属性| 21xrx.com

value 属性

给input字段指定初始值:

例子

<form action="">
姓氏:<br>
<input type="text" name="firstname" value="刘">
<br>
名字:<br>
<input type="text" name="lastname" value="大">
</form>

readonly 属性

指定input字段为只读模式(不能改变值):

例子

<form action="">
姓氏:<br>
<input type="text" name="firstname" value="刘" readonly>
<br>
名字:<br>
<input type="text" name="大">
</form>

readonly属性不需要属性值.等同于这样写readonly="readonly".

disabled 属性

disabled属性指定input字段为禁用状态.

被禁用的元素不能用也不能单击.

被禁用的元素不会被表单提交.

例子

<form action="">
姓氏:<br>
<input type="text" name="firstname" value="刘" disabled>
<br>
名字:<br>
<input type="text" name="lastname">
</form>

disabled属性不需要属性值.等同于这样写disabled="disabled"

size 属性

size属性指定input元素的长度(单位为字符):

例子

<form action="">
名字:<br>
<input type="text" name="firstname" value="刘" size="4">
<br>
姓氏:<br>
<input type="text" name="lastname">
</form>

maxlength 属性

maxlength属性指定input字段可输入字符最大数量:

例子

<form action="">
姓氏:<br>
<input type="text" name="firstname" maxlength="10">
<br>
名字:<br>
<input type="text" name="lastname">
</form>

用maxlength属性,可限制input字段输入的字符数量,多余的字符将被忽略:

这个属性没有提供任何提示信息.如果你想提示用户,你必须写JavaScript代码.

input显示并不是万无一失的.JavaScript提供了许多方法来添加非法的input元素. 为了安全的限制输入,必须在服务端进行检查

HTML5 属性

HTML5给<input>元素新增加了下面的这些属性:

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

<form>元素新增加的属性有:

autocomplete
novalidate

autocomplete 属性

autocomplete属性指定表单或input字段是否应该自动填充数据.

当autocomplete的属性值为on,浏览器会根据用户之前输入的值来自动填充字段.

提示:autocomplete属性有两个"on"和"off",前者是自动填充,后者是不自动填充.

autocomplete属性用于<form>元素和这些<input>类型:text, search, url, tel, email, password, datepickers, range 和 color.

例子

<form action="action_page.php" autocomplete="on">
  姓氏:<input type="text" name="fname"><br>
  名字: <input type="text" name="lname"><br>
  邮件: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

提示:在一些浏览器你或许需要开启autocomplete函数才能正常使用.

novalidate 属性

novalidate属性是<form>的属性.

当这个属性出现时,表单提交时将不会验证输入的数据是否合法.

例子

表单提交时不会验证表单数据:

<form action="action_page.php" novalidate>
  邮件: <input type="email" name="user_email">
  <input type="submit">
</form>

autofocus 属性

autofocus属性是一个布尔属性

拥有这个属性的元素,页面加载时<input>元素会自动获取光标

例子

当页面加载时input字段会自动获取光标:

姓氏:<input type="text" name="fname" autofocus>

form 属性

form属性给<input>元素指定多个归属表单:

提示:要指定多个表单,用空格把表单id隔开.

例子

input字段在form元素外面(但还是表单的一部分):

<form action="action_page.php" id="form1">
  姓氏: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>

名字: <input type="text" name="lname" form="form1">

formaction 属性

formaction属性指定文件的URL地址,当表单提交时input元素将会处理.

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

formaction属性用于类型为type="submit"和type="image"的元素.

例子

有两个提交按钮和不同的action属性的表单:

<form action="action_page.php">
  姓氏: <input type="text" name="fname"><br>
  名字: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="管理员提交">
</form>

formenctype 属性

formenctype属性指定表单提交表单数据到服务器时该怎么编码(只有当form的mentod="post"才有效).

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

formenctype属性只能用于类型属性为type="submit"和type="image"的元素.

例子

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

<form action="demo_post_enctype.asp" method="post">
  姓氏: <input type="text" name="fname"><br>
  <input type="submit" value="默认编码提交">
  <input type="submit" formenctype="multipart/form-data"
  value="用'Multipart/form-data'编码提交">
</form>

formmethod 属性

formmethod属性定义用什么HTTP方式发送表单数据到指定URL.

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

formmethod属性能用于type属性为type="submit"或type="image"的元素.

例子

第二个提交按钮会覆盖掉表单的method属性:

<form action="action_page.php" method="get">
  姓氏: <input type="text" name="fname"><br>
  名字: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="以post方式提交">
</form>

formnovalidate 属性:

novalidate属性是一个布尔属性.

novalidate属性指定表单提交时<input>元素不应该验证.

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

formnovalidate属性能用于类型为type="submit"的元素.

例子

有两个提交按钮的表单(有或没有validate属性):

<form action="action_page.php">
  邮件: <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"的元素.

例子

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

<form action="action_page.php">
  姓氏: <input type="text" name="fname"><br>
  名字: <input type="text" name="lname"><br>
  <input type="submit" value="普通提交">
  <input type="submit" formtarget="_blank"
  value="打开一个新窗口">
</form>

height和width属性

height和width属性指定<input>元素的高度和宽度.

height和width属性只能用于<input type="image">.

要始终指定图片的大小.如果浏览器不知道大小,当加载图片时页面会闪烁.

例子

定义一张图片作为提交按钮,并设置了height和width属性:

<input type="image" src="/public/images/example_one.jpg" alt="Submit" width="48" height="48">

list 属性

list属性关联到一个<datalist>元素,<datalist>元素包含了预定义好的选项给<input>元素.

例子

<input>元素和预定义好的<datalist>值:

<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属性

min和max属性指定<input>元素可接收的最小值和最大值.

min和max属性用于这些输入类型:number, range, date, datetime, datetime-local, month, time和week.

例子

<input>元素和预定义好的<datalist>值:

输入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.

例子

<input>元素和预定义好的<datalist>值:

选择图片: <input type="file" name="img" multiple>

pattern 属性

pattern属性指定一个正则表达式来验证<input>元素的值

pattern属性用于这些输入类型:text, search, url, tel, email和password.

提示:用标题属性描述正则表达式来帮助用户.

提示:在我们的JavaScript教程学习更多关于正则表达式的知识.

例子

只能输入三个字母的<input>元素(没有数字和特殊字符):

国家标识码: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder属性

placeholder属性指定一个提示来描述输入字段应该输入什么(一个样本值或一个简单的格式描述)

当用户输入值之前提示信息会一直显示在输入字段里.

placeholder属性用于这些输入类型:text, search, url, tel, email和password.

例子

带有placeholder文字的输入字段:

<input type="text" name="fname" placeholder="姓氏">

required 属性

required属性是一个布尔属性.

required属性指定一个输入字段为必输项,不然提交不了.

required属性用于这些输入类型:text, search, url, tel, email, password, date pickers, number, checkbox, radio和file.

例子

一个必输入字段:

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

step 属性

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

例如:如果step="3",合法数字应该是-3,0,3,6等等.

提示:step属性可以和max和min属性一起使用来创建一个合法的值区间.

step属性用于这些输入类型:number, range, date, datetime, datetime-local, month, time和week

例子

一个指定了合法数字间隔的输入字段:

<input type="number" name="points" step="3">

HTML input属性

value 属性

例子

readonly 属性

例子

disabled 属性

例子

size 属性

例子

maxlength 属性

例子

HTML5 属性

autocomplete 属性

例子

novalidate 属性

例子

autofocus 属性

例子

form 属性

例子

formaction 属性

例子

formenctype 属性

例子

formmethod 属性

例子

formnovalidate 属性:

例子

formtarget 属性

例子

height和width属性

例子

list 属性

例子

min和max属性

例子

multiple 属性

例子

pattern 属性

例子

placeholder属性

例子

required 属性

例子

step 属性

例子

评论区