input的那些type|青训营笔记

93 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的第二天,今天想记录一下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
    用户可以在输入域输入字符,如图:

Snipaste_2022-08-18_22-21-25.png

Snipaste_2022-08-18_22-21-25.png

  • password
    可以用来做密码框,如图:

Snipaste_2022-08-18_22-21-25.png

Snipaste_2022-08-18_22-21-25.png

  • button
    可以用来做按钮,结合value属性来给按钮写上不同的文字说明,如图:

Snipaste_2022-08-18_22-21-25.png

Snipaste_2022-08-18_22-21-25.png

  • reset
    是重置的作用,它的value默认值是“重置”,但也可以改变为自己想要设置的值,点击该类input,被绑定的相关输入框就会清零,从而可以再次输入
  • checkbox
    复选框,可以进行选择,并且支持多选,在表单中,它们的name值需要一致

Snipaste_2022-08-18_22-21-25.png

Snipaste_2022-08-18_22-21-25.png

  • radio
    单选框,在表单中,name值必须相同

Snipaste_2022-08-18_22-21-25.png

Snipaste_2022-08-18_22-21-25.png

  • submit
    提交的作用,在表单中可以使用,点击会将整个表单的内容一起提交上去。
  • file
    可以用来提交文件,value属性无法与该类型的input元素一起使用

总结

input元素在开发中,如果需要用到的话,特别好用,登陆注册模块普遍用到,也特别好掌握,其实还有很多很多type值,上边我只是列举了几种我经常用到的,还有很多新增的属性,如果想要了解的话,可以看看网上的一些资料。