版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/86646144
新增类型:
<form action="">
用户名:<input type="text"><br>
密码:<input type="password"><br>
<!--email 提供了默认的电子邮箱的完整验证-->
邮箱:<input type="email"><br>
<!--tel 并不是来实现验证,本质是为了能够在移动端打开数字键盘,限制用户输入数字-->
电话:<input type="tel"><br>
<!--url 验证只能输入合法的网址-->
网址:<input type="url"><br>
<!--number:只能输入数字(包含小数点),不能输入其他的字符
max:最大值
min:最小值
value:默认值-->
数量:<input type="number" value="10" max="100" min="0"><br>
<!--search:提供更人性化的输入体验,可以一键删除输入内容-->
搜索:<input type="search"><br>
<!--range:提供滑动杆来选取范围-->
范围:<input type="range" max="100" min="0" value="30"><br>
<!--color:用于选择颜色-->
颜色:<input type="color"><br>
<!--时间日期相关-->
<!--time:时间:时分秒-->
时间:<input type="time"><br>
<!--date:日期:年月日-->
日期:<input type="date"><br>
<!--datetime-local:年月日 时分秒-->
时间日期:<input type="datetime-local"><br>
月份:<input type="month"><br>
星期:<input type="week"><br>
<input type="submit" value="提交">
</form>
新增属性:
<form action="" id="myForm">
<!--placeholder:占位文本提示-->
<!--autofocus:自动获取焦点-->
<!--autocomplete:自动完成:on-打开,off:关闭
1、必须成功提交一次
2、当前添加autocomplete的元素必须有name属性-->
用户名:<input type="text" placeholder="请输入用户名" name="name" autofocus autocomplete="on" required><br>
<!--required:必须输入,否则阻止提交-->
<!--pattern:正则表达式验证-->
手机号:<input type="tel" name="tel" required pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"><br>
<!--multiple:
1、可以选择多个文件
2、对email有默认验证,它允许输入多个邮箱地址,以逗号分隔-->
文件:<input type="file" name="file" multiple><br>
邮箱:<input type="email" name="email" multiple><br>
<input type="submit">
</form>
<!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候,也会将当前表单input提交-->
地址:<input type="text" name="address" form="myForm">
新增元素:
注意:由于不同浏览器兼容不一样,所以用的不多,只要了解就可以了
<form action="">
<!--专业:
<select name="" id="">
<option value="1">10</option>
<option value="2">20</option>
<option value="3">30</option>
</select>-->
<!--需求:不仅可以选择,还应该可以输入-->
<!--建立输入框与datalist的关联 list="datalist的id号"-->
专业:<input type="text" list="num"><br>
<!--通过datalist创建选择列表-->
<datalist id="num">
<!--创建选项值:value:具体的值 label:提示信息,辅助值-->
<option value="1" label="10"></option>
<option value="2" label="20"></option>
<option value="3" label="30"></option>
</datalist>
网址:<input type="url" list="url">
<datalist id="url">
<!--如果input输入框的type类型是url,那么value值必须添加http://-->
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.google.com"></option>
<option value="www.google.com"></option>
</datalist>
<input type="submit">
</form>
<form action="">
用户名:<input type="text" name="user"><br>
密码:<input type="password" name="psw"><br>
加密:<keygen></keygen><br>
<input type="submit">
</form>
<!--显示输出信息:只能显示不能修改
1.语义性更强
2.值需要你去设置,不能自动计算-->
<output>总金额:¥20</output>
新增事件:
<form action="">
用户名:<input type="text" name="userName" id="userName" required><br>
电话:<input type="tel" name="tel" id="tel" required pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"><br>
<input type="submit">
</form>
window.onload=function () {
/*1.oninput:监听当前指定元素内容的改变:只要内容改变(添加内容,删除内容),就会触发这个事件*/
document.getElementById('userName').oninput=function () {
console.log(123);//123
};
/*onkeyup:键盘弹起的时候触发:每一个键的弹起都会触发一次(注意:鼠标复制的值不触发,ctrl+v复制进的值触发两次)*/
document.getElementById('userName').onkeyup=function () {
console.log(456);//456
};
/*oninvalid:当验证不通过的时候触发*/
document.getElementById('tel').oninvalid=function () {
console.log('请输入合法的11位手机号');//请输入合法的11位手机号
/*设置默认提示信息*/
this.setCustomValidity('请输入合法的11位手机号');
}
}
进度条:
<!--max:最大值
value:当前进度值-->
<progress max="100" value="50"></progress>
<!--度量器:衡量当前进度值-->
<!--high:规定的较高的值
low:规定的较低的值
max:最大值
min:最小值
value:当前度量值-->
<meter max="100" min="0" high="60" low="40" value="30"></meter>
<meter max="100" min="0" high="60" low="40" value="50"></meter>
<meter max="100" min="0" high="60" low="40" value="70"></meter>