Formularze

Większość witryn i aplikacji zawiera formularz internetowy. witryny z żartami, takie jak DoWebsitesNeedToLookDokładniewwszystkimprzeglądarce.com, może nie mieć formularza, ale nawet strona MachineLearningWorkshop.com, wywodząca się z dowcipu primaaprilisowego, ma formularz, ale i fałszywego. Główne wezwanie do działania MLW to formularz rejestracyjny, za pomocą którego maszyny mogą zapisać się na warsztaty. Ten formularz znajduje się w elemencie <form>.

Element HTML <form> określa punkt orientacyjny dokumentu, który zawiera interaktywne elementy sterujące do przesyłania informacji. W obiekcie <form> znajdują się wszystkie interaktywne (i nieinteraktywne) elementy. elementy sterujące, które składają się na ten formularz.

HTML daje ogromne możliwości. W tej sekcji omawiamy możliwości języka HTML bez dodawania JavaScriptu. Użycie danych formularza po stronie klienta do zaktualizowania interfejsu w jakiś sposób wiąże się zazwyczaj z obsługą CSS lub JavaScriptu, co nie jest tu omówione. Istnieje cały kurs w Formularzach Learn (dostępny w języku angielskim). Nie będziemy powielać tej sekcji, ale przedstawimy kilka elementów sterujących formularza i dostępne atrybuty HTML.

Formularze umożliwiają użytkownikom interakcję z Twoją witryną lub aplikacją, sprawdzanie poprawności wpisanych informacji i przesyłanie ich dane na serwer. Atrybuty HTML mogą wymagać od użytkownika wybrania elementów sterujących formularza lub wpisania wartości. HTML; mogą określać kryteria, które musi zostać spełnione, aby wartość była poprawna. Gdy użytkownik spróbuje przesłać formularz, wszystkie wartości elementów sterujących formularza przechodzą weryfikację ograniczeń po stronie klienta i mogą uniemożliwić przesłanie dopóki dane nie spełnią wymaganych kryteriów; bez JavaScriptu. Możesz też wyłączyć tę funkcję: ustawiając novalidate w polu <form> lub – częściej – formnovalidate na przycisku, dzięki czemu możesz zapisać dane formularza do późniejszego wypełnienia, uniemożliwia weryfikację.

Przesyłanie formularzy

Formularze są przesyłane, gdy użytkownik aktywuje przycisk przesyłania umieszczony w formularzu. Jeśli użyjesz kodu <input> w przypadku przycisków, „value” to etykieta przycisku i wyświetlana na przycisku. W przypadku korzystania z funkcji <button> etykieta to tekst między znakiem otwierającym i zamknięcie <button> tagów. Przycisk przesyłania może być zapisany na 2 sposoby:

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>

W przypadku bardzo prostego formularza wymagany jest element <form> z możliwościami wprowadzania danych do formularza w środku oraz przycisk przesyłania. Istnieją jednak jest bardziej złożony.

Atrybuty elementu <form> ustawiają metodę HTTP przez podczas przesyłania formularza oraz adresu URL służącego do przetwarzania przesłanego formularza. Tak, formularze można przesyłać, przetwarzać nowa strona może zostać załadowana bez użycia kodu JavaScript. Element <form> ma ogromne możliwości.

action i method elementu <form> wartości atrybutów określają adres URL, który przetwarza dane formularza, oraz metodę HTTP użytą do ich przesłania. Domyślnie dane formularza są wysyłane na bieżącą stronę. W przeciwnym razie ustaw w atrybucie action adres URL, do którego mają zostać wysłane dane.

Wysyłane dane składają się z par nazwa/wartość elementów sterujących formularza. Domyślnie obejmuje to wszystkie formularze elementy sterujące zagnieżdżone w formularzu, które zawierają atrybut name. Jednak atrybut form umożliwia dodanie elementów sterujących formularza poza <form> i pominąć elementy sterujące formularza zagnieżdżone w obiekcie <form>. Obsługiwane w elementach sterujących formularza i <fieldset>, atrybut form przyjmuje jako wartość id formy elementu sterującego, z którym jest powiązany, niekoniecznie postaci, w której jest jest zagnieżdżony w. 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 formularzy są wysyłane jako ciąg parametrów name=value z dołączonymi do adresu URL parametru action.

W elemencie POST dane są dodawane do treści żądania HTTP. Podczas wysyłania bezpiecznych danych, takich jak hasła czy dane kart kredytowych zawsze używaj pola POST.

Istnieje też metoda DIALOG. Jeśli pole <form method="dialog"> znajduje się w elemencie <dialog>, przesłanie formularza spowoduje zamknięcie okna. występuje zdarzenie przesłania, mimo że dane nie zostały wyczyszczone ani przesłane. Tutaj znowu – bez JavaScriptu. Jest to omówione w w sekcji okna. Pamiętaj tylko, że wykonanie tej czynności nie spowoduje przesłania formularza, prawdopodobnie lepiej umieść zarówno formmethod="dialog", jak i formnovalidate w przycisku przesyłania.

Przyciski formularzy mogą mieć więcej atrybutów niż atrybuty opisane na początku tej sekcji. Jeśli przycisk zawiera formaction, formenctype, formmethod, formnovalidate lub formtarget, wartości ustawione na przycisku aktywującym formularz ma pierwszeństwo przed action, enctype, method i target ustaw na <form>. Weryfikacja ograniczeń odbywa się przed przesłaniem formularza, ale tylko wtedy, gdy nie ma żadnego formnovalidate po aktywowaniu przycisku przesyłania lub novalidate na <form>.

Aby pokazać, który przycisk został użyty do przesłania formularza, dodaj przycisk name. Przyciski bez nazwy i wartości nie są wysyłane razem z danymi formularza przy przesyłaniu formularza.

Po przesłaniu formularza

Gdy użytkownik przesyła wypełniony formularz online, przesyłane są nazwy i wartości odpowiednich opcji formularza. Nazwa jest wartością atrybutu name. Wartości pochodzą z zawartości atrybutu value lub wartości wpisanej lub wybranej przez użytkownika. Wartość pola <textarea> to jego wewnętrzny tekst. Wartość elementu <select> to value wybranego elementu <option>. Jeśli pole <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>

Wybieranie ucznia: Deptak Sukhdeep Wygładzenie blendan Tosty McToastface

Wybór „Hoover Sukhdeep” (lub nic nie robić, ponieważ przeglądarka wyświetla i dlatego domyślnie wybiera pierwszą wartość opcji) i kliknięcie przycisku Prześlij spowoduje ponowne załadowanie strony z adresem URL:

https://web.dev/learn/html/forms?student=hoover

Jako że druga opcja nie ma atrybutu value, jako wartość jest przesyłany tekst wewnętrzny. Wybieranie opcji „Blendan Smooth” i kliknięcie przycisku Prześlij spowoduje ponowne załadowanie strony z adresem URL:

https://web.dev/learn/html/forms?student=Blendan+Smooth

Gdy przesyłasz formularz, wysyłane informacje zawierają nazwy i wartości wszystkich nazwanych opcji formularza, które mają atrybut name z wyjątkiem niezaznaczonych pól wyboru, niewybranych opcji oraz nazw i wartości wszelkich przycisków innych niż to, które przesłał formularz. W przypadku wszystkich innych elementów sterujących formularza, jeśli element sterujący formularza ma nazwę, ale nie wprowadzono ani nie ustawiono żadnej wartości, w polu elementu name kontroli formularza zostaje przesłane z pustą wartością.

Ponieważ są 22 typy danych wejściowych, nie możemy przedstawić ich wszystkich. Pamiętaj jednak, że dodanie wartości jest opcjonalne i często niewłaściwe, gdy użytkownik chce wprowadzić informacje. W przypadku elementów <input>, w których użytkownik nie może edytować wartości, należy zawsze dodawać wartość, w tym także do wprowadzania danych elementy typu hidden, radio, checkbox, submit, button i reset.

Używanie unikalnych identyfikatorów name do kontrolowania formularzy ułatwia przetwarzanie danych po stronie serwera. Zalecamy dodanie pól wyboru i będące wyjątkami od tej reguły.

Opcje

Jeśli zauważyłeś kiedyś, że po zaznaczeniu opcji w grupie przycisków, w jednorazowo, to dzięki atrybutowi name. Ten efekt można wybrać tylko raz, dodając przy każdym przycisku opcji w grupie tych samych elementów name.

Element name powinien być unikalny dla grupy: jeśli przypadkowo użyjesz tego samego elementu name w dwóch osobnych grupach, wybierz opcję w drugiej grupie odznaczy wszystkie zaznaczenia wybrane w pierwszej grupie z tym samym atrybutem name.

Razem z formularzem są przesyłane name wraz z value wybranej opcji. Upewnij się, że każdy przycisk ma istotne (i zwykle unikalne) value. Wartości niewybranych opcji nie są wysyłane.

Na stronie możesz mieć dowolną liczbę grup radiowych. Każda z nich działa niezależnie, o ile unikalny dla grupy name.

Jeśli chcesz wczytać stronę z jedną z wybranych opcji w grupie o tej samej nazwie, dołącz atrybut checked. Ten przycisk opcji pasuje do pseudoklasy CSS :default, nawet jeśli użytkownik wybierze inne radio. Obecnie wybrana opcja pasuje do opcji :checked pseudoklasy.

Jeśli użytkownik musi wybrać opcję z grupy opcji, dodaj atrybut required do co najmniej jednej dostępnych opcji. Umieszczenie elementu required w opcji w grupie powoduje, że przesłanie formularza wymaga wyboru, ale nie musi to być radio z wybranym atrybutem, który jest prawidłowy. Wyraźnie poinformuj też o tym w <legend> że wymagane jest sterowanie formularzem. Zostały opisane etykiety grup opcji wraz z poszczególnymi przyciskami. później.

Pola wyboru

Wszystkie pola wyboru w grupie muszą mieć ten sam atrybut name. Tylko zaznaczone pola wyboru mają atrybuty name i value który został przesłany wraz z formularzem. Jeśli masz zaznaczonych kilka pól wyboru z tą samą nazwą, ta sama nazwa zostanie przesłana wraz z różnych wartości. Jeśli masz wiele opcji formularza o tej samej nazwie, nawet jeśli nie wszystkie są polami wyboru, Zostaną przesłane, rozdzielone symbolem „&”.

Jeśli nie uwzględnisz value w polu wyboru, zaznaczone pola wyboru będą mieć domyślnie wartość on, co prawdopodobnie nie jest pomocne. Jeśli masz 3 pola wyboru o nazwie chk i wszystkie są zaznaczone, nie będzie można rozszyfrować przesłanego formularza:

https://web.dev/learn/html/forms?chk=on&chk=on&chk=on

Aby pole wyboru było wymagane, dodaj atrybut required. Zawsze informuj użytkownika, gdy pole wyboru musi być zaznaczone lub gdy wymagane są elementy sterujące formularza. Dodanie atrybutu required do pola wyboru sprawia, że jest ono wymagane. Nie ma to wpływu na inne o tej samej nazwie.

Etykiety i zbiory pól

Aby użytkownicy wiedzieli, jak wypełnić formularz, musi on być dostępny. Każdy element sterujący formularza musi mieć etykietę. Możesz też dodać etykiety do grup elementów sterujących formularza. Pojedyncze obszary tekstowe są oznaczone etykietą <label>, grup elementów sterujących formularza jest oznaczonych etykietą <legend> w <fieldset>, który je grupuje.

W poprzednich przykładach udało Ci się zauważyć, że każdy element sterujący formularza oprócz przycisku przesyłania ma parametr <label>. Etykiety udostępniać elementy sterujące formularzem z nazwami na potrzeby ułatwień dostępu. Przyciski zawdzięczają swoją przystępną nazwę na podstawie treści lub wartości. Wszystkie pozostałe elementy sterujące formularza wymagają powiązanego elementu <label>. Jeśli nie ma powiązanej etykiety, przeglądarka nadal wyrenderuje elementy sterujące formularza ale użytkownicy nie będą wiedzieć, jakich informacji się oczekuje.

Aby wprost powiązać element sterujący formularza z elementem <label>, umieść atrybut for w <label>. Wartość stanowi Element id elementu sterującego formularza, z którym jest powiązany.

<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">

Twoje imię i nazwisko

Powiązanie etykiet z elementami sterującymi formularza ma kilka zalet. Etykiety udostępniają użytkownikom czytników ekranu elementy sterujące formularzy przez nadając elementowi sterującemu dostępną nazwę. Etykiety są też „obszarami działań”, sprawiają, że witryna staje się bardziej przydatna dla użytkowników problemy sprawnością ruchową, zwiększając obszar. Jeśli używasz myszy, kliknij dowolne miejsce etykietę „Twoje imię”. Wykonuję więc kładzie nacisk na dane wejściowe.

Aby podać etykiety niejawne, uwzględnij element sterujący formularza między otwierającym i zamykającym tagiem <label>. Równa się jest dostępna zarówno z perspektywy czytnika ekranu, jak i urządzenia wskazującego, ale nie oferuje elementu przyciągającego styl, jak .

<label>Your name
  <input type="text" name="name">
</label>

Imię i nazwisko

Etykiety są „obszarami działań”, więc nie umieszczaj w jednoznacznej etykiecie ani żadnych innych elementów interaktywnych innej niż oznaczona kontrolką formularza w etykiecie niejawnej. Jeśli na przykład umieścisz w etykiecie link, a przeglądarka spowoduje wyrenderowanie kodu HTML, użytkownicy będą zdezorientowani, jeśli klikną etykietę, aby przejść do elementu sterującego formularza, ale zostaną przekierowani do strony nową stronę.

Zwykle <label> znajduje się przed elementem sterującym formularza, z wyjątkiem opcji i pól wyboru. Nie jest to wymagane. To po prostu typowy wzorzec UX. Seria Dowiedz się więcej o Formularzach 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. ale grupa ustawień i ich etykiety również wymagają etykiety. Aby oznaczyć grupę etykietą, pogrupuj wszystkie elementy w jeden <fieldset>, gdzie <legend> 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 etykieta <label> oznacza każdą opcję, a element <legend> podaje etykietę grupy przycisków. Zagnieżdżanie elementu <fieldset> w innym miejscu (<fieldset>) jest standardową praktyką. Na przykład jeśli formularz to ankieta z wieloma pytaniami podzielone na grupy powiązanych pytań: „ulubiony uczeń” Element <fieldset> może być zagnieżdżony w innym elemencie <fieldset> oznaczonym jako „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 -->

Te elementy są zbyt rzadko używane, ale elementy <legend> i <fieldset> można dostosować za pomocą CSS. Oprócz wszystkich atrybutów globalnych <fieldset> obsługuje również atrybuty name, disabled i form. Wyłączenie zbioru pól powoduje wyłączenie wszystkich zagnieżdżonych elementów sterujących formularza. Ani name, ani form nie mają na <fieldset>. Obiektu name można użyć, aby uzyskać dostęp do zbioru pól za pomocą JavaScriptu, ale do samego zbioru pól nie jest ujęty w przesłanych danych (uwzględniane są umieszczone w nim elementy sterujące formularza).

Typy danych wejściowych i klawiatura dynamiczna

Jak wspomnieliśmy, są 22 różne typy 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 używanej klawiatury określa typ wyświetlanej klawiatury. Domyślna klawiatura może być zoptymalizowana pod kątem wymaganego typu wprowadzania. Na przykład wpisanie „tel” spowoduje wyświetlenie klawiatury zoptymalizowanej pod kątem wpisywania numerów telefonów. email obejmuje @ i .; oraz klawiatura dynamiczna dla url zawiera dwukropek i symbol ukośnika. Niestety, iPhone nadal nie zawiera : w domyślna klawiatura dynamiczna dla typów wprowadzania url.

Klawiatury dla <input type="tel"> na iPhonie i dwóch różnych telefonach z Androidem:

Klawiatury dla <input type="email"> na iPhonie i dwóch różnych telefonach z Androidem:

Dostęp do mikrofonu i kamery

Typ danych wejściowych pliku (<input type="file">) umożliwia przesyłanie plików za pomocą formularzy. Pliki mogą być dowolnego typu, zdefiniowane lub ograniczone. za pomocą atrybutu accept. Lista dopuszczalnych typów plików może mieć postać rozdzielanej przecinkami listy rozszerzeń plików, typu globalnego, lub kombinację typów i rozszerzeń globalnych. Na przykład accept="video/*, .gif" akceptuje wszystkie pliki wideo i animowane GIF-y. Użyj konta „audio/*” dla plików dźwiękowych, „video/*” dla plików wideo oraz „image/*” plików graficznych.

Wyliczony atrybut capture zdefiniowany w specyfikacja przechwytywania multimediów, może być używana, jeśli nowe multimedia do tworzenia pliku za pomocą kamery lub mikrofonu użytkownika. Możesz ustawić wartość user w przypadku urządzeń wejściowych dla użytkownika. lub environment w przypadku tylnego aparatu lub mikrofonu telefonu. Ogólnie rzecz biorąc, użycie parametru capture bez wartości działa, ponieważ użytkownik wybierze, którego urządzenia wejściowego ma używać.

<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">

Wbudowana weryfikacja

Tak jak w przypadku kodu JavaScript, kod HTML może zapobiegać przesyłaniu formularzy z nieprawidłowymi wartościami.

Niektóre selektory arkusza CSS pasują do elementów sterujących formularza na podstawie obecności atrybutów HTML, takich jak :required i :optional, jeśli wartość logiczna required jest ustawiony lub nie, :default jeśli checked jest zakodowany na stałe, i :enabled lub :disabled, w zależności od tego, czy element jest interaktywny oraz czy disabled . Pseudoklasa :read-write dopasowuje elementy z argumentem Ustawienie contenteditable i elementy sterujące formularza, które można domyślnie edytować, takie jak typy danych wejściowych number, password i text (ale bez pola wyboru), przycisków opcji lub typu hidden). Jeśli element normalnie dostępny do zapisu ma parametr readonly zostanie dopasowany do wartości atrybutu :read-only.

Gdy użytkownik będzie wpisywać informacje w elementach sterujących formularza, selektory interfejsu CSS, w tym :valid, :invalid, :in-range i Funkcja :out-of-range będzie się włączać i wyłączać w zależności od stanu. Gdy użytkownik zamyka element sterujący formularza, albo nieobsługiwany jeszcze element :user-invalid lub :user-valid pseudoklasa zostanie dopasowana.

Za pomocą CSS możesz zapewnić informacje o tym, czy elementy sterujące formularzem są wymagane i prawidłowe, gdy użytkownik wejdzie w interakcję z formularzem. Możesz nawet użyć CSS, aby uniemożliwić użytkownikom kliknięcie przycisku przesyłania, dopóki formularz nie będzie prawidłowy:

form:invalid [type="submit"] {
  opacity: 50%;
  pointer-events: none;
}

Ten fragment kodu CSS jest antywzorcem. Chociaż interfejs może wydawać się intuicyjny i przejrzysty, wielu użytkowników próbuje przesłać formularz, włączyć komunikaty o błędach. Przycisk przesyłania sprawia, że przycisk przesyłania jest wyłączony w ten sposób, nie umożliwia też weryfikacji ograniczenia. na których opiera się wielu użytkowników.

Zastosowany kod CSS jest stale aktualizowany na podstawie bieżącego stanu interfejsu użytkownika. Na przykład, gdy uwzględnisz typy danych wejściowych z takich jak email, number, url i typy dat, jeśli wartość jest różna od null (nie pusta) i bieżąca Wartość nie jest prawidłowym adresem e-mail, liczbą, adresem URL, datą lub godziną, pseudoklasa CSS :invalid pasuje. Ta stała aktualizowanie różni się od wbudowanej weryfikacji ograniczeń HTML, która następuje tylko wtedy, gdy użytkownik próbuje przesłać formularz.

Wbudowana weryfikacja ograniczeń ma zastosowanie tylko do ograniczeń ustawionych za pomocą atrybutów HTML. Można określić styl elementu w oparciu o w pseudoklasach :required i :valid/:invalid przeglądarka dostarczyła komunikaty o błędach, które wynikają z błędów: atrybuty required, pattern, min, max, a nawet type są dostępne w momencie przesłania formularza.

Gdy próbujemy przesłać formularz bez wybrania ulubionego ucznia, weryfikacja ograniczeń uniemożliwia przesłanie formularza. z powodu błędu validityState.valueMissing.

Jeśli którakolwiek z właściwości validityState zwraca wartość true, przesyłanie jest blokowane, a przeglądarka wyświetli komunikat o błędzie. w pierwszym nieprawidłowym elemencie sterującym, ustawiając fokus. Jeśli użytkownik aktywuje przesłanie formularza, a wartości są nieprawidłowe, pierwszy nieprawidłowy element sterujący wyświetli komunikat o błędzie i zaznaczy element. Jeśli wymagane ustawienie nie ma ustawionej wartości, a wartość liczbowa jest poza zakresem, a jeśli wartość nie jest typu wymaganego przez atrybut type, formularz nie zostanie sprawdzony, nie zostanie przesłany i zostanie wyświetlony komunikat o błędzie.

Jeśli wartość parametru number, data lub godzina jest mniejsza niż ustawiona minimalna wartość w polu min lub większa od wartości maksymalnej ustawionej w max, wartość elementu sterującego będzie wynosić :out-of-range (oraz :invalid) oraz użytkownik zostanie poinformowany o valididityState.rangeUnderflow, validityState.rangeOverflow podczas spróbuj przesłać formularz. Jeśli wartość jest poza krokami argumentu step ma wartość jawną lub domyślną wartość 1. Element sterujący będzie mieć wartość :out-of-range (oraz :invalid). Błąd validityState.stepMismatch. Błąd ma postać dymku i domyślnie zawiera przydatne informacje o tym, jak go naprawić.

Istnieją podobne atrybuty długości wartości: minlength i maxlength będą informować użytkownika o błędzie z funkcją validityState.tooLong lub validityState.tooShort po przesłaniu. Parametr maxlength zapobiega również wpisywaniu zbyt wielu znaków przez użytkownika.

Użycie atrybutu maxlength może negatywnie wpłynąć na wrażenia użytkowników. Zasadniczo lepiej jest pozwolić użytkownikowi , aby wpisać więcej znaków niż wynosi dozwolona liczba. Użycie licznika będzie opcjonalnie w postaci <output>, który nie jest przesyłany razem z formularzem. umożliwiając edytowanie tekstu do momentu, aż na danych wyjściowych nie zostanie przekroczona maksymalna dozwolona długość. maxlength można umieścić w kodzie HTML. działa bez JavaScriptu, tak jak wszystko omówiliśmy. Następnie, po wczytaniu, wartość można użyć atrybutu maxlength [maxlength] do utworzenia tego licznika znaków w JavaScripcie.

Niektóre typy danych wejściowych wydają się mieć ograniczenia domyślne, ale ich nie ma. Na przykład typ danych wejściowych tel umożliwia podanie wartości liczbowej klawiatury telefonu na urządzeniach z dynamicznymi klawiaturami, ale nie ogranicza prawidłowych wartości. W przypadku tego oraz innych typów danych wejściowych jest atrybut pattern. Możesz podać wyrażenie regularne, które musi dopasować wartość, aby została uznana za prawidłową. Jeśli wartość jest pustym ciągiem znaków i nie jest wymagana, nie spowoduje to wywołania validityState.patternMismatch . Jeśli pole jest wymagane i puste, użytkownik zobaczy domyślny komunikat o błędzie validityState.valueMissing zamiast patternMismatch.

W przypadku e-maili validityState.typeMismatch prawdopodobnie jest zbyt przepraszać za swoje potrzeby. Warto uwzględnić pattern przez co adresy e-mail intranetowe bez domeny TLD nie są akceptowane jako prawidłowe. Atrybut wzorca umożliwia podanie wyrażenia regularnego, które musi pasować do wartości. Gdy wymagane jest dopasowanie do wzorca, Upewnij się, że jest dla użytkownika jasne, czego może się spodziewać.

Wszystko to można zrobić bez jednego wiersza JavaScriptu. Jako interfejs API HTML możesz jednak użyć JavaScriptu, by uwzględnić komunikatów niestandardowych podczas weryfikacji ograniczeń. Można również użyć JavaScriptu, aby zaktualizować liczbę pozostałych znaków, pokazać pasek postępu informujący o sile hasła lub inne sposoby dynamicznego uzupełniania zakresu.

Przykład

W tym przykładzie korzystamy z formularza w elemencie <dialog> z zagnieżdżonym elementem <form>, który zawiera 3 elementy sterujące formularzem i 2 przyciski przesyłania, zrozumiałe etykiety i instrukcje.

Pierwszy przycisk przesyłania zamyka okno. Użyj formmethod="dialog", aby zastąpić domyślną metodę formularza i zamknąć <dialog> bez przesyłania danych ani ich usuwania. Musisz też dołączyć atrybut formnovalidate, w przeciwnym razie przeglądarka sprawdzić, czy wszystkie wymagane pola mają wartość. Użytkownik może chcieć zamknąć okno i formularz bez wprowadzanie jakichkolwiek danych; weryfikacji danych. Uwzględnij aria-label="close", ponieważ „X” jest znanym wskazówką wizualną, ale jest nie jest to etykieta opisowa.

Wszystkie elementy sterujące formularza mają ukryte etykiety, więc nie musisz dodawać atrybutów id ani for. Zarówno elementy wejściowe, mają wymagany atrybut, co sprawia, że są one wymagane. Wejściowa liczba ma wyraźnie ustawiony element step, który pokazuje, jak funkcja step jest dołączono. Jeśli step ma domyślną wartość 1, ten atrybut można pominąć.

<select> ma wartość domyślną, przez co atrybut required jest zbędny. Zamiast uwzględniać atrybut value dla każdej opcji domyślna wartość to 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 z formularza zostaną przesłane, okno zostanie zamknięte, a strona może przekierowywać do thankyou.php, czyli adres URL działania. Jeśli brakuje jakichś wartości, jeśli wartość liczbowa jest niezgodna z krokami lub wykracza poza dopuszczalny zakres, zwracany jest błąd pojawi się odpowiedni komunikat o błędzie zdefiniowany przez przeglądarkę, formularz nie zostanie przesłany, a okno nie zostanie zamknięte. Domyślne komunikaty o błędach można dostosować za pomocą: validityState.setCustomValidity('message here') . Pamiętaj, że jeśli ustawisz komunikat niestandardowy, musisz w wiadomości wyraźnie wskazać pusty ciąg znaków, gdy wszystko jest prawidłowy, w przeciwnym razie formularz nie zostanie przesłany.

Inne uwagi

Istnieje cała sekcja poświęcona ułatwianiu użytkownikom wprowadzania właściwych danych w formularzach. Na dobre użytkownikom, ważne jest, aby nie popełnili błędów, dodając instrukcje i w razie potrzeby wskazówki. Choć w tej sekcji omawiamy sposób, w jaki sam kod HTML może zapewnić weryfikację po stronie klienta, weryfikacja musi odbywać się zarówno po stronie klienta, po stronie serwera. Weryfikację można przeprowadzić w sposób, który nie przeszkadza użytkownikowi podczas wypełniania formularza, np. dodając wyboru, gdy wartość będzie prawidłowa. Nie wyświetlaj jednak komunikatów o błędach, dopóki kontrolka formularza nie będzie ukończona. Jeśli użytkownik popełnia błąd, poinformuj użytkownika, gdzie jest błąd i co się pomyli.

Podczas projektowania formularzy należy pamiętać, że nie każdy jest taki sam jak Ty. Ktoś może zawierać tylko jedną literę nazwiska (lub w ogóle nie mieć nazwiska), może nie zawierać kodu pocztowego, może zawierać trzywierszowy adres pocztowy, nie może zawierać adresu. Być może widzą przetłumaczoną wersję formularza.

Elementy sterujące formularzy, ich etykiety i komunikaty o błędach powinny być widoczne na ekranie, dokładne i zrozumiałe oraz automatycznie które można określić automatycznie i powiązać z odpowiednim elementem lub grupą formularza. autocomplete można i należy go używać, aby przyspieszyć wypełnianie formularzy i poprawić ułatwienia dostępu.

HTML zapewnia wszystkie narzędzia umożliwiające udostępnienie podstawowych elementów sterujących formularza. Im bardziej interaktywny element lub proces formularza jest, więcej uwagi trzeba poświęcić na ułatwienia dostępu w kontekście zarządzania koncentracją, ustawianie i aktualizowanie nazw, ról ARIA. i wartości, gdy jest to konieczne, oraz w razie potrzeby ogłoszenia na żywo ARIA. Ale jak dowiedzieliśmy się tutaj, korzystając tylko z języka HTML, można uzyskać bez konieczności odwoływania się do ARIA czy JavaScriptu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o formularzach.