當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5input表单标签新属性

發布時間：2023/12/10 编程问答 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 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></head><body><fieldset><legend>datalist</legend><input type="text" list="myList"/> <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" /> <input type="submit" /></form><input type="text" form="outSideForm" name="sName"/> </fieldset> <fieldset><legend>form-overrides</legend> <form action="1.html"><input type="text" name="tName" /> <input type="submit" formmethod="post" formaction="2.html"/></form></fieldset> <fieldset><legend>height-width</legend><input type="file" multiple="multiple" height="60px" /> </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表单标签新属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：数字图像处理同态滤波（matlab）
下一篇：数据结构的介绍