网页布局------form表单

 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 当验证不通过时触发此事件。