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软件要自行尝试哦