最常用的表单控件input元素的30个元素属性

2023-09-25 6 0

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"配合使用

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

alt

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

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

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

checked

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

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

专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
<input type="radio" name="radio" value="1" checked>
<input type="radio" name="radio" value="2">
<input type="checkbox" name="checkbox" value="1">
<input type="checkbox" name="checkbox" value="2">
<script>
var oInput = document.getElementsByTagName('input');
for(var i = 0,len = oInput.length; i < len; i++){oInput[i].onmouseover = function(){this.checked = 'checked';}
}    
</script>

disabled

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

[注意1]disabled属性无法与typ

代码编程
赞赏

相关文章

在用form 提交请求时,在请求处理完成后想要在JAVA后台设置返回信息状态展示到页面
深入探讨 Java 类加载器(转)
转载到QQ空间的js实现
web项目中参数传递乱码解决方法
tomcat 类加载时找不到class类文件
CRT工具远程Linux系统服务器的 命令