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 atrybutselected
. - 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>
.for='color'
(<label>
) i id='color'
na platformie <input>
.id='color'
(<label>
) i for='color'
na platformie <input>
.name='color'
(<label>
) i for='color
na platformie <input>
.Czego używasz do sterowania formularzem wielowierszowym?
<input>
z type='multi-line'
.<text>
.<textarea>
.<input>
z type='long'
.Jak przesłać formularz?
<button>
.Enter
.<input>
z atrybutem type='submit'
.