コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

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

藏色散人
リリース： 2018-12-05 09:43:37
オリジナル
5635 人が閲覧しました



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

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

おすすめ学習:「

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 で指定されたオプションに制限されることなく、任意のテキストを書き込むことができます。データリストは、入力要素リスト属性を介してバインド (またはリンク) されます。

注:

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

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

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

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

関連ラベル：
Datalist元素
ソース：php.cn
前の記事：html5ってどういう意味ですか？ 次の記事：HTML5キャンバスを使用してテキストを描画する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
から 2024-04-06 18:59:57
0
1
442
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
から 2024-04-06 16:25:39
0
1
346
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート