溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5中新增加的屬性有哪些

發(fā)布時(shí)間：2022-03-16 09:33:49 來(lái)源：億速云 閱讀：264 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了html5中新增加的屬性有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

html5中新增加的屬性有：placeholder、calendar、Draggable、autocomplete、novalidate、autofocus、override、list、multiple、pattern、required等。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

html5中新增的屬性

  • placeholder

  • calendar

  • contentEditable(來(lái)描述標(biāo)簽中的內(nèi)容是否可編輯)

  • Draggable

  • Hidden

  • Context-menu

  • Data-val(自定義屬性)

  • autocomplete

  • novalidate

  • autofocus

  • override

  • list

  • multiple

  • pattern

  • required

html5中新增兩個(gè)表單屬性，分別autocomplete和novalidate屬性

1.autocomplete屬性

該屬性用于控制自動(dòng)完成功能的開啟和關(guān)閉?？梢栽O(shè)置表單或者input元素，有兩個(gè)屬性值，當(dāng)設(shè)置為on時(shí)，啟動(dòng)該功能；當(dāng)設(shè)置off時(shí)，關(guān)閉該功能。啟用該功能后，當(dāng)用戶在自動(dòng)完成域開始輸入時(shí)，瀏覽器就會(huì)在該域中顯示填寫的選項(xiàng)。用戶每提交一次，就會(huì)增加一個(gè)用于選擇的選項(xiàng)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <form action="#" method="get" autocomplete="on">
      請(qǐng)輸入：<input type="text"  name="txt" /><br/>
       <input type="submit" />
   </form>
</body>
</html>

html5中新增加的屬性有哪些

2.novalidate屬性

input輸入類型，當(dāng)提交表單時(shí)，會(huì)對(duì)這些輸入內(nèi)容進(jìn)行驗(yàn)證。而novalidate屬性則用于在提交表單時(shí)不對(duì)form或input進(jìn)行驗(yàn)證：

<form action="#" method="get" novalidate>
  E-mail:  <input type="email" name="myEmail" />
  <input type="submit" /></form>

新增的input屬性

1.autofocus屬性

autofocus屬性用于自動(dòng)獲取焦點(diǎn)。在html5中input元素設(shè)置該屬性后，當(dāng)頁(yè)面加載時(shí)，input元素會(huì)自動(dòng)獲得光標(biāo)焦點(diǎn)。

<input type="text" name="myTxt" autofocus />

2.form屬性

form屬性用于設(shè)置input元素屬于哪個(gè)表單。在html4中，表單中的所以元素都必須在這個(gè)表單的開始標(biāo)簽和結(jié)束標(biāo)簽之間，而在html5中，如果要將表單開始和結(jié)束標(biāo)簽之外的元素歸屬到該表單，只需要設(shè)置form屬性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="#" method="get" id="myForm">
    常用地址：<input type="text" name="ftxt" />
    <input type="submit" />

</form>
臨時(shí)地址：<input type="text" name="ltxt" form="myForm" />
</body>
</html>

html5中新增加的屬性有哪些

在設(shè)置form屬性時(shí)，需要知道表單的id屬性值，并將form屬性的值也設(shè)置成表單id的屬性值

3.表單重寫屬性override

override屬性用于重寫表單元素的某些屬性，在html5中，可以重寫的表單屬性有formaction、formmethod、formenctype、formnovalidate和formtarget，這些屬性分別用于重寫表單的action、enctype、method、novalidate和target屬性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="a.jsp" method="get">
        用戶名：<input type="text" name="fname" /><br />
        <input type="submit" value="張三的提交" /><br/>
        <input type="submit" formaction="b.jsp" value="李四的提交" />
    </form>
</body>
</html>

第一個(gè)input元素會(huì)將輸入的數(shù)據(jù)提交a.jsp頁(yè)面，而第二個(gè)input元素設(shè)置formaction屬性，重寫了action屬性，設(shè)置提交頁(yè)面到b.jsp頁(yè)面

4.list屬性：

list屬性用于設(shè)置輸入域的datalist元素，為list屬性設(shè)置datalist的id屬性值，可以將datalist元素與input元素相關(guān)聯(lián)：

list屬性適應(yīng)于以下類型的input元素：text、search、url、telephone、email、date、 pickers、number、range和color；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.2.1</title>
</head>
<body>
<input type="url" list="url_list" name="myUrl" />
<datalist id="url_list">
  <option label="Microsoft" value="http://www.microsoft.com" />
  <option label="Google" value="http://www.google.com" />
  <option label="百度" value="http://www.baidu.com" />
</datalist>
</body>
</html>

5.multiple屬性

multiple屬性用于設(shè)置input元素是否可以有多個(gè)值。該屬性只適用于email和file類型的input元素。如果給email類型的input元素設(shè)置multiple屬性，那么在輸入框中可以輸入多個(gè)email地址，多個(gè)email地址之間用逗號(hào)隔開。

如果給file類型的input元素設(shè)置multiple屬性，那么在打開的選擇文件對(duì)話框中就可以選擇對(duì)個(gè)文件

E-mail：<input type="email" name="myEmail" multiple />
File：<input type="file" name="myFile" multiple />

6.pattern正則表達(dá)式

正則表達(dá)式由一系列字符和數(shù)字組成，用于匹配某個(gè)句法規(guī)則。該屬性適應(yīng)于text、search、url、telephone、email和password類型的input元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" name="myName" pattern="[a-zA-Z]\w{5,15}$">
    <html>以字母開頭，6-16位</html>
    <input type="submit" value="提交">
</form>
</body>
</html>

html5中新增加的屬性有哪些

7.設(shè)置input元素在內(nèi)容為空時(shí)的提示信息，placeholder屬性

在頁(yè)面中有一個(gè)文本輸入框，但是不知道應(yīng)該輸入什么內(nèi)容時(shí)。

  <input type="text" name="myAddress" placeholder="輸入您的常住地址" />

html5中新增加的屬性有哪些

8.提交為空時(shí)提醒 required屬性

用戶必須填寫內(nèi)容才能提交，為空時(shí)提交不上

<form>
   <input type="text" name="myAddress" placeholder="輸入您的常住地址" required />
    <input type="submit"/>
</form>

html5中新增加的屬性有哪些

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html5中新增加的屬性有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手