Pomóż użytkownikom wpisywać dane w formularzach

Aby formularz był interaktywny, musisz dodać do niego elementy. Istnieją elementy sterujące do wpisania i wyboru danych, elementy opisujące elementy sterujące, elementy grupujące pola i przyciski służące do przesłania formularza.

Co to są elementy formularza?

Zobaczysz 2 elementy <input>: <input type="text"> i <input type="file">. Dlaczego różnią się od siebie?

Zależnie od nazwy elementu i atrybutu type przeglądarki wyświetlają różne interfejsy użytkownika, korzystają z różnych reguł walidacji i udostępniają wiele innych funkcji. Użycie odpowiednich opcji sterowania formularzem pomaga tworzyć lepsze formularze.

Etykiety elementów formularzy

Załóżmy, że chcesz dodać pole, w którym użytkownik będzie mógł wpisać ulubiony kolor. Aby to zrobić, dodaj do formularza element <input>. Skąd jednak użytkownik wie, że powinien użyć swojego ulubionego koloru?

Aby opisać elementy sterujące formularza, użyj elementu <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 jest zgodny z atrybutem id w danych wejściowych.

Rejestruję dane wejściowe użytkownika

Element <input>, jak sama nazwa wskazuje, służy do zbierania opinii 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 <input> z <label>. Co z atrybutami name i type w tym przykładzie?

Atrybut „name”

Atrybut name pozwala 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 nadasz nazwę elementowi sterującemu formularzowi mountain, a użytkownik wpisał Gutenberg. W żądaniu pojawi się taka informacja: 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 fragment hill.

Typ danych wejściowych

Dostępne są różne typy elementów sterujących formularza, z których każdy ma wbudowane przydatne funkcje, które działają w różnych przeglądarkach i na różnych platformach. Dzięki atrybutowi type przeglądarka renderuje różne interfejsy użytkownika, pokazuje różne klawiatury ekranowe, używa różnych reguł weryfikacji i nie tylko. Zobaczmy, jak zmienić typ.

Dzięki użyciu type="checkbox" przeglądarka renderuje teraz pole wyboru, a nie pole tekstowe. To pole wyboru zawiera też atrybuty dodatkowe. Możesz ustawić atrybut checked, aby wyświetlał się jako sprawdzony.

Dostępne są też inne typy. Szczegółowe informacje na ten temat znajdziesz w dalszej części modułu.

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ć kilka wierszy tekstu? To jest przeznaczenie elementu <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 dodajesz element <select>. Podobnie jak w przypadku wszystkich innych elementów sterujących formularza, musisz połączyć je z elementem <label> za pomocą atrybutu id i nadać mu niepowtarzalną nazwę za pomocą atrybutu name.

Między tagiem początkowym a końcowym elementu <select> możesz dodać wiele elementów <option>, z których każdy reprezentuje jedno zaznaczenie.

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

Jeśli prześlesz formularz za pomocą tego parametru (<select>) bez zmiany wyboru, prośba będzie zawierać parametr 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ępnie wybierz opcję

Za pomocą atrybutu selected możesz wstępnie wybrać 1 opcję. Wartość ta staje się wartością domyślną niezależnie od kolejności, w jakiej są zdefiniowane elementy <option>.

Grupowanie elementów sterujących formularza

Czasami trzeba grupować elementy sterujące formularza. 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> w elemencie <fieldset>? Jak myślisz, do czego służy?

Jeśli Twoim zdaniem „Opisz 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>. <legend> musi też być pierwszym elementem w <fieldset>. Po elemencie <legend> możesz określić elementy sterujące formularza, które powinny być częścią grupy.

Przesyłanie formularza

Gdy nauczysz się dodawać i grupować elementy sterujące formularza, możesz zastanawiać się, 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 wyśle żądanie na adres URL podany w atrybucie action elementu <form>, korzystając ze wszystkich danych z elementów sterujących formularza.

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

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

Poza tym formularz można też przesyłać za pomocą klawisza Enter, gdy zaznaczone jest pole formularza.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elementach formularzy

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

for='color' (<label>) i name='color' na platformie <input>.
Spróbuj jeszcze raz.
for='color' (<label>) i id='color' na platformie <input>.
Dobrze!
id='color' (<label>) i for='color' na platformie <input>.
Spróbuj jeszcze raz.
name='color' (<label>) i for='color na platformie <input>.
Spróbuj jeszcze raz.

Czego używasz do sterowania formularzem wielowierszowym?

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

Jak przesłać formularz?

Kliknięcie elementu <button>.
Dobrze, to jest jedna z opcji.
Używam klucza Enter.
Dobrze, to jest jedna z opcji.
Kliknięcie elementu <input> z atrybutem type='submit'.
Dobrze, to jest jedna z opcji.
Wszystkie powyższe odpowiedzi.
Dobrze, wszystkie odpowiedzi to możliwe opcje przesłania formularza.

Zasoby