HTML5 の タグにはどのような属性がありますか? HTML5 タグの具体的な使用法 (例付き)

HTML5fc86e7b705049fc9d4fccc89a2e80ee3 タグの属性は何ですか? HTML5

HTML5fc86e7b705049fc9d4fccc89a2e80ee3 タグの定義と使用法: ;datalist> タグ定義 オプションのリスト。この要素を入力要素と組み合わせて使用​​して、入力の可能な値を定義します。

datalist とそのオプションは表示されません。これは正当な入力値のリストにすぎません。

データリストをバインドするには、input 要素の list 属性を使用してください。

HTML5fc86e7b705049fc9d4fccc89a2e80ee3 タグの属性と説明:

AlternatingItemStyle は、DataList コントロール内の代替項目のスタイル プロパティを取得します。

AlternatingItemTemplate は、DataList 内の代替項目のテンプレートを取得または設定します。 Attributes は、Web コントロールのすべての属性値を取得します。

BackColor は、Web サーバー コントロールの背景色を取得または設定します。

BorderColor は、Web コントロールの境界線の色を取得または設定します。

BorderStyle は、Web サーバー コントロールの境界線のスタイルを取得または設定します。

BorderWidth は、Web サーバー コントロールの境界線の幅を取得または設定します。

CellPadding は、セルの内容とセルの境界線の間のスペースの量を取得または設定します。

CellSpacing は、セル間のスペースの量を取得または設定します。

コントロール リスト コントロール内の子コントロールのコレクション

DataKeyField は、DataSource プロパティで指定されたデータ ソースのキー フィールドを取得または設定します。

DataKeys は、データ リスト コントロール (行として表示) 内の各レコードのキー値を保存します。

DataMember は、マルチメンバー データ ソース内のデータ リスト コントロールにバインドされる特定のデータ メンバーを取得または設定します。

DataSource コントロール内の項目を設定するために使用される値のリストを含むソースを取得または設定します。

EditItemIndex は、DataList コントロールで編集する選択された項目のインデックス番号を取得または設定します。

EditItemStyle DataList コントロールで編集するために選択された項目のスタイル プロパティを取得します。

EditItemTemplate DataList コントロールで編集するために選択された項目のテンプレートを取得または設定します。

Enable は、Web サーバー コントロールが有効かどうかを示す値を取得または設定します。

HeaderTemplate は、DataList コントロールのヘッダー部分のテンプレートを取得または設定します。

Height を取得または設定します

HTML fc86e7b705049fc9d4fccc89a2e80ee3 タグの例:

ここに入力要素があり、その可能な値は datalist で説明されています:

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

HTML5 15fb9dc8f49b2f923993bd9c0506448b タグの便利さを共有したいと思います:

最近、何か作業をしているときにメールを完成させる必要があるのですが、とても便利だと思いました。 Datalist は input タグと組み合わせて使用​​する必要があり、入力の推奨事項、電子メールの入力などに使用できます。関連する使用法を以下に簡単に記録します。

1. HTML5fc86e7b705049fc9d4fccc89a2e80ee3 タグは入力の推奨に使用されます:

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

出力の準備ができたら、オプション オプションが自動的に表示されます。データリストにはファジークエリの機能があり、例えばテキストボックスに「道路」と入力すると、回路原理、デジタル回路、アナログ回路が推奨されます。

2. HTML5fc86e7b705049fc9d4fccc89a2e80ee3 タグはメール補完に使用されます:

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 属性は、入力ボックスの変更を検出できます。コンテンツが変更されたら、js を起動してデータリストにオプションを追加します。ユーザーが @ を手動で入力した場合、プロンプトは必要ありません。

HTML 4.01 と HTML 5 の違い:

fc86e7b705049fc9d4fccc89a2e80ee3 タグは HTML 5 の新しいタグです。

ブラウザのサポート:

Internet Explorer と Safari を除くすべての主要なブラウザは fc86e7b705049fc9d4fccc89a2e80ee3 タグをサポートします。

【関連おすすめ】

HTML5の新しい構造要素とは何ですか? HTML5 での新しい構造要素の使用法 (推奨)

HTML5 の Article タグとは何ですか? HTML5 では、article 要素はどこで使用されますか?

以上がHTML5 の