html5input表单标签新属性

初探h5

- 一，h5 新增表单类型
- 二，新增表单属性
- 三，code demo

一，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); // DOMStringMapconsole.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>