Większość witryn i aplikacji zawiera formularz internetowy. Strony z żartami, takie jak DoWebsites<form>.
Element HTML <form> wskazuje punkt orientacyjny dokumentu z interaktywnymi elementami sterującymi do przesyłania informacji. W polu <form> znajdziesz wszystkie interaktywne (i nieinteraktywne) elementy sterujące, które z nich korzystają.
HTML daje ogromne możliwości. W tej sekcji omawiamy możliwości, jakie daje kod HTML, i poznasz jego możliwości bez dodawania JavaScriptu. Używanie danych formularza po stronie klienta do aktualizowania interfejsu w jakiś sposób zwykle wymaga korzystania z CSS lub JavaScriptu, którego nie omówiliśmy w tym artykule. Dostępny jest cały kurs Formularzy szkoleniowe. Nie będziemy tu powielać tej sekcji, ale wprowadzimy kilka funkcji związanych z formularzem i odpowiednie atrybuty HTML.
Formularze umożliwiają użytkownikom interakcję z Twoją witryną lub aplikacją, weryfikowanie podanych informacji i przesyłanie danych na serwer. Dzięki atrybutom HTML użytkownik może wymagać wyboru elementów sterujących formularza lub wpisywania wartości. Atrybuty HTML mogą definiować określone kryteria, do których wartości muszą zostać spełnione, aby były prawidłowe. Gdy użytkownik próbuje przesłać formularz, wszystkie jego wartości przechodzą weryfikację ograniczeń po stronie klienta i mogą uniemożliwić przesłanie formularza, dopóki dane nie spełnią wymaganych kryteriów. Wszystko to bez JavaScriptu. Możesz też wyłączyć tę funkcję. Ustawienie atrybutu novalidate w elemencie <form> lub częściej formnovalidate na przycisku, zapisanie danych formularza w celu późniejszego wypełnienia, uniemożliwi weryfikację.
Przesyłanie formularzy
Formularze są przesyłane, gdy użytkownik aktywuje umieszczony w nim przycisk przesyłania. Jeśli w przypadku przycisków używasz parametru <input>, „wartość” jest etykietą przycisku i jest na nim wyświetlana. Gdy używasz elementu <button>, etykieta jest tekstem między otwierającym i zamykającym tagiem <button>. Przycisk przesyłania można dodać na 2 sposoby:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Na potrzeby bardzo prostego formularza potrzebujesz elementu <form>, w którym znajdują się pola do wprowadzania danych w formularzu, i przycisku przesyłania. Jest jednak coś więcej, jeśli chodzi o przesłanie formularza.
Atrybuty elementu <form> określają metodę HTTP, za pomocą której przesyłany jest formularz, oraz adres URL przetwarzający ten formularz. Tak, formularze można przesyłać i przetwarzać, a także wczytywać nowe strony bez użycia kodu JavaScript. I tak właśnie element <form>.
Wartości atrybutów action i method elementu <form> określają adres URL, który przetwarza dane formularza, i metodę HTTP używaną do ich przesyłania.
Domyślnie dane formularza są wysyłane na bieżącą stronę. W przeciwnym razie w atrybucie action podaj adres URL, do którego mają być przesyłane dane.
Wysyłane dane składają się z par nazwa-wartość różnych elementów sterujących formularza. Domyślnie obejmuje to wszystkie elementy sterujące formularza zagnieżdżone w formularzu, które zawierają element name. Dzięki atrybutowi form możesz jednak uwzględnić elementy sterujące formularza poza elementem <form> i pominąć elementy sterujące formularza zagnieżdżone w elemencie <form>. Obsługiwany w elementach sterujących formularza i <fieldset> atrybut form przyjmuje jako wartość id formy, z którą jest powiązany, a niekoniecznie takiej, w jakiej jest zagnieżdżony. Oznacza to, że elementy sterujące formularza nie muszą być fizycznie zagnieżdżone w elemencie <form>.
Atrybut method określa protokół HTTP żądania: zwykle GET lub POST. Dzięki GET dane formularza są wysyłane jako ciąg parametrów składający się z par name=value, który jest dołączany do adresu URL parametru action.
W przypadku POST dane są dołączane do treści żądania HTTP. Wysyłając bezpieczne dane, takie jak hasła czy dane karty kredytowej, zawsze używaj usługi POST.
Jest też metoda DIALOG. Jeśli <form method="dialog"> znajduje się w obrębie <dialog>, przesłanie formularza spowoduje zamknięcie okna. Pojawi się zdarzenie przesłania, ale dane nie zostaną wyczyszczone ani przesłane. Znowu bez JavaScriptu. Informacje na ten temat znajdziesz w sekcji okna. Pamiętaj, że nie spowoduje to przesłania formularza, więc prawdopodobnie lepiej będzie umieścić na przycisku przesyłania zarówno formmethod="dialog", jak i formnovalidate.
Przyciski formularza mogą mieć więcej atrybutów niż opisano na początku tej sekcji. Jeśli przycisk zawiera atrybut formaction, formenctype, formmethod, formnovalidate lub formtarget, wartości ustawione na tym przycisku aktywujące przesłanie formularza mają pierwszeństwo przed wartościami action, enctype, method i target ustawionymi na <form>. Weryfikacja ograniczenia ma miejsce przed przesłaniem formularza, ale tylko wtedy, gdy nie ma znaku formnovalidate na aktywowanym przycisku przesyłania ani novalidate na platformie <form>.
Aby sprawdzić, który przycisk został użyty do przesłania formularza, nadaj przyciskowi name. Przyciski bez nazwy lub wartości nie są wysyłane z danymi formularza po przesłaniu formularza.
Po przesłaniu formularza
Gdy użytkownik przesyła wypełniony formularz online, wysyłane są nazwy i wartości odpowiednich opcji w formularzu. Nazwa jest wartością atrybutu name. Wartości pochodzą z zawartości atrybutu value lub wartości wpisanej lub wybranej przez użytkownika. Wartość <textarea> to jej tekst wewnętrzny.
Wartość pola <select> jest wartością value wybranego parametru <option> lub, jeśli <option> nie zawiera atrybutu value, wartością jest wewnętrzny tekst wybranej opcji.
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
Wybranie opcji „Hoover Sukhdeep” (lub usunięcie jej w przeglądarce, która domyślnie powoduje wybranie pierwszej wartości opcji), a potem kliknięcie przycisku przesyłania spowoduje ponowne załadowanie strony i ustawienie adresu URL:
https://web.dev/learn/html/forms?student=hoover
Druga opcja nie ma atrybutu value, więc jako wartość przesyła się tekst wewnętrzny. Po kliknięciu „Blendan Smooth”
i kliknięciu przycisku przesyłania strona załaduje się ponownie, a URL zmieni się na:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Po przesłaniu formularza wysyłane informacje obejmują nazwy i wartości wszystkich elementów sterujących nazwanego, które mają element name, z wyjątkiem niewybranych pól wyboru, niewybranych przycisków oraz nazw i wartości przycisków innych niż ten, w którym przesłano formularz. W przypadku wszystkich innych elementów sterujących formularza: jeśli element sterujący formularza ma nazwę, ale nie wpisano ani nie ustawiono żadnej wartości, element name elementu sterującego formularza zostanie przesłany z pustą wartością.
Istnieją 22 typy danych wejściowych, więc nie możemy ich poznać wszystkich.
Pamiętaj jednak, że podanie wartości jest opcjonalne, a często nie jest to dobry pomysł, gdy chcesz wprowadzić informacje przez użytkownika.
W przypadku elementów <input>, których użytkownik nie może edytować wartości, należy zawsze podawać wartość – także w przypadku elementów wejściowych o typie hidden, radio, checkbox, submit, button i reset.
Używanie unikalnych elementów name do elementów sterujących formularza ułatwia przetwarzanie danych po stronie serwera i jest zalecane, a wyjątkami od tej reguły są pola wyboru i przyciski.
Opcje
Zdarza się, że zdarzyło Ci się zauważyć, że po wybraniu opcji w grupie przycisków, w danym momencie można wybrać tylko jedną z nich, co jest spowodowane atrybutem name. Ten efekt, który można wybrać tylko jeden, polega na przypisaniu każdej opcji w grupie tego samego elementu name.
Element name powinien być unikalny w obrębie grupy: jeśli przypadkowo użyjesz tego samego atrybutu name w 2 osobnych grupach, wybranie opcji w drugiej grupie spowoduje odznaczenie wszystkich opcji dotyczących tego samego elementu name w pierwszej grupie.
Wartości name i value dotyczące wybranego przycisku są przesyłane wraz z formularzem. Upewnij się, że każda opcja ma odpowiedni (i zwykle unikalny) element value. Wartości niewybranych przycisków nie są wysyłane.
Na stronie możesz mieć dowolną liczbę grup opcji. Każda z nich będzie działać niezależnie, o ile każda ma unikalny element name.
Jeśli chcesz wczytywać stronę przy użyciu jednej z opcji w wybranej grupie o tej samej nazwie, dodaj atrybut checked.
Ta opcja będzie pasować do pseudoklasy CSS :default, nawet jeśli użytkownik wybierze inną opcję. Obecnie wybrany przycisk pasuje do pseudoklasy :checked.
Jeśli użytkownik musi wybrać element sterujący z grupy opcji, dodaj atrybut required do co najmniej jednego z tych elementów. Dołączenie opcji required w grupie sprawia, że przesłanie formularza jest wymagane, ale nie musi to być opcja z atrybutem, który zostanie uznany za prawidłowy. W <legend> poinformuj też jasno, że wymagane jest ustawienie formularza. Etykiety grup opcji wraz z poszczególnymi przyciskami zostaną opisane później.
Pola wyboru
Wszystkie pola wyboru w grupie muszą mieć takie same name. Tylko zaznaczone pola wyboru zawierają formularze name i value. Jeśli jest wiele pól wyboru z tą samą nazwą, ta sama nazwa zostanie przesłana z (prawdopodobnie) różnymi wartościami. Jeśli masz kilka elementów sterujących o tej samej nazwie, nawet jeśli nie wszystkie są polami wyboru, zostaną one przesłane i oddzielone znakiem „&”.
Jeśli w polu wyboru nie podasz value, domyślnie będą one miały wartość on, co prawdopodobnie nie będzie przydatne. Jeśli są zaznaczone 3 pola wyboru o nazwie chk, nie da się rozszyfrować przesłanego formularza:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Aby wymagane pole wyboru było wymagane, dodaj atrybut required. Zawsze informuj użytkownika, że musi zaznaczyć pole wyboru lub gdy wymagane jest sterowanie formularzem. Dodanie atrybutu required do pola wyboru sprawia, że jest ono wymagane. Nie ma to wpływu na inne pola o tej samej nazwie.
Etykiety i zestawy pól
Aby użytkownicy wiedzieli, jak wypełnić formularz, musi on być dostępny. Każdy element sterujący formularza musi mieć etykietę.
Chcesz oznaczyć etykietą grupy elementów sterujących formularza. Poszczególne dane wejściowe, zaznaczenia i teksty są oznaczone etykietą <label>, a grupy elementów sterujących formularza są oznaczone etykietą <legend> elementu <fieldset>, który je grupuje.
W poprzednich przykładach można zauważyć, że wszystkie elementy sterujące formularza oprócz przycisku przesyłania mają atrybut <label>. Etykiety udostępniają elementy sterujące formularzy z nazwami na potrzeby ułatwień dostępu. Nazwa przycisków pochodzi z ich treści lub wartości. Wszystkie inne elementy sterujące formularza wymagają powiązanego elementu <label>. Jeśli nie ma powiązanej etykiety, przeglądarka nadal renderuje elementy sterujące formularza, ale użytkownicy nie wiedzą, jakich informacji się spodziewają.
Aby wyraźnie powiązać element sterujący formularza z elementem <label>, umieść atrybut for w elemencie <label>. Jego wartością będzie id elementu sterującego formularza, z którym jest on powiązany.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Powiązanie etykiet z elementami sterującymi formularza ma kilka zalet. Dzięki etykietom użytkownicy czytników ekranu mają dostęp do elementów sterujących formularza, ponieważ nadać im nazwę na potrzeby ułatwień dostępu. Etykiety są także „obszarami działań”, ponieważ powiększają obszar, dzięki czemu witryna jest bardziej przydatna dla użytkowników mających problemy z wygodą. Jeśli używasz myszy, kliknij dowolne miejsce etykiety „Twoja nazwa”. W ten sposób skoncentrujesz się na danych wejściowych.
Aby podać etykiety niejawne, umieść element sterujący formularzem między otwierającym i zamykającym tagiem <label>. Jest ono dostępne zarówno z perspektywy czytnika ekranu, jak i z perspektywy urządzenia wskazującego, ale nie zapewnia atrakcyjnego stylu, jak w przypadku etykiety jednoznacznej.
<label>Your name
<input type="text" name="name">
</label>
Etykiety są „obszarami działań”, dlatego nie umieszczaj w jednej etykiecie elementów interaktywnych ani żadnych innych komponentów interaktywnych innych niż oznaczone etykietą elementy sterujące formularzem w etykiety niejawnej. Jeśli na przykład umieszczasz link w etykiecie, a przeglądarka renderuje kod HTML, może zdezorientować użytkowników, gdy po kliknięciu etykiety w celu wpisania elementu sterującego formularzem zostaną przekierowani na nową stronę.
Ogólnie element <label> znajduje się przed elementem sterującym formularza, z wyjątkiem przycisków i pól wyboru. Nie jest to wymagane.
To po prostu typowy wzorzec UX. Seria „Nauka formularzy” zawiera informacje o projektowaniu formularzy.
W przypadku grup opcji i pól wyboru etykieta zawiera dostępną nazwę elementu sterującego formularza, z którym jest powiązana. Grupa elementów sterujących i ich etykiety też musi mieć etykietę. Aby oznaczyć grupę etykietą, pogrupuj wszystkie elementy w jednostkę <fieldset>, przy czym <legend> będzie określać etykietę grupy.
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
W tym przykładzie niejawna funkcja <label> oznacza opcję, a element <legend> określa etykietę grupy tych przycisków.
Umieszczenie elementu <fieldset> w innym obiekcie <fieldset> jest standardową praktyką. Jeśli na przykład formularz jest ankietą składającą się z wielu pytań podzielonych na grupy powiązanych pytań, atrybut <fieldset> „ulubiony uczeń” może być zagnieżdżony w innym elemencie <fieldset> o nazwie „Twoje ulubione”:
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
Domyślny wygląd tych elementów sprawił, że są one niedostatecznie wykorzystywane, ale elementy <legend> i <fieldset> można dostosowywać za pomocą CSS.
Oprócz wszystkich atrybutów globalnych <fieldset> obsługuje też atrybuty name, disabled i form.
Wyłączenie zbioru pól powoduje wyłączenie wszystkich zagnieżdżonych elementów sterujących formularza. Ani atrybut name, ani form nie mają dużego zastosowania w <fieldset>. Parametr name może służyć do uzyskiwania dostępu do zbioru pól za pomocą JavaScriptu, ale samego zbioru pól nie ma w przesłanych danych (obejmuje to nazwane elementy sterujące formularza zagnieżdżone w plikach).
Typy wprowadzania i klawiatura dynamiczna
Jak już wspomnieliśmy, dostępne są 22 rodzaje danych wejściowych.
W niektórych przypadkach, gdy użytkownik korzysta z urządzenia z klawiaturą dynamiczną, która wyświetla się tylko w razie potrzeby, np. na telefonie, typ wyświetlanej klawiatury zależy od typu użytego urządzenia wejściowego. Wyświetlaną domyślną klawiaturę można zoptymalizować pod kątem wymaganego rodzaju wprowadzania.
Na przykład wpisanie tel spowoduje wyświetlenie klawiatury zoptymalizowanej pod kątem numerów telefonów; email zawiera @ i ., a klawiatura dynamiczna url zawiera dwukropek i ukośnik. iPhone nadal nie zawiera klawiatury : na domyślnej klawiaturze dynamicznej dla url typów wprowadzania.
Klawiatury <input type="tel"> na iPhonie i dwóch różnych telefonach z Androidem:
Klawiatury <input type="email"> na iPhonie i dwóch różnych telefonach z Androidem:
Uzyskiwanie dostępu do mikrofonu i kamery
Typ danych wejściowych „<input type="file">” umożliwia przesyłanie plików za pomocą formularzy. Pliki mogą być dowolnego typu. Można je określać i ograniczać za pomocą atrybutu accept. Lista akceptowanych typów plików może być rozdzielaną przecinkami listą rozszerzeń plików, typem globalnym lub kombinacji typów i rozszerzeń globalnych. Na przykład accept="video/*, .gif" akceptuje wszystkie pliki wideo i animowane GIF-y.
Użyj „audio/*” w przypadku plików dźwiękowych, „video/*” w przypadku plików wideo i „image/*” w przypadku plików graficznych.
Podany atrybut capture, zdefiniowany w specyfikacji nagrywania multimediów, może być używany, gdy chcesz utworzyć nowy plik multimedialny przy użyciu kamery lub mikrofonu użytkownika. Możesz ustawić wartość user w przypadku urządzeń wejściowych, które widzą użytkownicy, albo environment dla tylnego aparatu lub mikrofonu telefonu. Ogólnie rzecz biorąc, użycie capture bez wartości działa, ponieważ użytkownik wybiera urządzenie wejściowe, którego chce użyć.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Wbudowana weryfikacja
Kod HTML również bez użycia JavaScriptu może uniemożliwiać przesyłanie formularzy z nieprawidłowymi wartościami.
Niektóre selektory arkusza CSS dopasowują elementy sterujące formularza na podstawie obecności atrybutów HTML, w tym :required i :optional, czy wartość logiczna required jest ustawiona czy nie; :default, jeśli checked jest zakodowany na stałe, oraz :enabled lub :disabled w zależności od tego, czy ten element jest obecny.disabled Pseudoklasa :read-write dopasowuje elementy ze zbiorem contenteditable i elementami sterującymi formularza, które są domyślnie możliwe do edytowania, takimi jak number, password i text (ale nie z polami wyboru, przyciskami radiowymi czy typem hidden). Jeśli element, który zwykle jest możliwy do zapisu, ma ustawiony atrybut readonly, będzie pasować do :read-only.
Gdy użytkownik wpisuje informacje w elementach sterujących formularza, w zależności od stanu włączają się i wyłączają selektory interfejsu CSS, w tym :valid, :invalid, :in-range i :out-of-range. Gdy użytkownik zamknie element sterujący formularza, dopasuje się nie w pełni obsługiwana pseudoklasa :user-invalid lub :user-valid.
Możesz używać CSS, aby wskazać, czy elementy sterujące formularzem są wymagane i prawidłowe podczas interakcji użytkownika z formularzem. Możesz nawet użyć CSS, aby uniemożliwić użytkownikom kliknięcie przycisku przesyłania, dopóki formularz nie będzie ważny:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Ten fragment kodu CSS ma charakter antywzorcowy. Mimo że interfejs może wydawać się intuicyjny i przejrzysty, wielu użytkowników próbuje przesłać formularz, aby włączyć wyświetlanie komunikatów o błędach. Wyłączenie wyświetlania przycisku przesyłania w ten sposób uniemożliwia weryfikację ograniczeń – jest to funkcja, z której korzysta wielu użytkowników.
Stosowany kod CSS jest stale aktualizowany na podstawie bieżącego stanu interfejsu użytkownika. Jeśli na przykład dodasz typy danych wejściowych z ograniczeniami, takie jak email, number, url i typy dat, to jeśli wartość nie jest pusta (nie jest pusta), a bieżąca wartość nie jest prawidłowym adresem e-mail, liczbą, adresem URL, datą lub godziną, zostanie dopasowana pseudoklasa CSS :invalid. Ta stała aktualizacja różni się od wbudowanej weryfikacji ograniczeń HTML, która ma miejsce tylko wtedy, gdy użytkownik próbuje przesłać formularz.
Weryfikacja wbudowanych ograniczeń ma zastosowanie tylko do ograniczeń ustawionych za pomocą atrybutów HTML. Styl elementu możesz określić na podstawie pseudoklasy :required i :valid/:invalid, ale podczas przesyłania formularza przeglądarka wyświetlała komunikaty o błędach wynikające z błędów wynikających z atrybutów required, pattern, min, max, a nawet type.
Gdy próbujemy przesłać formularz bez wybierania wymaganego ulubionego ucznia, weryfikacja ograniczenia uniemożliwia przesłanie formularza z powodu błędu validityState.valueMissing.
Jeśli dowolna z właściwości validityState zwraca wartość true, przesyłanie jest zablokowane, a w pierwszym nieprawidłowym ustawieniu formularza przeglądarka wyświetla komunikat o błędzie. Gdy użytkownik aktywuje przesłanie formularza i wystąpi nieprawidłowe wartości, pierwsze nieprawidłowe ustawienie formularza spowoduje wyświetlenie komunikatu o błędzie i zaznaczenie. Jeśli wymagany element sterujący nie ma ustawionej wartości, wartość liczbowa jest poza zakresem lub wartość nie jest typu wymaganego przez atrybut type, formularz nie zostanie sprawdzony, formularz nie zostanie przesłany i pojawi się komunikat o błędzie.
Jeśli wartość number, data lub godzina są mniejsze niż minimalna wartość min ustawiona lub większa niż maksymalna wartość max, element sterujący będzie mieć wartość :out-of-range (i :invalid), a użytkownik zostanie poinformowany o błędzie valididityState.rangeUnderflow validityState.rangeOverflow podczas próby przesłania formularza. Jeśli wartość wychodzi poza krok z wartością step (bez względu na to, czy jest ustawiona bezpośrednio czy jako domyślna, 1), element sterujący ma wartość :out-of-range (i :invalid) i wystąpi błąd validityState.stepMismatch. Błąd wyświetla się w formie dymka i domyślnie zawiera przydatne informacje o tym, jak naprawić błąd.
Istnieją podobne atrybuty długości wartości: atrybuty minlength i maxlength poinformują użytkownika o błędzie za pomocą atrybutu validityState.tooLong lub validityState.tooShort podczas przesyłania.
maxlength zapobiega też wpisywaniu przez użytkownika zbyt wielu znaków.
Użycie atrybutu maxlength może zniechęcić użytkowników. Na ogół zaleca się, aby użytkownik mógł wpisać więcej znaków, niż jest to dozwolone, i opcjonalnie w postaci elementu <output>, który nie został przesłany razem z formularzem, w celu zmodyfikowania tekstu do chwili, gdy w wynikach pojawi się informacja o przekroczeniu maksymalnej dozwolonej długości. Kod maxlength można umieścić w kodzie HTML. Jak już wspomnieliśmy, działa bez JavaScriptu. Następnie po wczytaniu wartość atrybutu maxlength może być wykorzystana do utworzenia tego licznika znaków w JavaScript.
Niektóre typy danych wejściowych mają domyślne ograniczenia, ale tak nie jest. Na przykład typ wprowadzania tel umożliwia korzystanie z klawiatury numerycznej na urządzeniach z klawiaturą dynamiczną, ale nie ogranicza prawidłowych wartości. Na potrzeby tej i innych typów danych wejściowych dostępny jest atrybut pattern. Możesz podać wyrażenie regularne, które musi pasować do wartości, aby zostało uznane za prawidłowe.
Jeśli wartość jest pustym ciągiem znaków, a wartość nie jest wymagana, nie spowoduje to błędu validityState.patternMismatch. Jeśli pole jest wymagane i puste, użytkownik zobaczy domyślny komunikat o błędzie dotyczący błędu validityState.valueMissing, a nie patternMismatch.
W przypadku e-maili funkcja validityState.typeMismatch prawdopodobnie za nie odpowiada Twoim potrzebom. Dodaj atrybut pattern, aby adresy e-mail intranetowe bez domeny TLD nie były akceptowane jako prawidłowe.
Atrybut wzór umożliwia podanie wyrażenia regularnego, do którego musi pasować wartość. Jeśli wymagasz dopasowania do wzorca, upewnij się, że użytkownik jest bardzo wyraźnie pewny, czego może się spodziewać.
Wszystko to można zrobić bez ani jednego wiersza JavaScriptu. Jest to jednak interfejs HTML API, który pozwala uwzględniać komunikaty niestandardowe podczas weryfikacji ograniczeń. JavaScriptu możesz też używać do aktualizowania liczby znaków, które pozostało do końca, wyświetlania paska postępu wskazującego siłę hasła oraz do dowolnych innych sposobów dynamicznego poprawiania jakości hasła.
Przykład
W tym przykładzie znajduje się formularz w elemencie <dialog> z zagnieżdżonym polem <form> z 3 elementami sterującymi formularza i 2 przyciskami przesyłania, z jasnymi etykietami i instrukcjami.
Pierwszy przycisk przesyłania zamyka okno. Użyj formmethod="dialog", aby zastąpić domyślną metodę formularza, i zamknij <dialog> bez przesyłania danych lub ich usuwania. Musisz też uwzględnić pole formnovalidate, ponieważ w przeciwnym razie przeglądarka spróbuje sprawdzić, czy wszystkie wymagane pola mają wartość. Użytkownik może chcieć zamknąć okno i formularz bez wpisywania danych – weryfikacja to uniemożliwi. Dołącz element aria-label="close", ponieważ „X” to znany sygnał wizualny, ale nie jest to etykieta opisowa.
Wszystkie elementy sterujące formularza mają etykiety niejawne, więc nie musisz dodawać atrybutów id ani for. Oba elementy wejściowe mają wymagany atrybut, przez co są wymagane. Wartość w polu step jest jawnie ustawiona, aby zaprezentować, w jaki sposób uwzględniany jest element step. Ten atrybut można pominąć, ponieważ step ma domyślnie wartość 1.
<select> ma wartość domyślną, więc atrybut required jest zbędny. Zamiast umieszczać atrybut value w każdej opcji, domyślną wartością jest tekst wewnętrzny.
Przycisk przesyłania na końcu ustawia metodę formularzy na POST. Po kliknięciu zostanie sprawdzona poprawność każdej wartości. Jeśli wszystkie wartości są prawidłowe, dane formularza zostaną przesłane, okno zostanie zamknięte, a strona może przekierowywać na adres URL działania thankyou.php. Jeśli brakuje jakichkolwiek wartości albo wartość liczbowa jest niezgodna z krokiem lub jest poza zakresem, wyświetli się odpowiedni komunikat o błędzie zdefiniowany w przeglądarce, formularz nie zostanie przesłany, a okno nie zostanie zamknięte.
Domyślne komunikaty o błędach można dostosować za pomocą metody validityState.setCustomValidity('message here'). Pamiętaj, że jeśli ustawisz komunikat niestandardowy, musisz go podać jako pusty ciąg znaków, gdy wszystko jest prawidłowe, lub formularz nie zostanie przesłany.
Inne uwagi
Podana jest w całości sekcja poświęcona pomaganiu użytkownikom w wpisywaniu prawidłowych danych w formularzach. Aby zadbać o wygodę użytkowników, warto zadbać o to, aby nie popełniali błędów, dodając w razie potrzeby instrukcje i wskazówki. Chociaż ta sekcja dotyczy sposobu, w jaki sam kod HTML może zapewnić weryfikację po stronie klienta, walidacja musi odbywać się zarówno po stronie klienta, jak i po stronie serwera. Weryfikacja może być przeprowadzana w sposób dyskretny podczas wypełniania formularza, np. przez dodanie znacznika wyboru, gdy wartość jest prawidłowa. Nie przesyłaj jednak komunikatów o błędach, zanim kontrolki w formularzu będą gotowe. Jeśli użytkownik popełni błąd, poinformuj go, w którym miejscu się on pomylił i w czym się pomylił.
Podczas projektowania formularzy należy pamiętać, że nie każdy jest taki jak Ty. Ktoś może mieć tylko jedną literę na nazwisko (lub wcale nie mieć nazwiska), nie mieć kodu pocztowego, podać 3-wierszowy adres, może też nie mieć adresu. Może wyświetlać przetłumaczoną wersję formularza.
Elementy sterujące formularza, ich etykiety i komunikaty o błędach powinny być widoczne na ekranie, trafne i użyteczne, możliwe do automatycznego określenia oraz automatycznie powiązane z odpowiednim elementem lub grupą formularza. Aby umożliwić szybsze wypełnianie formularzy i ułatwić dostęp, można używać atrybutu autocomplete.
HTML udostępnia wszystkie narzędzia umożliwiające dostęp do podstawowych elementów sterujących formularza. Im bardziej interaktywny jest element formularza lub proces, tym więcej uwagi poświęca się ułatwieniom dostępu w odniesieniu do zarządzania fokusem, ustawiania i aktualizowania nazw, ról i wartości ARIA (w razie potrzeby) oraz ogłoszeń na żywo ARIA zgodnie z potrzebami. Jednak, jak się dowiedzieliśmy, przy użyciu samego języka HTML można osiągnąć wyznaczony cel, którym jest dostępność i trafność, bez konieczności korzystania z ARIA czy JavaScriptu.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę z zakresu formularzy
Co sprawia, że przyciski opcji należą do tej samej grupy?
name.id.Który element HTML informuje użytkownika, do czego służy to pole formularza?
<h1><title><label>