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>

datalist 用来js绑定数据，提高体验度
拖拽演示

html5input表单标签新属性相关推荐

什么标签用于在表单中构建复选框_基础表单标签及属性
表单标签一.一个完整的表单包含三个基本组成部分:(表单标签.表单域.表单按钮) 1.表单标签:form标签,用于设置服务器地址.请求方式等等 2.表单域:用户需要填写或选择的数据,输入框.单 ...
【表单标签（知识点超全版本）】
表单标签 1.表单标签 1.1 表单标签有哪些 ? 1.2 HTML5 中的表单标签有哪些 ? 1.3 ★ form 供用户输入创建 HTML 表单 (交互+收集用户信息,表明我是表单) 1 ...
4、HTML——表格标签、表单标签
目录一.表格标签:table-tr-td/th 1.合并单元格 1.1 合并同行不同列的单元格(列合并) 1.2 合并同列不同行的单元格(行合并) 二.表单标签:form 1.form标签 2.i ...
HTML表单标签和HTML5新标签
[HTML表单标签和HTML5新标签] 目录 [HTML表单标签和HTML5新标签] 1. HTML表单标签 1.1input 控件 1.2.label标签 1.3.textarea控件 1.4.下拉 ...
HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
HTNL5智能表单(新的表单类型、属性、虚拟键盘适配)
3. 智能表单 3.1. 新的表单类型 email - 限定输入内容为邮箱地址,表单提交时会校验格式 url - 限定输入内容为URL,表单提交时会校验格式 number - 限定输入内容为数字,表单 ...
SpringMVC 表单标签中 htmlEscape 属性的作用
一.SpringMVC 表单元素标签如下: <form:textarea path="remarks" htmlEscape="false" class ...
html5input链接跳转,HTML表单标签input标签的使用
表单标签是HTML使用中十分重要的标签,其中 input 为用户与程序信息交互提供交流界面,是不可忽视的重中之重. input 标签是单标签,一般使用格式为 ,而后可以在标签的括号内添加其他属性说明. ...
用java写注册表单_利用HTML表单标签编写一个注册页面
今天我们来写一个注册页面 form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构: 页面结构大体就是这样子的~ 利用HTML表单标签编写一个注册页面表单标签: 所有需要提交到服务 ...

html5input表单标签新属性

初探h5

一，h5 新增表单类型

二，新增表单属性

三，code demo

html5input表单标签新属性相关推荐

最新文章

热门文章