Aby formularz stał się interaktywny, musisz dodać do niego elementy formularza. Są tam elementy sterujące do wprowadzania i wybierania danych, elementy opisujące elementy sterujące, elementów, które grupują pola, i przycisków przesyłania formularza.
Czym są elementy formularza?
Widać dwa elementy <input>: <input type="text"> i <input type="file">. Dlaczego wyglądają inaczej?
Na podstawie nazwy elementu i atrybutu type różne interfejsy użytkownika, korzystają z różnych reguły weryfikacji, i udostępnia wiele innych funkcji. Dzięki odpowiednim elementom sterującym możesz tworzyć lepsze formularze.
Etykiety elementów formularzy
Załóżmy, że chcesz dodać pole, w którym użytkownik może wpisać ulubiony kolor.
W tym celu musisz dodać do formularza element <input>.
Skąd jednak użytkownik wie, że powinien wypełnić ulubiony kolor?
Aby opisać elementy sterujące formularza, użyj znaku <label> dla każdego elementu sterującego formularza.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
Atrybut for elementu etykiety pasuje do atrybutu id w danych wejściowych.
Przechwytuję dane wejściowe użytkownika
Jak sama nazwa wskazuje, element <input> służy do zbierania informacji od użytkowników.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Jak wspomnieliśmy wcześniej, atrybut id łączy <input> z <label>.
Co z atrybutami name i type w tym przykładzie?
Atrybut name
Użyj atrybutu name, aby wskazać dane, które użytkownik wpisuje za pomocą elementu sterującego.
Jeśli prześlesz formularz, imię i nazwisko będą podane w żądaniu.
Załóżmy, że element sterujący formularza nazywa się mountain, a użytkownik wpisał Gutenberg,
żądanie zawiera te informacje jako mountain=Gutenberg.
Spróbuj to zmienić
nazwa elementu sterującego formularza na hill.
Jeśli zrobisz to prawidłowo i prześlesz formularz, w adresie URL będzie widoczny atrybut hill.
Typ danych wejściowych
Istnieją różne
typy elementów sterujących formularza, wszystkie
z przydatnymi wbudowanymi funkcjami, które działają w różnych przeglądarkach i na różnych platformach. Na podstawie danych z: type
przeglądarka renderuje różne interfejsy użytkownika, pokazuje różne klawiatury ekranowe,
różne reguły weryfikacji i inne. Zobaczmy, jak zmienić typ.
Gdy używasz metody type="checkbox", przeglądarka renderuje teraz pole wyboru zamiast pola tekstowego.
Pole wyboru ma też dodatkowe atrybuty.
Możesz ustawić atrybut checked, aby wyświetlał się jako zaznaczony.
Masz do wyboru wiele innych typów. Szczegółowo omówimy to w jednym z kolejnych modułów.
Zezwalaj na wiele wierszy tekstu
Załóżmy, że potrzebujesz pola, w którym użytkownik może napisać komentarz.
Czy nie byłoby wspaniale, gdyby można było wpisać wiele wierszy tekstu?
Służy do tego element <textarea>.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Wybierz z listy opcji
Jak udostępnić użytkownikom listę opcji do wyboru?
Aby to zrobić, możesz użyć elementu <select>.
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
Najpierw dodaj element <select>.
Tak jak w przypadku wszystkich innych opcji formularza, łączysz je z formularzem <label> za pomocą atrybutu id.
i nadaj mu niepowtarzalną nazwę za pomocą atrybutu name.
Między tagiem początkowym i końcowym elementu <select>
możesz dodać wiele elementów <option>, z których każdy reprezentuje 1 wybór.
Każda opcja ma unikalny atrybut value, który można odróżnić podczas przetwarzania danych formularza.
Tekst w elemencie „Option” jest wartością zrozumiałą dla człowieka.
Jeśli prześlesz formularz za pomocą <select> bez zmiany wyboru,
żądanie będzie obejmowało color=orange. Skąd jednak przeglądarka wie, której opcji użyć?
Przeglądarka użyje pierwszej opcji na liście, chyba że:
- 1 element
<option>ma atrybutselected. - Użytkownik wybiera inną opcję.
Wstępnie wybierz opcję
Dzięki atrybutowi selected możesz wstępnie wybrać 1 opcję.
Stanie się ona domyślna niezależnie od kolejności definiowania elementów <option>.
Grupowanie ustawień formularzy
Czasami trzeba pogrupować elementy sterujące formularza. Aby to zrobić, możesz użyć elementu <fieldset>.
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
Czy udało Ci się zauważyć element <legend> wewnątrz elementu <fieldset>? Jak myślisz, do czego służy?
Jeśli Twoja odpowiedź brzmi: „Opisz grupę elementów sterujących formularza”, masz rację.
Każdy element <fieldset> wymaga elementu <legend>,
tak jak każdy element sterujący formularza musi być powiązany z elementem <label>.
Element <legend> musi też być pierwszym elementem w <fieldset>.
Po elemencie <legend> możesz określić elementy sterujące formularza, które powinny należeć do grupy.
Przesyłanie formularza
Po nauce dodawania i grupowania elementów sterujących formularza możesz się zastanawiać, jak użytkownik może przesłać formularz.
Pierwszą opcją jest użycie elementu <button>.
<button>Submit</button>
Gdy użytkownik kliknie przycisk Prześlij,
przeglądarka wysyła żądanie do adresu URL określonego w elemencie <form>
atrybut działania
ze wszystkimi danymi z elementów sterujących formularza.
Zamiast elementu <button> możesz też użyć elementu <input> z atrybutem type="submit".
Dane wejściowe wyglądają i działają tak samo jak <button>. Zamiast używać elementu <label> do opisu
<input>, użyj atrybutu value.
<input type="submit" value="Submit">
Formularz można też przesłać za pomocą klawisza Enter, gdy pole formularza jest zaznaczone.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o elementach formularzy
Jak połączyć <label> z elementem sterującym formularza?
for='color' w aplikacji <label> i name='color' w aplikacji <input>.for='color' w aplikacji <label> i id='color' w aplikacji <input>.id='color' w aplikacji <label> i for='color' w aplikacji <input>.name='color' w aplikacji <label> i for='color w aplikacji <input>.Co służy do sterowania formularzem wielowierszowym?
<input> element z polem type='multi-line'.<text>.<textarea>.<input> element z polem type='long'.Jak przesłać formularz?
<button>.Enter.<input> z parametrem type='submit'.