Atrybuty elementów HTML mogą wzbogacać <form> i elementy sterujące formularza.
Pomóż użytkownikom w wypełnianiu opcji formularza
Aby ułatwić użytkownikom wypełnianie formularzy, użyj odpowiedniego atrybutu type dla elementów <input>.
Przeglądarki wyświetlają interfejs odpowiedni dla elementu type, np. selektor daty w przypadku elementu <input> typu date.
Przeglądarki na urządzeniach mobilnych mają dostosowaną klawiaturę ekranową, na przykład klawiaturę numeryczną telefonu dla użytkownika type="tel".
Niektóre typy <input> zmieniają też reguły weryfikacji elementu po przesłaniu jego formularza.
Na przykład pole <input type="url"> jest prawidłowe tylko wtedy, gdy nie jest puste, a wartością jest adres URL.
Sprawdź, czy użytkownicy wpisują dane
Istnieją różne atrybuty wyświetlania odpowiedniej klawiatury ekranowej na urządzeniach dotykowych.
Pierwszą opcją jest użycie atrybutu type, jak wspomniano powyżej.
Kolejną opcją jest atrybut inputmode obsługiwany na
Androidzie i iOS.
W przeciwieństwie do atrybutu type atrybut inputmode zmienia tylko działanie klawiatury ekranowej, a nie działanie samego elementu. Korzystanie z inputmode to dobre rozwiązanie, jeśli chcesz zachować domyślny interfejs użytkownika i domyślne reguły weryfikacji klasy <input>, a jednocześnie pozostawić zoptymalizowaną klawiaturę ekranową.
Klawisz Enter na klawiaturach ekranowych możesz zmieniać za pomocą atrybutu enterkeyhint.
Na przykład enterkeyhint="next" lub enterkeyhint="done" zmienia etykietę przycisku na odpowiednią ikonę.
Dzięki temu użytkownicy będą wiedzieć, co się dzieje, gdy prześlą bieżący formularz.
Sprawdzanie, czy użytkownicy mogą przesyłać formularz
Załóżmy, że wypełniasz formularz <form> i klikasz przycisk Prześlij, ale nic się nie dzieje.
Problemem może być to, że przycisk został wyłączony z atrybutem disabled.
Często zdarza się, że przycisk Prześlij jest wyłączony, dopóki formularz nie będzie prawidłowy.
Teoretycznie brzmi to rozsądnie, ale nie wyłączaj przycisku Prześlij podczas oczekiwania na pełne i prawidłowe dane wejściowe użytkownika. Zamiast tego wyróżnij wpisane dane, a gdy formularz będzie przesyłać, zaznacz problemy z polami, które sprawiają problemy.
Możesz jednak wyłączyć przycisk Prześlij, gdy formularz nie zostanie jeszcze przetworzony. Dowiedz się więcej o wyłączonych przyciskach.
Pomóż użytkownikom, pokazując dane wpisane przez nich wcześniej
Wyobraź sobie, że masz formularz płatności z kilkoma krokami.
Co zrobić, aby wprowadzone wcześniej wartości nadal były aktywne, gdy użytkownik wróci do poprzedniego kroku?
Użyj atrybutu value, aby wyświetlić wartości, które są już wypełnione.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
Wartość elementu sterującego formularza w JavaScripcie można pobrać na kilka sposobów.
Możesz użyć właściwości value lub uzyskać dostęp do tej wartości za pomocą getAttribute('value').
Jest tu jedna duża różnica: właściwość value zawsze zwraca bieżącą wartość, a używanie getAttribute() zawsze zwraca wartość początkową.
Wypróbuj
Zmień tekst w polu nazwy i obserwuj konsolę.
Zwróć uwagę, że właściwość value zwraca aktualnie widoczny tekst, a getAttribute('value') zawsze zwraca wartość początkową.
Dowiedz się więcej o różnicach między atrybutami DOM i właściwościami DOM.
W przypadku elementów <input> typu checkbox lub radio używaj atrybutu checked.
Dodaj ją, jeśli użytkownik wybrał opcję, lub usuń ją w innym przypadku.
Zadbaj o to, aby użytkownicy rozumieli oczekiwany format
Wartość atrybutu placeholder wskazuje, jakiego rodzaju informacji należy się spodziewać.
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
Może to zdezorientować użytkowników, ponieważ może wydawać się nielogiczne, dlaczego pole wyboru formularza jest już wstępnie wypełnione. Poza tym dodanie symbolu zastępczego może utrudniać sprawdzanie, które pola formularza trzeba wypełnić. Poza tym domyślny styl tekstu zastępczego może być trudny do odczytania.
Ogólnie zachowaj ostrożność podczas korzystania z atrybutu placeholder i nigdy nie używaj atrybutu placeholder do objaśniania elementu sterującego formularza.
Zamiast niego użyj elementu <label>.
Dowiedz się, dlaczego należy unikać atrybutu placeholder.
Lepszym sposobem na poinformowanie użytkowników o tym, jakiego rodzaju informacji są oczekiwane, jest umieszczenie pod elementem sterującym formularza dodatkowego elementu HTML z wyjaśnieniem lub przykładem.
Sprawdź, czy elementy sterujące formularza są gotowe do weryfikacji
Dostępne są różne atrybuty HTML służące do aktywowania wbudowanej weryfikacji.
Aby zapobiec przesłaniu pustych pól, użyj atrybutu required.
Dodatkowe weryfikacje mogą być wymuszane za pomocą atrybutu type.
Na przykład wymagana wartość <input> wynosząca type="url" musi być adresem URL.
Aby mieć pewność, że użytkownik wpisze minimalną liczbę znaków, użyj atrybutu minlength.
Aby zablokować dowolną wartość zawierającą więcej niż maksymalną liczbę znaków, użyj atrybutu maxlength.
W przypadku liczbowych typów danych wejściowych, takich jak <input type="number">, użyj atrybutów min i max.
Więcej informacji o weryfikacji: pomóż użytkownikom wpisywać prawidłowe dane w formularzach.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o atrybutach formularza
Jakiego atrybutu możesz użyć do zmiany etykiety klawisza Enter na klawiaturze ekranowej?
enterkeyenterkeyhintenterkeytextenterkeylabelJaka jest różnica między usługą value a właściwością getAttribute('value')?
value zwraca bieżącą wartość, getAttribute('value') zwraca wartość początkową.value zwraca wartość początkową, a getAttribute('value') zwraca wartość bieżącą.value zwraca klucz i wartość, getAttribute('value') zwraca tylko wartość.