html5のdatalistタグの使い方は何ですか？ datalistタグの使用例はこちら-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

html5のdatalistタグの使い方は何ですか？ datalistタグの使用例はこちら

寻∝梦

Sep 03, 2018 pm 05:33 PM

html5

この記事では、html5 datalistタグの使い方とhtml5 datalistタグの使用例を中心に説明します。この記事では、誰もが選択して視聴できる一般的に使用されるオプションボックスの 2 つの例について説明します。一緒にこの記事を見てみましょう

まず、HTML5 datalist タグの使用法を見てみましょう:

タグ定義オプションのリスト。この要素を input 要素と組み合わせて使用して、入力の可能な値を定義してください。

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

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

利用可能性: datalist: 選択して入力できるリスト (選択ドロップダウンリストのみより便利です)

それでは、html5 datalist タグの例を見てみましょう:

以下は入力です要素とその可能性は datalist で説明されています:

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="PHP中文网">
  <option value="html">
  <option value="寻梦">
</datalist>

ログイン後にコピー

これはブラウザに次のように表示されます:

html5のdatalistタグの使い方は何ですか？ datalistタグの使用例はこちら

これは何もアクションを行わない場合の効果です。それでは、入力ボックスを見てみましょう。マウスを上に移動した後にクリックする効果:

html5のdatalistタグの使い方は何ですか？ datalistタグの使用例はこちら

ほら、効果が現れています。 html5のdatalistタグの基本的な使い方です。

input入力ボックスのlist属性値はデータリストのidとなるため、データリストをinput入力ボックスに関連付けることができます。データリスト自体は表示されず、入力と一致させる必要がある場合にのみ自動的に表示されます。

HTML5 datalist タグの別の使用例:

Web デザインでは、入力ボックスなどの自動ドロップダウンプロンプトがよく使用され、ユーザーの入力が大幅に容易になります。以前は、このような機能を実装したい場合は、開発者が Javascript スキルまたは関連フレームワークを使用して ajax 呼び出しを行う必要があり、それにはある程度のプログラミング作業が必要でした。しかし、HTML5 が徐々に普及するにつれて、開発者は新しい datalist タグを使用して、非常に美しいオートコンプリートコンポーネント効果を迅速に開発できるようになりました

html5 datalist タグのコード例:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 datalist tag</title>
<meta charset="utf-8">
</head>
<p>
        浏览器版本：<input list="words">
</p>
<datalist id="words">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Sogou">
<option value="Maxthon">
</datalist>
</body>
</html>

ログイン後にコピー

効果は図に示すとおりです:

html5のdatalistタグの使い方は何ですか？ datalistタグの使用例はこちら