詳解HTML5表單新增屬性
我要評(píng)論1. 表單內(nèi)元素的form屬性
在H5中可以把form放到頁面的任何地方，然后為該元素指定一個(gè)form屬性，屬性值為該表單的id,這樣就可以聲明該元素從屬于指定表單了
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
2. 表單內(nèi)元素的formaction屬性
在H4中，表單的提交方式
<form action="1.jsp"> </form>
提交整個(gè)表單
在H5中，可以為表單的每一個(gè)屬性添加提交到的jsp頁面
<form action="1.jsp">
<input type="submit" action="1-1.jsp">提交到1頁面</form>
<input type="submit" action="1-2.jsp">提交到2頁面</form>
<input type="submit" action="1-3.jsp">提交到3頁面</form>
</form>
3. 表單內(nèi)元素的formmethod屬性
可以對(duì)表單的每一個(gè)元素指定提交方法
<form action="1.jsp">
<input type="submit" action="1-1.jsp" formmethod="post">提交到1頁面,post提交方法</form>
<input type="submit" action="1-2.jsp" formmethod="get">提交到2頁面，get提交方法</form>
</form>
4. 表單內(nèi)元素的formenctype屬性
同上，作用與每一個(gè)元素，代碼略
5. 表單的formtarget屬性
同上，作用與每一個(gè)元素，代碼略
6.元素的autofocus屬性
為文本框、選擇框和按鈕控件等加上autofocus屬性，畫面打開時(shí)，將自動(dòng)獲得焦點(diǎn)。
<input type="text" action="1-3.jsp" autofocus>提交到3頁面</form>
一個(gè)頁面上只能有一個(gè)控件具有autofocus屬性，不能濫用
7. required屬性
可以用在大多數(shù)輸入用的元素，若輸入的值為空則不允許提交，游覽器顯示文字信息提示用戶必須輸入內(nèi)容。
8. labels屬性
可為表單所有元素添加一個(gè)lables屬性，屬性值為一個(gè)NodeList對(duì)象，代表該元素所綁定的標(biāo)簽元素所構(gòu)成的集合。
<script type="text/javascript">
window.onload = function () {
var text = document.getElementById('text');
var btn = document.getElementById('btn');
var form = document.getElementById('form');
btn.onclick = function() {
if (text.value.trim() =="") {
//alert(text.labels.length)
if(text.labels.length==1) {
var label = document.createElement("label");
label.setAttribute("for","text");
form.insertBefore(label,btn);
text.labels[1].innerHTML = "請(qǐng)輸入姓名";
text.labels[1].setAttribute(
"style","font-size:9px;color:red");
}
}
else if(text.labels.length>1)
form.removeChild(text.labels[1]);
}
}
</script>
<form id="form">
<label id="label" for="text">姓名：</label>
<input id="text">
<input id="btn" type="button" value="驗(yàn)證">
</form>
當(dāng)用戶不輸入任何值時(shí)，單擊驗(yàn)證，文本框旁邊會(huì)動(dòng)態(tài)的添加一個(gè)標(biāo)簽元素，標(biāo)簽元素為“請(qǐng)輸入姓名”；當(dāng)用戶在文本框中有輸入時(shí)，文字為“請(qǐng)輸入姓名”的標(biāo)簽將被刪除。
9. 標(biāo)簽的control屬性
可以在標(biāo)簽（label）內(nèi)部放置一個(gè)表單元素，并通過該標(biāo)簽的control屬性來訪問該表單元素。
<script type="text/javascript">
function setValue() {
console.log(1);
var label =document.getElementById("label");
var textbox = label.control;
textbox.value = "231456"
}
</script>
<form>
<label id="label">
郵編：
<input id="txt_zip" maxlength="6">
<small>請(qǐng)輸入6位數(shù)字</small>
</label>
<input type="button" value="設(shè)置默認(rèn)值" onclick="setValue()">
</form>
在游覽器中打開頁面，單擊“設(shè)置默認(rèn)值”按鍵，文本框中會(huì)顯示231456.
10. 文本框的placeholder屬性
當(dāng)文本框（text或者textarea）處于為選擇狀態(tài)時(shí)輸入提示信息(灰色)
<input type="text" palceholder="hahah">
11. 文本框的list屬性
結(jié)合h5新增的datalist元素，制作提示框
text:<input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none";將datalist元素設(shè)置為不顯示 -->
<datalist id="greetings" style="display:none">
<option value="你是人">你是人</option>
<option value="你是豬">你是豬</option>
<option value="你是狗">你是狗</option>
</datalist>
當(dāng)你在文本框中輸入“你”時(shí)，下面會(huì)出現(xiàn)三欄提示“你是人”、“你是豬”、“你是狗”，沒有關(guān)鍵字將不出現(xiàn)提示
12. 文本框的autocomplete屬性
autocomplete有三種值"on"、"off"、""（不指定）。不進(jìn)行指定時(shí)，使用游覽器的默認(rèn)值。使用方法如下
<input type="text" name="greeting" list="greetings" autocomplete="on">
當(dāng)你在文本框內(nèi)輸入如“我是人”點(diǎn)擊提交后，返回前一頁，再在文本框中輸入“我”，就會(huì)出線提示“我是人”。
13. 文本框的pattern屬性
相當(dāng)于直接在html部分用正則表達(dá)式判斷值輸入是否符合要求。
請(qǐng)輸入內(nèi)容：<input type="text" pattern="[0-9][A-Z]{3}">
此段代碼要求輸入一個(gè)數(shù)字三個(gè)大寫字母，如果輸入不正確，則出現(xiàn)“請(qǐng)與所要求的內(nèi)容保持一致（谷歌）”的提示。
14. 文本框的selectionDirection屬性
針對(duì)input的text和textarea元素，當(dāng)用戶在這兩個(gè)元素中用鼠標(biāo)選取部分文字時(shí)，可以使用該元素來獲取選擇方向。
<script type="text/javascript">
function alertSelectionDirection() {
var control = document.forms[0]['text'];
var Direction = control.selectionDirection;
alert(Direction);
}
</script>
<form>
<input type="text" name="text">
<input type="button" value="惦記我" onclick="alertSelectionDirection()" >
</form>
15. 復(fù)選框的indeterminate屬性
對(duì)于復(fù)選框來說，過去只有選取和與非選取狀態(tài)，html5中，可以在js中對(duì)該元素使用indeterminate屬性，以說明復(fù)選框“尚未明確選取”狀態(tài)。
<script>
var cb = document.getElementById("cb");
//將indeterminate的屬性設(shè)置為true
cb.indeterminate = true;
</script>
<input type="checkbox" indeterminate id="cb">indeterminate屬性測(cè)試
16. image提交按鈕的height屬性與width屬性
- height:指定圖片按鈕中圖片的高度；
- width:指定圖片按鈕中圖片的寬度；
<input type="image" src="img/2.png" width="23" height="23">
17. textarea元素的maxlength屬性與wrap屬性
- maxlength :使用整數(shù)值進(jìn)行設(shè)定，用于限定textarea元素中可輸入文字的個(gè)數(shù)。
- wrap:可指定屬性值為soft與hard.當(dāng)屬性為hard時(shí)，在沒有用回車鍵而是文字超出一排規(guī)定范圍而自動(dòng)換行時(shí)，提交表單時(shí)會(huì)在換行處添加一個(gè)換行標(biāo)志。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
- 下面小編就為大家?guī)硪黄狧TML Form表單元素全面了解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-26
- 下面小編就為大家?guī)硪黄猦tml5表單及新增的改良元素詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-07
- 這篇文章主要為大家介紹了HTML5新增的表單元素和屬性,具有一定的參考價(jià)值！需要的朋友可以參考下2014-07-07
HTML5 的新的表單元素(datalist/keygen/output)使用介紹
HTML5 擁有若干涉及表單的元素和屬性，下面為大家介紹下新的表單元素datalist 元素、keygen 元素、output 元素以及它們的使用實(shí)例，感興趣的朋友可以參考下哈，希望對(duì)大家2013-07-19HTML5之HTML元素?cái)U(kuò)展(下)—增強(qiáng)的Form表單元素值得關(guān)注
在HTML5增強(qiáng)的元素中，最值得關(guān)注的就是表單元素;在HTML5中，表單已經(jīng)做了重大的修整，一些以前需要通過JavaScript編碼實(shí)現(xiàn)的功能現(xiàn)在無需編碼就可輕松實(shí)現(xiàn),感興趣的朋友可2013-01-31- 點(diǎn)擊這里返回網(wǎng)頁教學(xué)網(wǎng) HTML教程 欄目． 上文：標(biāo)記語言——引用 原文出處 chapter 5 表單 互動(dòng)性一直是互聯(lián)網(wǎng)的重點(diǎn),讓使用者與網(wǎng)站能夠交換信息2008-10-17
- 本教程介紹FORM表單標(biāo)記的各種屬性在網(wǎng)頁設(shè)計(jì)中的應(yīng)用. <FORM>標(biāo)記的NAME屬性 基本語法 01 <Form name="Form＿name"> 02 ……2008-10-17
- 假設(shè)現(xiàn)在要在表單中添加這樣一項(xiàng)內(nèi)容：瀏覽所在的城市。這里不說全國(guó)的城市，只說省會(huì)以上的城市就有幾十個(gè)。如果以上面講過的單選按鈕的形式，將這些城市全部羅列在網(wǎng)頁上2008-10-17
- 帶有圖片預(yù)覽功能的上傳表單，完整的HTML代碼如下所示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=2008-10-17
XHTML入門學(xué)習(xí)教程:表單標(biāo)簽
表單是用戶提交信息的重要渠道。本節(jié)就將介紹表單的基礎(chǔ)知識(shí)。 表單標(biāo)簽<form> 表單以一個(gè)<form>標(biāo)簽開始。用戶注冊(cè)網(wǎng)站會(huì)員，投票等等都需要表單來實(shí)現(xiàn)2008-10-17