Pomóż użytkownikom wpisywać dane w formularzach

Aby formularz był interaktywny, musisz dodać do niego elementy. Dostępne są elementy służące do wprowadzania i wybierania danych, elementy opisujące elementy sterujące, elementy grupowania pól oraz przyciski służące do przesyłania formularzy.

Co to są elementy formularzy?

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 użytkownika, stosują różne reguły weryfikacji i oferują wiele innych funkcji. Użycie odpowiedniego elementu sterowania formularzem ułatwia tworzenie lepszych formularzy.

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ć, dodaj do formularza element <input>. Ale skąd użytkownik ma wiedzieć, że powinien podać swój ulubiony kolor?

Aby opisać elementy sterowania formularzem, użyj elementu <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 w danych wejściowych.

Pobieranie danych wejściowych użytkownika

Jak wskazuje nazwa, element <input> służy do zbierania danych od użytkowników.

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

Jak już wspomnieliśmy, atrybut id łączy element <input> z elementem <label>. Jak wyglądają atrybuty name i type w tym przykładzie?

Atrybut nazwa

Użyj atrybutu name, aby zidentyfikować dane wprowadzane przez użytkownika 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 żądaniu te informacje będą wyglądać tak: mountain=Gutenberg.

Spróbuj zmienić nazwę elementu formularza na hill. Jeśli wykonasz te czynności prawidłowo i prześlesz formularz, w adresie URL będzie widoczny parametr hill.

Typ danych wejściowych

Istnieją różne typy elementów sterujących formularzem, które mają 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 sprawdzania poprawności itp. Zobaczmy, jak zmienić typ.

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

Możesz też wybrać inne typy. Szczegółowo omówimy to w następnym module.

Zezwalanie na wiele wierszy tekstu

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

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

Wybierz opcję z listy.

Jak udostępnić użytkownikom listę opcji do wyboru? 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>. Podobnie jak w przypadku innych elementów sterujących formularzem, możesz go połączyć z elementem <label> za pomocą atrybutu id i nadać mu unikalną nazwę za pomocą atrybutu name.

Pomiędzy tagiem start i end elementu <select> możesz dodać wiele elementów <option>, z których każdy reprezentuje jeden wybór.

Każda opcja ma unikalny atrybut value, dzięki czemu możesz je odróżniać podczas przetwarzania danych formularza. Tekst wewnątrz elementu opcji to wartość zrozumiała dla człowieka.

Jeśli prześlesz formularz, używając tego <select> bez zmiany wyboru, prośba będzie zawierać color=orange. Ale skąd 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ę.

Wybierz opcję

Za pomocą atrybutu selected możesz wstępnie wybrać jedną opcję. Staje się ona domyślną wartością niezależnie od kolejności definiowania elementów <option>.

Grupowanie elementów sterujących

Czasami trzeba pogrupować elementy sterujące formularzem. W tym celu 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 widzisz element <legend> wewnątrz elementu <fieldset>? Do czego, Twoim zdaniem, służy?

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

Każdy element <fieldset> wymaga elementu <legend>, podobnie jak każdy element formularza wymaga elementu <label>. Element <legend> musi być też pierwszym elementem w elementach <fieldset>. Po elemencie <legend> możesz zdefiniować elementy formularza, które mają należeć do grupy.

Przesyłanie formularza

Gdy już wiesz, jak dodawać elementy formularzy i je grupować, 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 podanego w atrybutcie action elementu <form>, przekazując wszystkie dane z elementów sterujących formularza.

Zamiast elementu <button> możesz też użyć elementu <input> z elementem type="submit". Dane wejściowe wyglądają i działają tak samo jak <button>. Zamiast elementu <label> do opisu <input> użyj atrybutu value.

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

Formularz można też przesłać, gdy pole formularza ma fokus, używając klawisza Enter.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elementach formularza

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

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

Jakiego elementu sterowania formularzem wielowierszowego używasz?

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>.
Dobrze, to jest jedna z opcji.
za pomocą klawisza Enter.
Dobrze, to jest jedna z opcji.
Kliknięcie elementu <input> z atrybutem type='submit'.
Dobrze, to jedna z opcji.

Zasoby