1. Wybór wielokrotny i listy
Formularze HTML oferują wiele możliwości interakcji użytkowników ze stroną internetową. Oprócz pól tekstowych i przycisków, formularze obsługują elementy wyboru wielokrotnego i listy, które pozwalają stworzyć bardziej elastyczne i wygodne interfejsy do wprowadzania danych. Dzisiaj je poznamy.
W HTML formularze oferują kilka sposobów tworzenia elementów z możliwością wyboru z listy. Najczęściej używanymi elementami do tego celu są <select> oraz <option>, jak również checkboxy i przyciski radiowe.
Lista rozwijana: <select> i <option>
Tag <select> tworzy listę rozwijaną, a <option> jest używany do dodawania opcji wewnątrz tej listy. Użytkownik może wybrać jedną lub kilka opcji z listy.
Pojedynczy wybór: Domyślnie <select> pozwala na wybranie tylko jednej opcji.
<label for="country">Wybierz kraj:</label>
<select id="country" name="country">
<option value="ru">Rosja</option>
<option value="us">USA</option>
<option value="de">Niemcy</option>
</select>
<label for="country">Wybierz kraj:</label>
<select id="country" name="country">
<option value="ru">Rosja</option>
<option value="us">USA</option>
<option value="de">Niemcy</option>
</select>
Wybór wielokrotny: Jeśli dodasz atrybut multiple, użytkownik będzie mógł wybrać kilka opcji, przytrzymując klawisz Ctrl (w Windows) lub Cmd (na Mac) podczas klikania.
<label for="languages">Wybierz języki:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Rosyjski</option>
<option value="en">Angielski</option>
<option value="de">Niemiecki</option>
</select>
<label for="languages">Wybierz języki:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Rosyjski</option>
<option value="en">Angielski</option>
<option value="de">Niemiecki</option>
</select>
W tym przypadku dane z kilku wybranych elementów zostaną wysłane na serwer jako tablica wartości.
Checkboxy: <input type="checkbox">
Checkboxy to elementy, które pozwalają użytkownikowi wybrać jedną lub kilka opcji z proponowanej listy. Każdy checkbox jest tworzony za pomocą tagu <input type="checkbox">.
<label><input type="checkbox" name="interests" value="sports"> Sport</label>
<label><input type="checkbox" name="interests" value="music"> Muzyka</label>
<label><input type="checkbox" name="interests" value="travel"> Podróże</label>
<label><input type="checkbox" name="interests" value="sports"> Sport</label>
<label><input type="checkbox" name="interests" value="music"> Muzyka</label>
<label><input type="checkbox" name="interests" value="travel"> Podróże</label>
Jeśli wszystkie checkboxy mają taką samą wartość w atrybucie name, to przy wysyłaniu formularza dane z każdego zaznaczonego checkboxa zostaną wysłane jako tablica.
Przyciski radiowe: <input type="radio">
Przyciski radiowe pozwalają użytkownikowi wybrać tylko jedną opcję z grupy. Przyciski radiowe z tą samą wartością w atrybucie name są połączone w grupę, a użytkownik może wybrać tylko jedną opcję w tej grupie.
<p>Wybierz płeć:</p>
<label><input type="radio" name="gender" value="male"> Męska</label>
<label><input type="radio" name="gender" value="female"> Żeńska</label>
<p>Wybierz płeć:</p>
<label><input type="radio" name="gender" value="male"> Męska</label>
<label><input type="radio" name="gender" value="female"> Żeńska</label>
Przyciski radiowe są wygodne do wyboru jednej z kilku stałych opcji, takich jak „Tak” lub „Nie”, płeć, grupa wiekowa itp.
...
GO TO FULL VERSION