这是我参与「第四届青训营」笔记创作活动的第二天,今天想记录一下input标签的一些属性及应用。
input标签的基本属性
- name属性
可以用来标记input,name里边的值相当于input的名字。 - style属性
给input进行美化,可以不用input自带的样式,通过该属性来改变input的外观 - maxlength属性
可以用来指定input元素中可以输入的最大长度 - accept属性
如果type=“file”,可以用该属性来指定允许提交的文件类型,例如.png .xsl .jpg - size属性
该属性值可以表示我们可以看见到的字符数,在type=“password”/“text”比较有用 - placeholder属性
可以用开描述输入框期待被输入的值,当输入框被聚焦并输入字符时,描述语会消失。 - type属性
type的值是比较多的,不同的值使input的功能完全不同,下边来聊聊具体有什么。
input的type属性
text
用户可以在输入域输入字符,如图:
password
可以用来做密码框,如图:
button
可以用来做按钮,结合value属性来给按钮写上不同的文字说明,如图:
reset
是重置的作用,它的value默认值是“重置”,但也可以改变为自己想要设置的值,点击该类input,被绑定的相关输入框就会清零,从而可以再次输入checkbox
复选框,可以进行选择,并且支持多选,在表单中,它们的name值需要一致
radio
单选框,在表单中,name值必须相同
submit
提交的作用,在表单中可以使用,点击会将整个表单的内容一起提交上去。file
可以用来提交文件,value属性无法与该类型的input元素一起使用
总结
input元素在开发中,如果需要用到的话,特别好用,登陆注册模块普遍用到,也特别好掌握,其实还有很多很多type值,上边我只是列举了几种我经常用到的,还有很多新增的属性,如果想要了解的话,可以看看网上的一些资料。