移动端第三章新增表单控件

科技2022-07-16 131

新增表单控件

1：表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式 url: 提交表单时检测值是否是一个url格式 date: 年-月-日格式的控件 time: 时:分格式的控件 datetime: 年-月-日时:分格式的控件（UTC时间） datetime-local: 年-月-日时:分格式的控件（本地时间） month: 年-月格式的控件 week: 年-周数格式的控件 number: 数字输入框 <input type="number" name="" id="" value="60" max="100" min="0" /> range: 选择区域 <input type="range" name="" id="" value="60" max="100" min="0" /> tel: 电话输入框 search: 用于搜索 color: 调用系统选色器

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form>        区域：<input type="range" id="" value="" min="0" max="100" step="10"/> <input type="submit" value="提交"/> </form> </body> </html>

2：新增控件属性：

placeholder: 占位符，输入框提示信息 <input type="text" autofocus placeholder=''/> required: 该input为必填项 autofocus: 在页面加载时，域自动地获得焦点 autocomplete="off/on":可以记录输入信息必须有name属性必须提交过 off==>关闭 on==>打开 <input type="tel" name="user" id="" value="" autocomplete="on"/> pattern: 正则验证 <input type="tel" pattern="[0-9]{7,12}"/> min/max: input能输入的最小/最大字节的长度 step: 针对number和range类型，每次递增step的值 list: 指定一个datalist，作为下拉提示单

Processed: 0.013, SQL: 8