html5表单元素

新增表单元素

新增元素

url输入域：提交时默认进行格式验证，输入不合法弹出提示且无法提交；移动端：.com 键盘变化
email域：提交时默认进行格式验证，输入不合法弹出提示且无法提交；移动端：@ 键盘变化
search域：
tel域：电话号码输入域 移动端：数字键盘变化
number域：数值输入域
value 初始值
min最小值
max最大值
step步长（合法输入间隔）
range域：一定范围内的数值输入域（滑块）
color域：取色器

<body>
<form action="#">
    <input type="url" name="userurl"/><br/>
    <input type="email" name="usere"/><br/>
    <input type="search"/><br/>
    <input type="tel"/><br/>
    <input type="number" value="10" min="0" max="20" step="2"/><br/>
    <input type="range" value="5" min="1" max="10" step="1"/><br/>
    <input type="color" /><br/>
</form>
</body>
时间选择器
date：时间日期选择器
datetime：手动输入一个日期和时间
datetime-local：本地时间：选择年、月、日、 小时、分钟
month：选择年、月
time：选择 小时、分钟
week：选择年、周
datalist：选项列表

<body>
<form action="#">
<input type="date"/><br/>
<input type="datetime"/><br/>
<input type="datetime-local"/><br/>
<input type="month"/><br/>
<input type="time"/><br/>
<input type="week"/><br/>
#选项列表
<input id="myCar" list="cars"/>
<datalist id="cars">
    <option value="WEB"></option>
    <option value="ASD"></option>
</datalist>
</form>
</body>
新增属性

max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔
placeholder 输入提示占位符（提示语）

autocomplete="on" 开启 用户输入时显示选项列表（用户输入的历史选项）
off 关闭

autofocus：自动获取焦点（页面加载完成后，指定某个表单元素处于获取焦点状态）（默认输入处）
form 规定表单元素所归属的表单（form="form标签的id"）
list 绑定列表元素
multiple 允许多个值，适用于： email file （文件多个上传）

pattern 模式验证（正则验证）， 提交时进行表单验证
pattern="[0-9]" //只允许输入0-9的数字

required 不能为空，提交时进行表单验证，不能为空

#max，min，value
<input type="number" max="100" min="0" value="50"/><br/>

#placeholder
<input type="text" placeholder="请您输入"><br/>
<input type="submit" value="提交"/><br/>

#autocomplete
<input type="text" name="usere" autocomplete="on"/><br/>

#autofocus
<form action="#">
    用户名： <input type="text"/>
    密码： <input type="text" autofocus>
    <input type="submit" value="提交"/>
</form>

#form  
<form action="#" id="form1">
    <input type="text" name="username"/>
</form>
<input type="reset" form="form1">

#list
<form action="#">
    <input type="url" list="urlList" name="weblink">
    <datalist id="urlList">
        <option label="百度" value="http://www.baidu.com"></option>
        <option label="新浪" value="http://www.sina.com"></option>
        <option label="搜狐" value="http://www.sohu.com"></option>
    </datalist>
</form>

#multiple
<form action="#">
    <input type="email" name="usere" multiple/>
    <input type="file" multiple/>
    <input type="submit"value="提交">
</form>

#pattern
<form action="#">
    <input type="text" name="usere" pattern="[0-9]"/>
    <input type="submit" value="提交">
</form>

#required
<form action="#">
    Name: <input type="text" name="username" required/>
    <input type="submit" value="提交">
</form>
posted @ 2020-10-08 17:14  qqaazzhf  阅读(81)  评论(0)    收藏  举报