第三章新增表单控件
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="text" id="" value="" /><br>
密码框:<input type="password" id="" value="" /><br>
<!-------------------------下面都是h5新增控件---------------------------------->
数字框:<input type="number" id="" value="" /><br>
邮件框:<input type="email" id="" value="" /><br>
网址框:<input type="url" id="" value="" /><br>
电话框:<input type="tel" id="" value="" /><br>
搜索框:<input type="search" id="" value="" /><br>
拾色器:<input type="color" id="" value="" /><br>
选择区:<input type="range" id="" value="100" max='100' min='0'/><br>
<!--------------------------下面是日期控件--------------------------------------->
<input type="date" id="" value="" /><br>
<input type="time" id="" value="" /><br>
<input type="datetime-local" id="" value="" /><br>
<input type="datetime" id="" value="" /><br>
<input type="month" id="" value="" /><br>
<input type="week" id="" value="" /><br>
<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,作为下拉提示单
<body>
<form>
<!--文本框:<input type="text" id="" value="" placeholder="" autofocus autocomplete="on" name="user"/><br>
密码框:<input type="password" id="" value="" required/><br>
数字框:<input type="number" id="" value="" /><br>-->
<!------------------------------------------------------>
<!--密码框:<input type="text" id="" value="" pattern="^[a-z0-9_-]{6,18}$"/><br>-->
<!--电话框:<input type="tel" pattern="[0-9]{7,12}"/>-->
<!--文本框:<input type="text" id="" value="" maxlength='8'/><br>-->
<!--输入的数字必须是8以下,3以上-->
<!--数字框:<input type="number" id="" value="" min="3" max="8" />-->
区域:<input type="range" id="" value="" min="0" max="100" step="10"/>
<input type="submit" value="提交"/>
</form>
</body>