[解決済み] HTMLフォーム。選択オプションとデータリストオプション
2022-04-22 15:14:06
質問
Select-OptionとDatalist-Optionの違いは何ですか? また、どちらかを使用した方が良い場面はあるのでしょうか? 以下にそれぞれの例を示します。
セレクト・オプション
<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>
データリストオプション
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
解決方法は?
要求と提案の違いと考えてください。 については
select
要素では、ユーザーは指定した選択肢のいずれかを選択する必要があります。 一方
datalist
要素では、ユーザーが指定した選択肢のいずれかを選択することが推奨されていますが、実際にはユーザーが望むものを何でも入力することができます。
編集1:では、どちらを使うかは要件によりますね。 もし、ユーザーが
は必須です。
は、選択肢の1つを入力するために使用します。
select
要素を使用します。 もし使用者が何でも入力できるのであれば
datalist
要素を使用します。
編集2:こんな豆知識を発見しました。 HTML生活標準 : "datalist要素の子孫である各option要素は...提案を表します."。
関連
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] jQuery get specific option tag text
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] 選択オプション「selected」を値で設定する
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
document.forms 使用方法
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?
-
[解決済み] HTML5でminlengthの検証属性はありますか?