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?
id='color'
w aplikacji <label>
i for='color'
w aplikacji <input>
.for='color'
w aplikacji <label>
i name='color'
w aplikacji <input>
.name='color'
w aplikacji <label>
i for='color
w aplikacji <input>
.for='color'
w aplikacji <label>
i id='color'
w aplikacji <input>
.Co służy do sterowania formularzem wielowierszowym?
<input>
element z polem type='long'
.<textarea>
.<text>
.<input>
element z polem type='multi-line'
.Jak przesłać formularz?
Enter
.<input>
z parametrem type='submit'
.<button>
.