随笔 - 111  文章 - 0  评论 - 1  阅读 - 30133

网页布局------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 当验证不通过时触发此事件。
 
posted on   昨夜小楼听风雨  阅读(80)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示