必知的技术知识:input的30个属性

简介: 必知的技术知识:input的30个属性

了解HTML表单之input元素的30个元素属性


  form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。最常用的表单控件是input元素


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


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


传统属性


name


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


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


type


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


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


  详细情况移步至此


accept


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


  【注意】该属性只能与type="file"配合使用


?1[/code>input type="file" accept="image/gif,image/jpeg,image/jpg">


alt


  alt属性为图像输入规定替代文本,功能类似于image元素的alt属性,为用户由于某些原因无法查看图像时提供备选信息


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


?1[/code>input type="image" src="#" alt="测试图片">


checked


  checked属性规定在页面加载时应该被预先选定的input元素,也可以在页面加载后,通过javascript进行设置


  【注意】checked属性只能与type="radio"或type="checkbox"的input元素配合使用


?123456789101112[/code>input type="radio" name="radio" value="1" checked>[/code>input type="radio" name="radio" value="2">[/code>input type="checkbox" name="checkbox" value="1">[/code>input type="checkbox" name="checkbox" value="2">[/code>script

disabled


  disabled属性规定应该禁用input元素。被禁用的字段是不能修改的,也不可以使用tab按键切换到该字段,但可以选中或拷贝其文本


  【注意1】disabled属性无法与type="hidden"的input元素一起使用


  【注意2】对于IE7-浏览器必须设置为disabled="disabled",而不可以直接设置disabled,否则使用javascript控制时将失效


?1234567891011[/code>button id="btn1">输入域可用button id="btn2">输入域不可用input id="test" disabled value="内容">[/code>script

readonly


  readonly属性规定输入字段为只读。只读字段是不能修改的,但用户仍然可以使用tab按键切换到该字段,还可以选中或拷贝其文本


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


  【注意】IE7-浏览器不支持使用javascript控制readonly属性


?1234567891011[/code>button id="btn1">输入域只读button id="btn2">输入域可读写input id="test" value="内容" readonly>[/code>script

maxlength


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


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


?12[/code>input maxlength="6">[/code>input type="password" maxlength="6">


size


  size属性对于type="text"或"password"的input元素是可见的字符数;而对于其他类型,是以像素为单位的输入字段宽度


  【注意】由于size属性是一个可视化的设计属性,推荐使用CSS来代替它


?12[/code>input size="1">[/code>input type="password" size="2">


src


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


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


?1234[/code>form action="#"> [/code>input name="test"> [/code>input type="image" src="" width="99" height="99" alt="测试图片">

value


  value属性为input元素设定值。对于不同的输入类型,value属性的用法也不同:


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


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


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


  【注意1】type="checkbox"或"radio"必须设置value属性


  【注意2】value属性无法与type="file"的input元素一起使用


?12345678[/code>button id="btn1//代码效果参考:http://hnjlyzjd.com/xl/wz_25342.html

">1button id="btn2">2input id="test">[/code>script

autocomplete


  autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,显示出在字段中填写的选项


  autocomplete属性适用form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color


  【注意】IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效


?12[/code>input name="test1" autocomplete="on">[/code>input name="test2" autocomplete="off">


autofocus


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


  autofous属性适用于button、input、keygen、//代码效果参考:http://hnjlyzjd.com/xl/wz_25340.html

select和textarea元素

?12[/code>input name="test1">[/code>input name="test2" autofocus>


novalidate


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


  novalidate属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color


  【注意】IE9-浏览器不支持


Height<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false">


  height属性用于规定image类型的input标签的图像高度


  【注意】该属性只适用于image类型的input标签


<h3 id="anchor2-5" style="margin:

相关文章
|
12月前
layui内部表单互动的实战案例:根据radio单选框自动改变input内容
layui内部表单互动的实战案例:根据radio单选框自动改变input内容
132 0
|
4天前
|
Web App开发 移动开发 JavaScript
必知的技术知识:input详解
必知的技术知识:input详解
|
2月前
|
前端开发
UniApp 中的 u-input 属性讲解
UniApp 中的 u-input 属性讲解
324 0
|
2月前
|
Web App开发 移动开发 iOS开发
H5学习之路之Input类型新特性
H5学习之路之Input类型新特性
28 0
|
2月前
|
前端开发
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
169 0
|
2月前
|
前端开发
前端知识笔记(一)———button的type属性
前端知识笔记(一)———button的type属性
121 0
|
前端开发
前端工作总结157-赋值给form对象
前端工作总结157-赋值给form对象
68 0
前端工作总结157-赋值给form对象
|
JavaScript 前端开发
不应该被滥用的 input 属性
前两天接到了一个需求:手机号、身份证、验证码 需要校验,检验规则包括长度、内容。 想法是有一堆,但是不知道好使不好使,我们今天来整理一下咯。先来说说都有什么想法 html 的标签属性 type pattern min、max minlength、maxlength js 的事件监听 value 获取值(vue 使用 v-model) @input 监听改变 接下来就是我们大家都很期待的理想很丰满,现实很骨感环节。
150 0
不应该被滥用的 input 属性
|
容器
「站在上帝的角度」谈谈Element组件结构-Input
「站在上帝的角度」谈谈Element组件结构-Input
|
Web App开发 JavaScript 前端开发
小小标签,强大功能——深藏不露的 <input>
<input> 虽只是一个看似简单的 HTML 表单元素,但它这么一个单一的元素,就有多达 30 多个属性(attribute),相信无论你是个小菜鸟还是像我一样写了 15 年 HTML 的老手,知道这点的时候还是会惊讶不已的。而且如果再加上全局属性那就更多了,例如最重要的 type 属性有超过20个可能的值!可以来简单看看 MDN 文档。
234 0
小小标签,强大功能——深藏不露的 <input>