Pomóż użytkownikom wpisywać dane w formularzach

Aby formularz był interaktywny, musisz dodać do niego elementy. Są w nim elementy do wpisywania i wybierania danych, elementy opisujące elementy sterujące, elementy grupujące pola oraz przyciski do przesyłania formularza.

Czym są elementy formularza?

Zobaczysz 2 elementy <input>: <input type="text"> i <input type="file">. Dlaczego wyglądają inaczej?

Na podstawie nazwy elementu i atrybutu type przeglądarki wyświetlają różne interfejsy, stosują różne reguły weryfikacji i zapewniają wiele innych funkcji. Używanie odpowiedniego elementu sterującego formularzem pomaga tworzyć lepsze formularze.

Etykiety elementów formularza

Załóżmy, że chcesz dodać pole, w którym użytkownik może wpisać swój ulubiony kolor. Aby to zrobić, musisz dodać do formularza element <input>. Ale skąd użytkownik ma wiedzieć, że powinien podać swój ulubiony kolor?

Aby opisać elementy sterujące formularza, użyj symbolu <label> dla każdego z nich.

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

Atrybut for elementu etykiety pasuje do atrybutu id elementu wejściowego.

Przechwytywanie danych wprowadzanych przez użytkownika

Jak sama nazwa wskazuje, element <input> służy do zbierania danych wejściowych 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>. A co z atrybutami nazwa i typ w tym przykładzie?

Atrybut name

Użyj atrybutu name, aby określić dane, które użytkownik wprowadza za pomocą elementu sterującego. Jeśli prześlesz formularz, ta nazwa zostanie uwzględniona w prośbie. Załóżmy, że element formularza ma nazwę mountain, a użytkownik wpisał Gutenberg. W takim przypadku żądanie zawiera te informacje w postaci mountain=Gutenberg.

Spróbuj zmienić nazwę elementu sterującego formularza na hill. Jeśli zrobisz to prawidłowo i prześlesz formularz, w adresie URL będzie widoczny znak hill.

Typ danych wejściowych

Istnieją różne typy elementów sterujących formularza, z których każdy ma przydatne wbudowane funkcje działające w różnych przeglądarkach i na różnych platformach. Na podstawie atrybutu type przeglądarka renderuje różne interfejsy użytkownika, wyświetla różne klawiatury ekranowe, stosuje różne reguły weryfikacji itp. Dowiedz się, jak zmienić typ.

Dzięki temu type="checkbox" przeglądarka renderuje pole wyboru zamiast pola tekstowego. Pole wyboru ma też dodatkowe atrybuty. Możesz ustawić atrybut checked, aby wyświetlać go jako zaznaczony.

Możesz wybrać różne typy. Szczegółowe informacje znajdziesz w dalszej części tego modułu.

Zezwalaj na wiele wierszy tekstu

Załóżmy, że potrzebujesz pola, w którym użytkownik może wpisać komentarz. Czy nie byłoby wspaniale, gdyby mogli wpisać kilka wierszy tekstu? Taki jest cel elementu <textarea>.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

Wybieranie opcji z listy

Jak udostępnić użytkownikom listę opcji do wyboru? Możesz to zrobić za pomocą 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>. Podobnie jak w przypadku wszystkich innych elementów sterujących formularza, łączysz go z <label> za pomocą atrybutu id i nadajesz mu unikalną nazwę za pomocą atrybutu name.

Pomiędzy tagami otwierającym i zamykającym elementu <select> możesz dodać wiele elementów <option>, z których każdy będzie reprezentować jeden wybór.

Każda opcja ma unikalny atrybut value, dzięki czemu możesz je odróżnić podczas przetwarzania danych formularza. Tekst w elemencie opcji to wartość czytelna dla człowieka.

Jeśli prześlesz formularz za pomocą tego <select> bez zmiany wyboru, prośba będzie zawierać color=orange. Skąd jednak przeglądarka wie, której opcji użyć?

Przeglądarka używa pierwszej opcji na liście, chyba że:

  • Jeden element <option> ma atrybut selected.
  • Użytkownik wybiera inną opcję.

Wstępne wybieranie opcji

Za pomocą atrybutu selected możesz wstępnie wybrać jedną opcję. Staje się on wartością domyślną niezależnie od kolejności, w jakiej zdefiniowano elementy <option>.

Elementy sterujące formularza grupy

Czasami trzeba zgrupować elementy sterujące formularza. Możesz to zrobić za pomocą 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 widzisz element <legend> w elemencie <fieldset>? Do czego Twoim zdaniem służy?

Jeśli Twoja odpowiedź brzmi „aby opisać grupę elementów sterujących formularza”, masz rację.

Każdy element <fieldset> wymaga elementu <legend>, tak jak każdy element sterujący formularza wymaga powiązanego elementu <label>. Element <legend> musi być też pierwszym elementem w <fieldset>. Po elemencie <legend> możesz zdefiniować elementy sterujące formularza, które powinny należeć do grupy.

Przesyłanie formularza

Po nauczeniu się, jak dodawać elementy sterujące formularza i grupować je, 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 na adres URL podany w <form> elementu atrybutu action ze wszystkimi danymi z elementów sterujących formularza.

Zamiast elementu <button> możesz też użyć elementu <input> z atrybutem type="submit". Wprowadzony tekst wygląda i działa tak samo jak <button>. Zamiast używać elementu <label> do opisywania elementu <input>, użyj atrybutu value.

<input type="submit" value="Submit">

Formularz można też przesłać, naciskając klawisz Enter, gdy pole formularza jest aktywne.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elementach formularza

Jak połączyć <label> z elementem formularza?

for='color' – <label>, a name='color' – <input>.
Spróbuj jeszcze raz.
for='color' – <label>, a id='color' – <input>.
Dobrze!
id='color' – <label>, a for='color' – <input>.
Spróbuj jeszcze raz.
name='color' – <label>, a for='color – <input>.
Spróbuj jeszcze raz.

Czego używasz w przypadku wielowierszowego elementu sterującego formularza?

element <input> z atrybutem type='multi-line'.
Spróbuj jeszcze raz.
Element <text>.
Spróbuj jeszcze raz.
Element <textarea>.
🎉
element <input> z atrybutem type='long'.
Spróbuj jeszcze raz.

Jak przesłać formularz?

kliknięcie elementu <button>;
Tak, to jedna z opcji.
Użyj klawisza Enter.
Tak, to jedna z opcji.
kliknięcie elementu <input> z atrybutem type='submit';
Tak, to jedna z opcji.

Zasoby