HTML常用标签2.0

151 阅读2分钟

form标签

作用

发送GET或POST请求,然后刷新页面。做用户可填写、编辑的HTML表单。

属性

  • action  指向后台相关数据接收的链接
  • autocomplete  表单自完成功能
  • method  方法指请求的方法是GET或POST,非常重要
  • target  跟a链接一样,表明打开链接的方式,本页或新页打开

事件

  • onsubmit  判定用户是否点击提交

input标签

作用

让用户input,再把数据传送给后台

属性

  • 类型type
    • botton
    • checkbox
    • password
    • file
    • radio
    • search
    • submit
    • text

等等,表单种类繁多,不同的type决定其不同的外观和功能,建议把常用type都做出来自己尝试

  • 其他属性
    • name 提交给后台的数据变量名
    • autofocus / checked / disabled / value / placeholder
    • maxlength / pattern 等等,具体用法详见MDN文档

事件

  • onchange  用户改变输入框内容时
  • onfocus  输入框获取光标焦点时
  • onblur  失去焦点时

个人理解,input元素可以说是与用户交互,跟后台数据关联最紧密的元素,需要重点熟练掌握。

其他类似输入标签

类似的用户输入型标签还有select option, textarea, label等标签。

注意事项

  • 一般不监听input的click事件
  • form里的input要规定有name,才能给后台提交数据
  • form里要放一个type = submit才能触发submit事件
  • type = file时,需要加multiple属性才能允许用户上传多个文件,否则是覆盖

其他标签

标签列

  • video
  • audio
  • canvas  重点关注
  • svg

注意事项

这些标签的兼容性一定要查看文档,可能在不同平台存在兼容问题,使用要小心

Tips

快速创建批量标签的方法!

带类名div有一种快速创建法

.a+.b+.c+.item

或者用.a>.b生成父子关系

生成一系列内容自动编码的元素

div.item{$}*10

内容从1~10自动生成

类似写法如果想生成批量属性也可

div.item[tabindex=”$”]*10

非常有用的小技巧,快速创建批量标签,不过要注意是VS code亲测可行,其他IDE软件要自行尝试哦