Szablony HTML Textarea dla pól strukturalnych

Większość problemów z polami wielowierszowymi zaczyna się w znacznikach: brak etykiety powiązanej z polem, brak nazwy, pod którą można by przesłać dane, brak informacji dla użytkownika, czy oczekuje się dwóch zdań, czy dwóch akapitów. Szablon „textarea” rozwiązuje te problemy w pierwszej kolejności.

Podstawowe znaczniki: etykieta, nazwa, wiersze

Pełne pole pomocy nie wymaga wiele. Etykieta, taka jak „Opisz problem”, wskazuje na kontrolkę poprzez jej wartość „for”; kontrolka powtarza tę wartość jako swój „id”, zawiera „nazwę”, taką jak „wiadomość”, otwiera się w sześciu wierszach i oferuje symbol zastępczy, taki jak „numer zamówienia, co się stało, co zostało wypróbowane”.

Ważne są cztery szczegóły:

1. „for” na etykiecie i odpowiadający mu „id” na kontrolce łączą je, więc kliknięcie tekstu umieszcza kursor w polu, a oprogramowanie wspomagające odczytuje je jako jedno;
2. „name” to klucz, pod którym pojawia się odpowiedź, a pole bez niego nic nie wnosi;
3. „wiersze” określają liczbę widocznych wierszy przed rozpoczęciem przewijania, co stanowi uczciwą wskazówkę dotyczącą oczekiwanej długości;
4. „placeholder” wyświetla przykład i nigdy nie zastępuje etykiety, ponieważ znika ona po pierwszym naciśnięciu klawisza.

„cols” to poziomy odpowiednik, którego większość szablonów nie uwzględnia.

Atrybuty dla odpowiedzi wymaganych lub ograniczonych

Krótki komentarz i zgłoszenie gwarancyjne wymagają innych gwarancji, a trzy atrybuty pokrywają większość tej odległości:

1. „wymagane” zatrzymuje puste zgłoszenie i należy do obszaru, bez którego Twój zespół nie może pracować, zazwyczaj opisu problemu;
2. „minlength” ustala dolną granicę, przy której odpowiedzi jednowyrazowe są bezużyteczne, jak w opisie projektu;
3. „maxlength” ogranicza bardzo długie wpisy i najlepiej działa w połączeniu z licznikiem, który „aria-describedby” łączy z kontrolką.

Rezultatem są wyraźnie różne szablony. Komunikat pomocy technicznej zachowuje wymaganą flagę, sześć wierszy i limit prawie 1200 znaków. Opis projektu obejmuje 10 wierszy z dolną granicą około 80. Recenzja pozostaje opcjonalna i nieograniczona, ponieważ dolna granica zniechęca do pisania.

Dostępna kolejność przed wysłaniem

Kolejność w dokumencie jest równie ważna, jak atrybuty. Najpierw etykieta, potem tekst pomocniczy, następnie kontrolka, a na końcu miejsce na komunikat walidacyjny. Po przeczytaniu na głos kolejność ma sens, a użytkownik, który przejdzie przez nią za pomocą klawisza Tab, znajdzie wyjaśnienie przed pustym polem. „Aria-describedby” łączy tekst pomocniczy i licznik znaków z kontrolką, a żaden symbol zastępczy nie zastępuje tego linku.

Nicepage tworzy tę samą strukturę za pomocą Elementu formularza kontaktowego, który utrzymuje kolejność etykiet, kontrolek i wysyłania.

Wybierz szablon, biorąc pod uwagę potrzebną etykietę, to, czy odpowiedź jest obowiązkowa, oczekiwaną długość, wskazówki, które przekazujesz odwiedzającemu, oraz walidację odpowiedzi.