HTML表单常用标签和常用属性 原创 阁主 2023-07-11 17:25:20 阅读 572 次 评论 0 条 摘要:简单记录一下Emmet语法、常用的form标签和常用的form搭配属性。 ## Emmet语法 1. 结构: `!` 2. 内容:`{text}` 3. 属性:`[attr],#id,.class` 4. 重复: `*` 5. 父子: `>` 6. 兄弟: `+` 7. 父级: `^` 8. 分组: `(emmet)` 9. 序号: `$,$@,$@-n` ## 常用标签 1. ``: 表单控件的容器 2. ``: 表单控件分组容器 3. ``: 控件标签名称 4. ``: 输入控件,类型由 type 属性决定 5. `+`: 下载列表框 6. `++`: 预定义列表框 7. ``: 文本域(多行文本框) 8. ``: 按钮,默认同步提交(type="submit") ## 常用属性 1. `form.id`: 表单引用 2. `form.action`: 表单处理脚本 3. `form.method`: 表单提交方式(GET/POST) 4. `form.enctype`: 表单数据编码方式 5. `form.onsubmit`: 表单提交事件 6. `input.type`: 输入控件类型 7. `input.type="text"`: 单行文本框(默认) 8. `input.type="email"`: 邮箱控件 9. `input.type="password"`: 密码控件(密文) 10. `input.type="number"`: 数值控件 11. `input.type="date"`: 日期控件 12. `input.type="color"`: 拾色器 13. `input.type="url"`: URL 控件 14. `input.type="search"`: 搜索框控件 15. `input.type="hidden"`: 隐藏域控件 16. `input.type="file"`: 文本域控件 17. `input.type="radio"`: 单选按钮 18. `input.type="checkbox"`: 复选框 19. `select.name+option.value`: 下拉列表框 20. `input.list+datalist.id`: 预定义列表框 21. `textarea.cols/rows`: 文本域(多行文本框) 22. `button.type`: 按钮(默认提交:type="submit") ## 代码示例 下面代码是一些简单的常用经典方案。 ```html 表单元素-注册 新用户注册 用户名: 邮箱: 密码: 查看 年龄: 岁 生日: 性别: 男 女 保密 爱好: 旅游 编程 摄影 游戏 学历: 中学 大学 大学 博士 提交 ``` 本文地址:https://www.mainblog.cn/318.html 版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处! 免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。 PREVIOUS:HTML代码图片地址直接在浏览器上可以打开,但是在img标签请求404错误 NEXT:CSS选择器 盒模型学习笔记 文章导航