网页布局------form表单
1、基础语法
1 | < form ></ form > |
(1)表单类型:
- email :能够验证当前输⼊的邮箱地址是否合法
- url : 验证URL
- number : 只能输⼊数字,其他输⼊不了,⽽且⾃带上下增⼤减⼩箭头,max属性可以设置为最⼤
- 值,min可以设置为最⼩值,value为默认值。
- search : 输⼊框后⾯会给提供⼀个⼩叉,可以删除输⼊的内容,更加⼈性化。
- range : 可以提供给⼀个范围,其中可以设置max和min以及value,其中value属性可以设置为默
- 认值
- color : 提供了⼀个颜⾊拾取器
- time : 时分秒
- date : ⽇期选择年⽉⽇
- datatime : 时间和⽇期(⽬前只有Safari⽀持)
- datatime-local :⽇期时间控件
- week :周控件
- month:⽉控件
(2)表单属性:
- placeholder :提示信息
- autofocus :⾃动获取焦点
- autocomplete=“on” 或者 autocomplete=“off” 使⽤这个属性需要有两个前提:表单必须提交过、必须有name属性。
- required:要求输⼊框不能为空,必须有值才能够提交。
- pattern=" " ⾥⾯写⼊想要的正则模式,例如⼿机号patte="^(+86)?\d{10}$"
- multiple:可以选择多个⽂件或者多个邮箱
- form=" form表单的ID"
(3)表单事件:
- oninput 每当input⾥的输⼊框内容发⽣变化都会触发此事件。
- oninvalid 当验证不通过时触发此事件。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话