Input的属性以及HTML5新增的属性

最近在使用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">