HTMLのデータリスト-htmlチュートリアル-php.cn

HTML の Datalist タグの例

例 #3

結論

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLのデータリスト

PHPz

Sep 04, 2024 pm 04:22 PM

html html5 HTML Tutorial HTML Properties HTML tags

この記事では、HTML でのデータリストの概要を説明します。 Datalist は HTML5 で使用できるタグで、ユーザーに入力値を自動提案するために使用されます。このタグは、入力要素をよりインタラクティブにし、ユーザーインターフェイスを直感的にする HTML5 機能です。タグは入力要素タグと一緒に使用されます。これは、入力ボックスに入力するときに可能な値を表示するために使用されます。ユーザーは入力ボックスに任意の値を自由に入力できます。 datalist タグのみが自動提案値を提供します。したがって、ユーザーは値をより柔軟に、非常に簡単に入力できるようになります。

構文:

<input list = "xyz" name = "input name" >
<datalist id = "xyz" >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
</datalist>

ログイン後にコピー

ここには 2 つの主要なタグがあります。 1 つはです。タグ、2 番目はです。タグ。 datalist タグは開始タグで始まります。終了タグで終わります。すべてのオプションは datalist タグで囲まれています。 datalist タグ (ここでは xyz) に ID を割り当て、これと同じ ID 値が input タグの list 属性に渡されます。したがって、両方のタグは同じ ID によってリンクされます。これらがリンクされたので、値のリストを表示または自動提案したいと思います。これらの値は、

option タグは、select タグで使用されるものと同じです。 select タグと datalist タグの違いに注意してください。 select タグを使用すると、使用可能なオプションのみから値を選択できますが、datalist タグはリストから値を提案するだけです。 name 属性は、例の入力要素を識別するためにのみ使用されます。

属性:

で使用できる特別な属性はありません。タグ;デフォルトでは、グローバルに利用可能な Event 属性と HTML 属性がサポートされています。

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 が自動的にポップアップ表示されます。

出力:

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>

ログイン後にコピー

出力:

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>

ログイン後にコピー

ユーザーの入力なしで出力:

HTMLのデータリスト