个人网站建站的流程,网站开发需求分析的内容,网站建设 推荐,电子商务专业就业前景初探h5一#xff0c;h5 新增表单类型二#xff0c;新增表单属性三#xff0c;code demo一#xff0c;h5 新增表单类型 •email 邮箱地址•url 网络地址•number 数字框•range 滑块•Date pickers (date, month, week, time, datetime, datetime-local) 日期时间框•search… 初探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 htmlheadmeta charsetUTF-8title/title!--作者echo lovely时间2020-07-29描述my work - 案例demo--/headbodyfieldsetlegenddatalist/legendinput typetext listmyList/ !-- 利用id绑定datalist --datalist idmyListoption labelxxxHub valuegithub.com/optionoption valuezhihu.com/optionoption valuebilibili.com/option/datalist/fieldsetfieldsetlegendrequired/legendforminput typetext requiredrequired/input typesubmit value提交//form/fieldsetfieldsetlegendemail/legendforminput typeemail requiredrequired/input typesubmit value提交/ /form/fieldsetfieldsetlegendurl/legendforminput typeurl requiredrequired/input typesubmit value提交/ /form/fieldsetfieldsetlegendnumber/legendforminput typenumber /input typesubmit value提交/ /form/fieldsetfieldsetlegendrange/legendforminput typerange min0 max100 step1 onchangedocument.getElementById(rangeLable).innerTextthis.value/ !-- 滑块 --label idrangeLable/labelinput typesubmit value提交/ /form/fieldsetfieldsetlegendDate pickers (date, month, week, time, datetime, datetime-local)/legendinput typedate/input typemonth/input typeweek/input typetime/input typedatetime placeholderno shit../input typedatetime-local//fieldsetfieldsetlegend•search /legendinput typesearch / !-- 输入的数据可被搜索引擎检索 --/fieldsetfieldsetlegendcolor/legendinput typecolor //fieldsetbr / br /fieldsetlegendautocomplete/legendform action#input typetext nametName autocompleteon/ !-- 默认自动补充 --input typetext namesName autocompleteoff/input typesubmit //form/fieldset fieldsetlegendautofocus/legendform action#input typetext nametName autofocusautofocus/ !-- 进入页面自动获得焦点 --input typesubmit //form/fieldset fieldsetlegendform/legendform idoutSideForm action##input typetext nametName / !-- 允许在form外面写input表单--input typesubmit //forminput typetext formoutSideForm namesName/ !-- 需要注明当前表单的id --/fieldset fieldsetlegendform-overrides/legend form action1.htmlinput typetext nametName / !-- input新增 formaction, formenctype, formmethod, formnovalidate, formtarget --input typesubmit formmethodpost formaction2.html//form/fieldset fieldsetlegendheight-width/legendinput typefile multiplemultiple height60px / !-- 用于email. file文件多选 --/fieldsetfieldsetlegendcontenteditable/legenddiv contenteditabletruehhh, adorable/div/fieldsetfieldsetlegend自定义扩展属性 data-xxx-xxx/legendinput typetext idtxt value666 data-age12 data-my-gendermale //fieldsetscriptvar txt document.getElementById(txt);console.log(txt.dataset); // DOMStringMapconsole.log(txt.dataset.age \t txt.dataset.myGender);/scriptfieldsetlegend拖拽/legend!-- 可拖动 --div idimgDiv styleborder: palegoldenrod;img src33.jpg draggabletrue ondragstartimgStart(event) width130px height180px//divdiv ondragoverimgOver(event) ondropimgDrop(event) styleborder: dashed palegreen; width: 300px; height: 300px;/div/fieldsetscriptfunction 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 width130px height180px src imgSrc /;}/script/body /html datalist 用来js绑定数据提高体验度 拖拽演示