Formularz HTML: Select-Option vs Datalist-Option
Zastanawiałem się, jakie są różnice między opcją Select I opcją Datalist. Czy jest jakaś sytuacja, w której lepiej byłoby użyć jednej lub drugiej? Przykład każdego z nich:
Select-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>
Datalist-Option
<input type=text list=browsers>
<datalist id=browsers>
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
8 answers
Pomyśl o tym jako o różnicy między wymogiem a sugestią. Dla elementu select
użytkownik musi wybrać jedną z podanych opcji. W przypadku elementu datalist
sugeruje się, aby użytkownik wybrał jedną z podanych przez Ciebie opcji, ale może on rzeczywiście wprowadzić wszystko, co chce w danych wejściowych.
Edit 1: to, którego z nich używasz, zależy od twoich wymagań. Jeśli użytkownik musi wprowadzić jeden z twoich wyborów, użyj elementu select
. Jeśli użycie może wejść cokolwiek, użyj elementu datalist
.
Edit 2: znalazłem tę ciekawostkę w HTML Living Standard : "każdy element opcji, który jest potomkiem elementu datalist...to sugestia."
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-14 11:59:34
Z technicznego punktu widzenia są zupełnie inne. <datalist>
jest abstrakcyjnym kontenerem opcji dla innych elementów. W Twoim przypadku używałeś go z <input type="text"
, ale możesz również używać go z zakresami, kolorami, datami itp. http://demo.agektmr.com/datalist/
Jeśli używasz go z wprowadzaniem tekstu, jako typu autouzupełniania, to naprawdę pytanie brzmi: czy lepiej jest użyć dowolnego wprowadzania tekstu, czy z góry określonej listy opcji? W takim razie myślę, że odpowiedź jest nieco bardziej to oczywiste.
Jeśli skupimy się na użyciu <datalist>
jako listy opcji dla pola tekstowego, oto pewne różnice między tym a polem wyboru:
- A
<datalist>
pole tekstowe fed ma pojedynczy ciąg znaków zarówno dla display label, jak i submit. Pole wyboru może mieć inną wartość submit zamiast display label<option value='ie'>Internet Explorer</option>
. - pole tekstowe
<datalist>
nie obsługuje znacznika<optgroup>
do organizacji wyświetlania. - nie można ograniczyć użytkownika do listy opcji w
<datalist>
jak możesz z<select>
. - Zdarzenie onchange działa inaczej. W elemencie
<select>
Zdarzenie onchange jest wywoływane natychmiast po zmianie, podczas gdy w<input type="text"
zdarzenie jest wywoływane po utracie ostrości elementu lub naciśnięciu klawisza enter. -
<datalist>
ma naprawdę spotty wsparcie we wszystkich przeglądarkach. Sposób pokazania wszystkich dostępnych opcji jest niespójny, a od tego momentu wszystko się pogarsza.
<datalist>
. Dodatkowo każde porządne autouzupełnianie pozwoli na stylizację wyświetlania opcji, co <datalist>
nie robi. Jeśli <datalist>
zaakceptujesz <li>
elementy, którymi możesz manipulować w dowolny sposób, byłoby to naprawdę świetne! Ale nie.
Również o ile mogę powiedzieć, wyszukiwanie <datalist>
jest dokładnym dopasowaniem od początku łańcucha. Więc gdybyś miał <option value="internet explorer">
a szukając 'explorer' nie otrzymałbyś żadnych wyników. Większość wtyczek autouzupełniania będzie wyszukiwać w dowolnym miejscu tekstu.
Użyłem tylko <datalist>
jako szybkiego i leniwego pomocnika wygody dla niektórych stron wewnętrznych, gdzie Wiem ze 100% pewnością, że użytkownicy mają najnowszą Chrome lub Firefox, i nie będzie próbował przedstawiać fałszywych wartości. W każdym innym przypadku trudno jest polecić użycie <datalist>
ze względu na bardzo słabą obsługę przeglądarki.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-16 06:02:12
Datalist zawiera autouzupełnianie i sugestie natywnie, może również pozwolić użytkownikowi wprowadzić wartość, która nie jest zdefiniowana w sugestiach.
Select only daje wstępnie zdefiniowane opcje, które użytkownik musi wybrać z
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-06 00:32:42
Data List jest nowym znacznikiem HTML w przeglądarkach obsługiwanych przez HTML5. Renderuje się jako pole tekstowe z pewną listą opcji. Na przykład w polu tekstowym płeć daje opcje jako mężczyzna kobieta po wpisaniu " M " lub " F " w polu tekstowym.
<input list="Gender">
<datalist id="Gender">
<option value="Male">
<option value="Female>
</datalist>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-13 12:31:41
Zauważyłem, że nie ma wybranej funkcji w datalist. Daje tylko wybór, ale nie może mieć opcji domyślnej. Zaznaczoną opcję również nie można wyświetlić na następnej stronie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-21 18:19:19
Aby konkretnie odpowiedzieć na część twojego pytania " czy jest jakaś sytuacja, w której lepiej byłoby użyć jednego lub drugiego?", rozważ formę z powtarzającymi się sekcjami. Jeśli sekcja repeating zawiera wiele znaczników select
, to option
muszą być renderowane dla każdego select, dla każdego wiersza.
W takim przypadku rozważyłbym użycie datalist
z input
, ponieważ to samo datalist
może być używane dla dowolnej liczby input
s. potencjalnie może to zaoszczędzić dużą ilość czasu renderowania na serwerze i znacznie lepiej skalowałby się do dowolnej liczby wierszy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-14 20:39:19
Jest jeszcze jedna ważna różnica między select
a datalist
.
Nadchodzi współczynnik wsparcia przeglądarki.
Select jest szeroko obsługiwany przez przeglądarki w porównaniu do datalist. Proszę spojrzeć na tę stronę, aby uzyskać pełną obsługę przeglądarki datalist--
Gdzie as select jest obsługiwany we wszystkich przeglądarkach (od IE6+, Firefox 2+, Chrome 1+ itd.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-27 00:55:29
Jest podobny do select, ale datalist ma dodatkowe funkcje, takie jak auto suggest. Możesz nawet pisać i wyświetlać sugestie podczas pisania.
Użytkownik będzie mógł również zapisywać elementy, których nie ma na liście.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-24 05:37:41