最近在使用input标签,顺便总结一下属性,方便之后查看


1.value属性:

设置输入字段的初始值 

<input type="text" name="place" value="shanghai">

2.readonly

设置输入字段为只读(即不能修改)

<input type="text" name="place" value="shanghai" readonly>

3.disabled

设置输入字段是禁用的(即该元素不可编辑,不可点击,不会提交)

<input type="text" name="place" value="shanghai" disabled>

4.size

设置输入字段的尺寸(注意:以字符进行计算)

<input type="text" name="place" value="shanghai" size="30">

5.maxlength

设置字段允许的最大长度

<input type="text" name="place" value="shanghai" maxlength="30">

6.accept(mime_type)

设置通过文件上传来提交的文件类型

7.alt(text)

设置图像输入的替代文本

8.align(left right top middle bottom)

设置图像输入的对齐方式(不建议使用)

9.checked(true false)

设置input元素首次加载的选中状态

10.type

(button  checkbox  file  hidden  image  password  radio  reset  submit  text)

设置input元素的类型

 


 

HTML5新增的属性

1.autocomplete

设置输入字段是否自动完成(两个值 on 和 off)

<input type="text" name="place" value="shanghai" autocomplete="on">

2.novalidate

设置提交表单数据不验证

<form novalidate></form>

3.autofocus

设置input标签在页面加载时自动获得焦点

<input type="text" name="place" value="shanghai" autofocus>

4.form

设置字段位于HTML表单之外(但仍属于表单) 

<form id="form1">

        place: <input type="text" name="place" value="pudong" form="form1">

</form>

<input type="text" name="place" value="shanghai" form="form1">

5.formaction

设置提交表单时处理该输入控件的文件的URL(会覆盖form标签的action属性) 

适用于 type=“submit” 以及 type=“image”

<form action="form1.php">

        <input type="text" name="place" value="shanghai">

        <input type="submit" formaction="form2.asp">

</form>

6.formenctype

设置把表单数据(form-data)提交到服务器时如何对其进行编码(适用于 method=“post” 的表单)

适用于 type=“submit” 以及 type="image"

<form action="form1.php">

        <input type="text" name="place" value="shanghai" formenctype="multipart/form-data">

        <input type="submit" formaction="form2.asp">

</form>

7.formmethod

用于向action URl发送表单数据(form-data)的HTTP方法(会覆盖form标签的method属性)

适用于 type=“submit” 以及 type="image"

<form action="form1.php" method=“get”>

        <input type="text" name="place" value="shanghai" formmethod="post">

        <input type="submit" formaction="form2.asp">

</form>

8.formnovalidate

设置提交表单时不对input元素进行验证(覆盖novalidate属性),属性值为布尔值

<form action="form1.php" method=“get”>

        <input type="text" name="place" value="shanghai" formnovalidate>

        <input type="submit" formaction="form2.asp">

</form>

9.formtarget

设置规定的名称或关键词指示 提交表单后 在何处显示接收到的响应(覆盖form的target的属性)

值:_blank  _self  _parent  _top  framename (_blank,在新窗口显示目标网页,_self,在当前窗口显示目标网页,_parent,框架网页中当前整个窗口位置显示目标网页,_top,框架网页中在上部窗口中显示目标网页)

<form action="form1.php" method=“get”>

        <input type="text" name="place" value="shanghai">

        打开一个新窗口并显示数据

        <input type="submit" formtarget="_blank">

</form>

10.height和width

设置元素的宽高(仅适用于 type=“image”)

注意:始终规定图像的尺寸。如果浏览器不清楚图像的尺寸,则页面会在页面加载时出现图像闪烁

(alt 属性为用户由于某些原因(比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器)无法查看图像时提供了替代文本。)

<input type="submit" src="submit.gif" alt="Submit" width="48" height="48">

11.min和max

规定元素的最大值和最小值

适用于输入类型为:number/range/date/datetime/datetime-local/month/time/week

Enter a date before 1980-01-01:

        <input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

        <input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):

        <input type="number" name="quantity" min="1" max="5">

12.multiple

设置允许用户在input标签中输入一个以上的值(值为布尔值)

适用于的输入类型:email和file

<input type="file" name="img" min="1" multiple>(接收多个值的文件上传)

13.pattern

检查input标签值的正则表达式(适用于以下输入类型:text、search、url、tel、email、password)

使用全局的title属性对模式进行描述(title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本)

<input type="text" name="img" pattern="[A-Za-z]{3}" title="只能输入三个字母">

14.placeholder

设置输入字段预期值的提示(样本值或者有关格式的简短描述)

注意:该提示会在用户输入值之前输入字段中(使用的输入类型:text/search/url/tel/email/password)

<input type="text" name="place" placeholder="shanghai" >

15.required

设置在提交表单之前必须填写输入字段

<input type="text" name="place" required>

16.step

设置input标签的合法数字间隔(step="2",合法的数字为:-2 0 2 4等)

注意:step可与max和min属性一同使用,创建合法值的范围

<input type="text" name="place" step="2">