Element <datalist> w HTML5 umożliwia tworzenie elastycznych kontrolek formularza, które oferują użytkownikom listę predefiniowanych opcji podczas wprowadzania danych. Jest to szczególnie przydatne w przypadkach, gdy chcemy zaproponować użytkownikom szybkie sugestie, ale jednocześnie pozwolić na wpisanie wartości spoza listy. Dzięki <datalist>, możemy łatwo zaimplementować funkcję autouzupełniania, zwiększając użyteczność formularzy na naszej stronie.
Przykład użycia <datalist>
W poniższym przykładzie zobaczymy, jak użyć <datalist> do stworzenia pola formularza z sugestiami dla użytkownika. Utworzymy formularz, w którym użytkownik może wpisać nazwę owocu, z opcjami autouzupełniania.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład użycia elementu datalist w HTML5</title>
</head>
<body>
<!-- Definicja formularza z polami używającymi <datalist> -->
<label for="fruit">Wybierz owoc lub wpisz dowolną nazwę:</label>
<input type="text" id="fruit" name="fruit" list="fruits-list">
<!-- Definicja listy opcji dla pola formularza -->
<datalist id="fruits-list">
<option value="Jabłko">
<option value="Banana">
<option value="Pomarańcza">
<option value="Gruszka">
<option value="Kiwi">
</datalist>
</body>
</html>
W powyższym przykładzie, <input> o id fruit połączono z <datalist> za pomocą atrybutu list, który odnosi się do id elementu <datalist>. Dzięki temu, podczas wpisywania tekstu w polu, użytkownikowi wyświetlą się sugestie zawarte w <datalist>.
Różne kontrolki z <datalist>
Element <datalist> może być wykorzystany z różnymi typami kontrolek formularza, takimi jak text, search, url, tel, email, oraz number, dostosowując się do potrzeb wprowadzania danych w różnych kontekstach.
Podsumowanie
Element <datalist> w HTML5 jest potężnym narzędziem, które pozwala na łatwe dodanie funkcji autouzupełniania do formularzy na stronach internetowych. Dzięki temu, możemy poprawić użyteczność naszych formularzy, jednocześnie pozostawiając użytkownikom swobodę w wyborze lub wpisywaniu danych. Wykorzystanie <datalist> w połączeniu z różnymi typami pola formularza umożliwia tworzenie bardziej interaktywnych i dostępnych interfejsów użytkownika.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.