HTML5標籤有哪些屬性？ HTML5標籤的具體用法（附實例）

HTML5

HTML5

datalist 及其選項不會被顯示出來，它只是合法的輸入值清單。

請使用 input 元素的 list 屬性來綁定 datalist。

HTML5

#AlternatingItemStyle取得 DataList 控制項中交替項目的樣式屬性。

AlternatingItemTemplate取得或設定 DataList 中交替項目的範本Attributes取得web控制項的所有屬性值.

BackColor取得或設定 Web 伺服器控制項的背景色。

BorderColor取得或設定 Web 控制項的邊框顏色。

BorderStyle取得或設定 Web 伺服器控制項的邊框樣式。

BorderWidth取得或設定 Web 伺服器控制項的邊框寬度。

CellPadding取得或設定儲存格的內容和儲存格的邊框之間的空間量。

CellSpacing取得或設定單元格間的空間量。

Controls清單控制項中的子控制項的集合.

DataKeyField取得或設定由 DataSource 屬性指定的資料來源中的鍵欄位。

DataKeys儲存資料清單控制項中每個記錄的鍵值（顯示為一行）。

DataMember取得或設定多成員資料來源中要綁定到資料清單控制項的特定資料成員。

DataSource取得或設定來源，該來源包含用於填入控制項中的項目的值清單。

EditItemIndex取得或設定 DataList 控制項中要編輯的選定項目的索引號碼。

EditItemStyle取得 DataList 控制項中為進行編輯而選取的項目的樣式屬性。

EditItemTemplate取得或設定 DataList 控制項中為進行編輯而選定的項目的範本。

Enable取得或設定一個值，該值指示是否啟用 Web 伺服器控制項。

HeaderTemplate取得或設定 DataList 控制項的標題部分的範本。

Height取得或設定

HTML

下面是一個input 元素，datalist 中描述了其可能的值：

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

我發現HTML5

最近做東西需要郵箱補全，接觸到datalist，覺得蠻好用的。 datalist是需要與input標籤搭配使用，可以用在輸入推薦，郵箱補全等場合。下面將簡單記錄相關用法。

1.HTML5

<p>请输入您最喜欢的科目：</p>
<input type="text" list="mylist1">
<datalist id="mylist1">
<option value="电路原理">
<option value="数字电路">
<option value="模拟电路">
<option value="计算机原理">
</datalist>
</br>

datalist的id需要與input的list屬性一致，當準備輸出時input下方會自動出現option的選項，datalist具有模糊查詢的作用，例如在文字方塊中輸入“路”，則建議的內容為電路原理，數位電路以及類比電路。

2.HTML5

html程式碼：

<p>请输入您的邮箱：</p>
<input id="emailInput" oninput="suggestEmail()" type="text" list="mylist2">
<datalist id="mylist2"></datalist>

js程式碼：

function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append("<option value=&#39;"+ email +"@qq.com&#39;>"+
"<option value=&#39;"+ email +"@126.com&#39;>"+
"<option value=&#39;"+ email +"@foxmail.com&#39;>"+
"<option value=&#39;"+ email +"@163.com&#39;>"+
"<option value=&#39;"+ email +"@gmail.com&#39;>")
}
}

input標籤的oninput屬性可以偵測到input內容的變化，當輸入框內容變化，出發js在datalist中追加option。如果使用者手動輸入了@，就不需要提示了。

HTML 4.01 與 HTML 5 之間的差異：

瀏覽器支援：

所有主流瀏覽器都支援

【相關推薦】

HTML5新增的結構元素有哪些？ HTML5新增的結構元素的用法（建議）

HTML5中的article標籤是什麼？ HTML5的article元素用在什麼地方？

#

以上是HTML5標籤有哪些屬性？ HTML5標籤的具體用法（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！