ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 での Datalist 要素タグの使用方法

HTML5 での Datalist 要素タグの使用方法

藏色散人オリジナル: 2018-12-03 15:28:145640ブラウズ

#fc86e7b705049fc9d4fccc89a2e80ee3 タグは HTML 5 の新しいタグです。この要素は、フォームからデータを取得するために使用されます。データを受信すると、ユーザーが選択できるオプションを表示できます。

おすすめ学習:「

HTML5 チュートリアル」

以下、具体的なコード例を通して紹介します。

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Datalist元素使用示例</title>
</head>
<body>
<input name="section" list="scripts" />
<datalist id="scripts">
    <option value="PHP" />
    <option value="JavaScript" />
    <option value="java" />
    <option value="Go" />
    <option value="python" />
    <option value="c++" />
</datalist>
</body>
</html>

効果は以下のとおりです:

HTML5 での Datalist 要素タグの使用方法

# ユーザーがドロップでテキストボックスにコンテンツを入力できるようにするオートコンプリート機能があります。 -down リストボックスまたはラジオボタンこれとは異なり、ユーザーは datalist で指定されたオプションに制限されることなく、任意のテキストを書き込むことができます。データリストは、入力要素リスト属性を介してバインド (またはリンク) されます。

注:

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

データリストとそのオプションは表示されません。これは単に正当な入力値のリストです。データリストをバインドするには、input 要素の list 属性を使用する必要があります。

この記事は、HTML5 での Datalist 要素の使用法を紹介するもので、困っている人たちに役立つことを願っています。

以上がHTML5 での Datalist 要素タグの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：html5ってどういう意味ですか？次の記事：html5ってどういう意味ですか？

続きを見る