＜Input /＞输入框及input的相关属性

目录

1、name、type、value、accept、alt、checked、disabled、maxlength、readonly、  size、src、这些属性是input元素的传统元素属性

 2、autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、    placeholder、required、step、width这19个属性是HTML5新增的元素属性

---

1、name、type、value、accept、alt、checked、disabled、maxlength、readonly、size、src、这些属性是input元素的常用元素属性

1.1  name:

　　name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据

        只有设置了name属性的表单元素才能在提交表单时传递它们的值

1.2  type:

        type属性用来规定input元素的类型

        如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type="text"

1.3  value：

        type="button"、"reset"、"submit"用于定义按钮上的显示的文本

　　type="text"、"password"、"hidden"用于定义输入字段的初始值

　　type="checkbox"、"radio"、"image"用于定义与输入相关联的值

　　        type="checkbox"或"radio"必须设置value属性

　　        value属性无法与type="file"的input元素一起使用

1.4  accept:

accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型，然而它只是建设性的，并很可能被忽略，它接受逗号分隔的MIME类型

        该属性只能与type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

1.5  alt:

alt属性为图像输入规定替代文本

        alt属性只能与type="image"的input元素配合使用

<input type="image" src="#" alt="测试图片">

1.6  disabled:

禁用input元素，被禁用的字段是不能修改的

disabled属性无法与type="hidden"的input元素一起使用

<input id="test" disabled value="内容">

1.7  checked:

1.8  maxlength:

maxlength属性规定输入字段的最大长度，以字符个数计

        该属性只能与type="text"或type="password"的input元素配合使用

<input maxlength="6">
<input type="password" maxlength="6">

1.9  readonly:

readonly属性规定输入字段为只读，只读字段是不能修改的

readonly属性可与type="text"或"password"的input元素配合使用

<input id="test" value="内容" readonly>

1.10  size:

        推荐使用CSS来代替它

<input size="1">

1.11  src:　

src属性作为提交按钮显示的图像的URL

        src属性只能且必须与type="image"的input元素配合使用

<form action="#">
    <input name="test">
    <input type="image" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片">
</form> 

2、autocomplete、autofocus、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width等HTML5新增的常用元素属性

2.1  autocomplete：

        浏览器输入表单信息的时候，往往input输入框会记录之前提交的表单信息，容易暴露数据，autocomplete="off"可以清除之前缓存的数据

        IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

<input name="test1" autocomplete="on">
<input name="test2" autocomplete="off"> 

2.2  autofocus:

autofocus属性规定在页面加载时，域自动地获得焦点

　　autofous属性适用于button、input、select和textarea元素

<input name="test2" autofocus>

2.3  required:

required属性规定必须在提交之前填写输入域(不能为空)，用于校验

        IE9-浏览器及safari浏览器不支持

2.4  placeholder:

placeholder属性提供占位符文字

<input type="tel" placeholder="请输入数字" pattern="\d{11}">  

2.5  pattern:

pattern是正则表达式,用于验证input域的

2.6  multiple:

multiple属性规定按住ctrl按键，输入字段可以选择多个值

<input id="test" type="file" multiple>

2.7  step、min、max:

　step属性为输入域规定合法的数字间隔

    min属性规定输入域所允许的最小值 

   max属性规定输入域所允许的最大值 

<input type="number" min="0" max="10" step="0.5" value="6" />

2.8  width、height:

规定image类型的input标签的图像宽度、高度

        该属性只适用于image类型的input标签

<input type="image" src="submit.jpg" width="99" height="99">

2.9  novalidate:

novalidate属性规定在提交表单时不验证form或input域

        IE9-浏览器不支持