この記事では、HTML でのデータリストの概要を説明します。 Datalist は HTML5 で使用できるタグで、ユーザーに入力値を自動提案するために使用されます。このタグは、入力要素をよりインタラクティブにし、ユーザー インターフェイスを直感的にする HTML5 機(jī)能です。
構(gòu)文:
<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
次のように、自動提案オプションを備えた単純な入力フィールドを設(shè)計(jì)してみましょう:
コード:
<! 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 として割り當(dāng)て、同じものが 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
データリストの自動提案は、可能な限り最適な一致を表示しようとします。ユーザーが入力を開始すると、ユーザーが入力した値に応じて候補(bǔ)がフィルターで除外されます。最初の例を変更して、入力要素のスタイルとともにこの機(jī)能を表示しましょう。
コード:
<!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」で始まるすべての自動提案値が表示されています。また、アルファベットに応じて自動提案される機(jī)能を表示するためにオプション要素も変更しました。
注: Internet Explorer 9 と Safari 12.0 以前のバージョンを除く、ほとんどすべてのブラウザーがデータ リスト タグをサポートしています。 datalist タグを使用するときは、この點(diǎn)に留意してください。結(jié)論
ユーザーからの入力を取得する際の自動提案は、HTML5 で提供される機(jī)能です。 datalist タグは、この機(jī)能を?qū)g現(xiàn)するために使用されます。 datalist タグは通常、input タグと一緒に使用されます。
以上がHTMLのデータリストの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
なぜ私の畫像がHTMLに表示されないのですか？
Jul 28, 2025 am 02:08 AM
表示されていない畫像は、通常、ファイルパスの間違ったパス、ファイル名または拡張機(jī)能、HTML構(gòu)文の問題、またはブラウザキャッシュによって引き起こされます。 1. SRCパスがファイルの実際の位置と一致していることを確認(rèn)し、正しい相対パスを使用します。 2.ファイル名のケースと拡張機(jī)能が正確に一致するかどうかを確認(rèn)し、URLに直接入力して畫像をロードできるかどうかを確認(rèn)します。 3.IMGタグ構(gòu)文が正しいかどうかを確認(rèn)し、冗長文字がなく、ALT屬性値が適切であることを確認(rèn)してください。 4.ページを強(qiáng)制的に更新するか、キャッシュをクリアするか、Incognitoモードを使用してキャッシュ干渉を排除してください。この順序でのトラブルシューティングは、ほとんどのHTML畫像表示の問題を解決できます。
別のタグ內(nèi)にタグを入れることはできますか？
Jul 27, 2025 am 04:15 AM
youcannotnesttagsinsisideantagbecuseit’sinvalidhtml; browsersautomatelycloseThefirsteforeopeningthenext、spedinginselementsied、useinlineelements like like like、orforstylingwithinaparagraph、またはblockainerslikegoriveparagragh
HTMLで順序付けられていないリストを作成する方法は？
Jul 30, 2025 am 04:50 AM
HTML Unoderedリストを作成するには、タグを使用してリストコンテナを定義する必要があります。各リストアイテムはタグで包まれており、ブラウザは自動的に弾丸を追加します。 1.タグを使用してリストを作成します。 2。各リスト項(xiàng)目はタグで定義されています。 3.ブラウザは、デフォルトのドットシンボルを自動的に生成します。 4。サブリストはネスティングを通じて実裝できます。 5。CSSのリストスタイルタイプの屬性を使用して、ディスク、サークル、スクエア、またはなしなどのシンボルスタイルを変更します。これらのタグを正しく使用して、標(biāo)準(zhǔn)の非秩序化リストを生成します。
コンテンツ誘導(dǎo)性の屬性を使用する方法は？
Jul 28, 2025 am 02:24 AM
thecontentEdentedItedItableattributemakesanyhtmlementedabledaitbyaddingcontenteditable = "true"、avainusErstodirectlymodifyContentinthebrowser.2.ItiscommonlyLichTexteditors、note-takingApps、およびin-place-placeditingintingintingintingintingintingtintingtintingtediv
SEOとアクセシビリティのセマンティックHTMLの重要性
Jul 30, 2025 am 05:05 AM
semantichtmlimprovesbothseoandaccessibilityを使用することはできません
html5 schema.orgマークアップを使用してカスタム語彙を定義します。
Jul 31, 2025 am 10:50 AM
Schema.orgタグは、セマンティックタグ（アイテムスコープ、アイテムタイプ、アイテムプロップなど）を使用して、検索エンジンがWebページコンテンツの構(gòu)造化データ形式を理解するのに役立ちます。カスタム語彙を定義するために使用できます。方法には、既存のタイプの拡張や追加のタイプを使用して新しいタイプの導(dǎo)入が含まれます。実際のアプリケーションでは、構(gòu)造を明確に保ち、公式の屬性の使用を優(yōu)先し、コードの妥當(dāng)性をテストし、カスタムタイプにアクセスできるようにします。予防策には、部分的なサポートの受け入れ、綴りエラーの回避、JSON-LDなどの適切な形式の選択が含まれます。
HTMLフォームで検索入力フィールドを作成する方法
Aug 02, 2025 pm 04:44 PM
usetheelementwithinatagtocreateasemanticsearchfield.2.includeaforAccessibility、settheform'sactionandmethod = "astributesenddatatoaseandpointwitharaibleableurl.3.addname =" q "dodefinethequeryparameter、umeplyholdertoguideuse
HTMLのリンクタグのREL屬性の目的は何ですか？
Aug 03, 2025 pm 04:50 PM
rel = "styleSheet" linkscssfilesforstylingthepage; 2.Rel = "preoad" hintstopreloadcriticalResourcesforPerformance; 3.REL = "ICON" setSthewebsite’sfavicon;
