Formularze HTML
Formularz HTML służy do zbierania danych wejściowych użytkownika. Dane wejściowe użytkownika są najczęściej wysyłane na serwer w celu przetworzenia.
Przykład
<forma> Element
Element HTML <form>służy do tworzenia formularza HTML do wprowadzania danych przez użytkownika:
<form>
.
form elements
.
</form>
Element <form>jest kontenerem dla różnych typów elementów wejściowych, takich jak: pola tekstowe, pola wyboru, przyciski radiowe, przyciski przesyłania itp.
Wszystkie różne elementy formularza zostały omówione w tym rozdziale: Elementy formularza HTML .
Element <wejście>
Element HTML <input>jest najczęściej używanym elementem formularza.
W zależności od
atrybutu <input>element może być wyświetlany na wiele sposobów .type
Oto kilka przykładów:
| Rodzaj | Opis |
|---|---|
| <input type="text"> | Wyświetla jednowierszowe pole wprowadzania tekstu |
| <input type="radio"> | Wyświetla przycisk radiowy (do wyboru jednej z wielu opcji) |
| <input type="pole wyboru"> | Wyświetla pole wyboru (do wyboru zero lub więcej z wielu opcji) |
| <input type="prześlij"> | Wyświetla przycisk przesyłania (do przesłania formularza) |
| <input type="przycisk"> | Wyświetla klikalny przycisk |
Wszystkie różne typy danych wejściowych zostały omówione w tym rozdziale: Typy wejściowe HTML .
Pola tekstowe
Definiuje jednowierszowe pole wejściowe do <input type="text">wprowadzania tekstu.
Przykład
Formularz z polami wprowadzania tekstu:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Uwaga: sam formularz nie jest widoczny. Należy również zauważyć, że domyślna szerokość pola wejściowego to 20 znaków.
Element <etykieta>
Zwróć uwagę na użycie <label>elementu w powyższym przykładzie.
Znacznik <label>definiuje etykietę dla wielu elementów formularza.
Element <label>jest przydatny dla użytkowników czytników ekranu, ponieważ czytnik ekranu odczyta na głos etykietę, gdy użytkownik skupi się na elemencie wejściowym.
Element <label>pomaga również użytkownikom, którzy mają trudności z klikaniem bardzo małych obszarów (takich jak przyciski radiowe lub pola wyboru) - ponieważ gdy użytkownik kliknie tekst w <label>elemencie, przełącza przycisk radiowy/pole wyboru.
Atrybut tagu powinien być równy foratrybutowi elementu
, aby powiązać je ze sobą.<label>id<input>
Przyciski radiowe
<input type="radio">Definiuje przycisk radiowy .
Przyciski radiowe pozwalają użytkownikowi wybrać JEDNĄ z ograniczonej liczby opcji.
Przykład
Formularz z przyciskami opcji:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Wybierz swój ulubiony język sieciowy:
Pola wyboru
<input type="checkbox">Definiuje pole wyboru .
Pola wyboru pozwalają użytkownikowi wybrać ZERO lub WIĘCEJ opcji z ograniczonej liczby wyborów.
Przykład
Formularz z polami wyboru:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Przycisk przesyłania
Definiuje przycisk do <input type="submit">przesyłania danych formularza do obsługi formularzy.
Procedura obsługi formularzy to zazwyczaj plik na serwerze ze skryptem do przetwarzania danych wejściowych.
Procedura obsługi formularza jest określona w action
atrybucie formularza.
Przykład
Formularz z przyciskiem prześlij:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Tak powyższy kod HTML będzie wyświetlany w przeglądarce:
Atrybut nazwy dla <input>
Zwróć uwagę, że każde pole wejściowe musi mieć nameatrybut do przesłania.
Jeśli nameatrybut zostanie pominięty, wartość pola wejściowego nie zostanie w ogóle wysłana.
Przykład
W tym przykładzie nie zostanie przesłana wartość pola wejściowego „Imię”:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>