ホームページ > 記事 > ウェブフロントエンド > HTMLのデータリスト
HTMLのデータリスト
- PHPzオリジナル
- 2024-09-04 16:22:291152ブラウズ
この記事では、HTML でのデータリストの概要を説明します。 Datalist は HTML5 で使用できるタグで、ユーザーに入力値を自動提案するために使用されます。このタグは、入力要素をよりインタラクティブにし、ユーザー インターフェイスを直感的にする HTML5 機能です。
構文:
<input list = "xyz" name = "input name" > <datalist id = "xyz" > <option value = " . . . " > <option value = " . . . " > <option value = " . . . " > <option value = " . . . " > </datalist>
ここには 2 つの主要なタグがあります。 1 つは です。タグ、2 番目は
option タグは、select タグで使用されるものと同じです。 select タグと datalist タグの違いに注意してください。 select タグを使用すると、使用可能なオプションのみから値を選択できますが、datalist タグはリストから値を提案するだけです。 name 属性は、例の入力要素を識別するためにのみ使用されます。
属性:
HTML の Datalist タグの例
以下に例を示します:
例 #1
次のように、自動提案オプションを備えた単純な入力フィールドを設計してみましょう:
コード:
<! DOCTYPE html> <html> <body> <label> Car Brand: </label> <input list = "car_brands" name = "car brand" > <datalist id = "car_brands" > <option value = "Honda " > <option value = "Hyundai " > <option value = "Toyota " > <option value = "Volkswagen " > <option value = "Ford " > <option value = "Mazda " > <option value = "Chevrolet " > <option value = "Kia " > </datalist> </body> </html>
ここに自動車ブランドとしての入力要素があります。表示される自己提案ではoptionsタグに記載しています。 datalist タグの場合、id を car_brands として割り当て、同じものが input 要素に渡されます。ユーザーがユーザーボックスをクリックするか、入力を開始すると、上記のように自動提案された値を含む HTML が自動的にポップアップ表示されます。
出力:
出力で、入力ボックスをクリックすると、上記のように自動車ブランドのリストが表示されます。
例 #2
datalist タグは主にフォーム送信の場合に使用されます。フォームが埋め込まれた例を見てみましょう。
コード:
<!DOCTYPE html> <html> <body> <form action = "#" method = "get" > <label> Car Brand: </label> <input list = "car_brands" name = "car brand" > <datalist id = "car_brands" > <option value = "Honda " > <option value = "Hyundai " > <option value = "Toyota " > <option value = "Volkswagen " > <option value = "Ford " > <option value = "Mazda " > <option value = "Chevrolet " > <option value = "Kia " > </datalist> <input type = "submit" > </form> </body> </html>
出力:
ここでは、出力ノートで、input 要素を form 要素に移動し、送信ボタンを追加しています。
例 #3
データリストの自動提案は、可能な限り最適な一致を表示しようとします。ユーザーが入力を開始すると、ユーザーが入力した値に応じて候補がフィルターで除外されます。最初の例を変更して、入力要素のスタイルとともにこの機能を表示しましょう。
コード:
<!DOCTYPE html>
<html>
<head>
<style>
.cars {
height: 110px;
background-color: cadetblue;
width: 100%;
}
</style>
</head>
<body>
<div class = "cars" >
<label style = "font-size: x-large; font-weight: 500; margin-left: 20px " > Car Brand: </label >
<input list = "car_brands" name = "car brand" style = "margin-top: 40px; " >
<datalist id = "car_brands" >
<option value = "Aston Martin " >
<option value = "Audi " >
<option value = "Cadillac " >
<option value = "Chevrolet " >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Chrysler " >
<option value = "Kia " >
</datalist>
</div>
</body>
</html>
ユーザーの入力なしで出力:
ユーザーが入力を開始したときの出力:
ここでは、ユーザーが入力ボックスに値「c」を入力しているため、HTML には文字「c」で始まるすべての自動提案値が表示されています。また、アルファベットに応じて自動提案される機能を表示するためにオプション要素も変更しました。
注: Internet Explorer 9 と Safari 12.0 以前のバージョンを除く、ほとんどすべてのブラウザーがデータ リスト タグをサポートしています。 datalist タグを使用するときは、この点に留意してください。結論
ユーザーからの入力を取得する際の自動提案は、HTML5 で提供される機能です。 datalist タグは、この機能を実現するために使用されます。 datalist タグは通常、input タグと一緒に使用されます。
以上がHTMLのデータリストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。