一，h5 新增表单类型
•email 邮箱地址
•url 网络地址
•number 数字框
•range 滑块
•Date pickers (date, month, week, time, datetime, datetime-local) 日期时间框
•search 搜索框
•color 颜色选择苯环
二，新增表单属性
•autocomplete 自动完成(同name的input标签提交过数据之后，将记录提交的值以供自动完成)
•autofocus 让表单中的某个元素在页面加载完成之后自动获得焦点
•form 允许在form标签以外的input标签归纳到指定form标签
•form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
重写form标签中的相关属性
formtarget表单重写表单提交的target属性
_blank 表示在新的窗口的打开
可以写某个框架iframe的name属性值
•height 和 width 控制input标签的style.Width和style.Height属性
•list 在input标签中引用datalist列表的id值
•min, max 和 step 用于number、range标签，控制最小值、最大值、单次的滑动值
•multiple 用于email、file标签中
允许file标签一次性选择多个文件进行上传
•pattern (regexp) input标签值的正则验证表达式
•placeholder 在input标签没空值时提示文本
•required 表示input标签是必填项
新增全局属性
•contenteditable 允许某个标签中内容可以被编辑
•data-xxx-xxx 自定义扩展属性
三，code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
作者：echo lovely
时间：2020-07-29
描述：my work -> 案例demo
-->
</head>
<body>
<fieldset>
<legend>datalist</legend>
<input type="text" list="myList"/> <!-- 利用id绑定datalist -->
<datalist id="myList">
<option label="xxxHub" value="github.com"></option>
<option value="zhihu.com"></option>
<option value="bilibili.com"></option>
</datalist>
</fieldset>
<fieldset>
<legend>required</legend>
<form>
<input type="text" required="required"/>
<input type="submit" value="提交"/>
</form>
</fieldset>
<fieldset>
<legend>email</legend>
<form>
<input type="email" required="required"/>
<input type="submit" value="提交"/>
</form>
</fieldset>
<fieldset>
<legend>url</legend>
<form>
<input type="url" required="required"/>
<input type="submit" value="提交"/>
</form>
</fieldset>
<fieldset>
<legend>number</legend>
<form>
<input type="number" />
<input type="submit" value="提交"/>
</form>
</fieldset>
<fieldset>
<legend>range</legend>
<form>
<input type="range" min="0" max="100" step="1" onchange="document.getElementById('rangeLable').innerText=this.value"/> <!-- 滑块 -->
<label id="rangeLable"></label>
<input type="submit" value="提交"/>
</form>
</fieldset>
<fieldset>
<legend>Date pickers (date, month, week, time, datetime, datetime-local)</legend>
<input type="date"/>
<input type="month"/>
<input type="week"/>
<input type="time"/>
<input type="datetime" placeholder="no shit.."/>
<input type="datetime-local"/>
</fieldset>
<fieldset>
<legend>•search </legend>
<input type="search" /> <!-- 输入的数据可被搜索引擎检索 -->
</fieldset>
<fieldset>
<legend>color</legend>
<input type="color" />
</fieldset>
<br /> <br />
<fieldset>
<legend>autocomplete</legend>
<form action="#">
<input type="text" name="tName" autocomplete="on"/> <!-- 默认自动补充 -->
<input type="text" name="sName" autocomplete="off"/>
<input type="submit" />
</form>
</fieldset>
<fieldset>
<legend>autofocus</legend>
<form action="#">
<input type="text" name="tName" autofocus="autofocus"/> <!-- 进入页面自动获得焦点 -->
<input type="submit" />
</form>
</fieldset>
<fieldset>
<legend>form</legend>
<form id="outSideForm" action="##">
<input type="text" name="tName" /> <!-- 允许在form外面写input表单-->
<input type="submit" />
</form>
<input type="text" form="outSideForm" name="sName"/> <!-- 需要注明当前表单的id -->
</fieldset>
<fieldset>
<legend>form-overrides</legend>
<form action="1.html">
<input type="text" name="tName" />
<!-- input新增 formaction, formenctype, formmethod, formnovalidate, formtarget -->
<input type="submit" formmethod="post" formaction="2.html"/>
</form>
</fieldset>
<fieldset>
<legend>height-width</legend>
<input type="file" multiple="multiple" height="60px" /> <!-- 用于email. file文件多选 -->
</fieldset>
<fieldset>
<legend>contenteditable</legend>
<div contenteditable="true">
hhh, adorable
</div>
</fieldset>
<fieldset>
<legend>自定义扩展属性 data-xxx-xxx</legend>
<input type="text" id="txt" value="666" data-age=12 data-my-gender="male" />
</fieldset>
<script>
var txt = document.getElementById("txt");
console.log(txt.dataset); // DOMStringMap
console.log(txt.dataset.age + "\t" + txt.dataset.myGender);
</script>
<fieldset>
<legend>拖拽</legend>
<!-- 可拖动 -->
<div id="imgDiv" style="border: palegoldenrod;">
<img src="33.jpg" draggable="true" ondragstart="imgStart(event)" width="130px" height="180px"/>
</div>
<div ondragover="imgOver(event)" ondrop="imgDrop(event)" style="border: dashed palegreen; width: 300px; height: 300px;">
</div>
</fieldset>
<script>
function imgStart(event) {
// 拿到当前图片的资源
var imgSrc = event.target.src;
// console.log(imgSrc);
// 保存拖动数据
event.dataTransfer.setData("imgSrc", imgSrc);
}
function imgOver(event) {
// 移动时默认事件不被触发
event.preventDefault();
}
function imgDrop(event) {
event.preventDefault();
// 拿到图片路径
var imgSrc = event.dataTransfer.getData("imgSrc");
// console.log(imgSrc);
event.target.innerHTML = "<img width='130px' height='180px' src='" + imgSrc + "'/>";
}
</script>
</body>
</html>
-
datalist 用来js绑定数据，提高体验度
-
拖拽演示
