Textarea Szablony HTML

Szablony HTML textarea dla pól strukturalnych

Większość problemów z polem wielowierszowym zaczyna się w kodzie: brak etykiety powiązanej z polem, brak nazwy do przesłania danych, brak informacji dla użytkownika, czy oczekiwane są dwa zdania czy dwa akapity. Szablon „textarea” porządkuje te elementy w pierwszej kolejności.

Podstawowy kod: Label, Name, Rows

Kompletne pole zgłoszenia wymaga niewiele. Etykieta taka jak „Opisz problem” wskazuje na element sterujący za pomocą wartości „for”; kontrolka powtarza tę wartość jako swój „id”, zawiera „name” taki jak „message”, otwiera się na sześć wierszy i oferuje placeholder, na przykład „numer zamówienia, co się stało, co próbowano zrobić”.

Cztery szczegóły mają kluczowe znaczenie:

1. „for” w etykiecie i pasujące „id” w elemencie sterującym łączą oba składniki, dzięki czemu kliknięcie tekstu przenosi kursor do pola, a technologie wspomagające odczytują je razem;
2. „name” to klucz, pod którym przesyłana jest odpowiedź, a pole pozbawione tej wartości nie wysyła niczego;
3. „rows” określa, ile linii jest widocznych przed rozpoczęciem przewijania, dając jasną wskazówkę co do oczekiwanej długości tekstu;
4. „placeholder” prezentuje przykład i nigdy nie zastępuje etykiety, ponieważ znika wraz z pierwszym wpisanym znakiem.

„cols” jest poziomym odpowiednikiem i większość szablonów go pomija.

Atrybuty dla odpowiedzi wymaganych lub ograniczonych

Krótki komentarz i zgłoszenie reklamacyjne mają odmienne wymagania, a trzy atrybuty rozwiązują większość tych różnic:

1. „required” zapobiega wysłaniu pustego formularza i powinien znaleźć się w polu kluczowym dla zespołu, zazwyczaj w opisie problemu;
2. „minlength” ustala dolny limit, gdy jednowyrazowe odpowiedzi są bezużyteczne, na przykład w briefie projektowym;
3. „maxlength” ogranicza zbyt długie wpisy i sprawdza się najlepiej w połączeniu z licznikiem połączonym z kontrolką przez „aria-describedby”.

W rezultacie powstają wyraźnie zróżnicowane szablony. Wiadomość do pomocy technicznej zachowuje atrybut required, sześć wierszy i limit blisko 1200 znaków. Opis projektu zajmuje 10 wierszy z dolnym limitem około 80 znaków. Opinia pozostaje opcjonalna i bez limitu, ponieważ ograniczenie minimalne mogłoby zniechęcić do pisania.

Dostępna kolejność przed wysłaniem

Kolejność w dokumencie ma tak samo duże znaczenie jak atrybuty. Najpierw etykieta, potem ewentualny tekst pomocniczy, następnie kontrolka, a na końcu miejsce na komunikat walidacji. Czytana na głos struktura ma sens, a użytkownik przechodzący przez formularz klawiszem Tab zapoznaje się z objaśnieniem przed pustym polem. „aria-describedby” łączy tekst pomocniczy i licznik znaków z kontrolką, a żaden placeholder nie zastąpi tego powiązania.

Nicepage tworzy identyczną strukturę za pomocą Contact Form Element, dbając o właściwą kolejność etykiet, kontrolek i wysyłania danych.

Wybierz szablon zależnie od potrzebnej etykiety, wymagalności odpowiedzi, oczekiwanej długości tekstu, wskazówek dla użytkownika oraz przygotowanej walidacji.