Textarea HTML-sjablonen

Textarea HTML-sjablonen voor gestructureerde velden

De meeste problemen met een meerregelig veld beginnen in de markup: geen label gekoppeld aan het invoerveld, geen naam om onder te verzenden, niets dat een bezoeker vertelt of er twee zinnen of twee alinea's worden verwacht. Een "textarea"-sjabloon lost die onderdelen eerst op.

Basis-markup: Label, Name, Rows

Een compleet supportveld heeft weinig nodig. Een label zoals "Beschrijf het probleem" verwijst via de "for"-waarde naar het besturingselement; het besturingselement herhaalt die waarde als "id", bevat een "name" zoals "message", opent met zes rijen en biedt een placeholder zoals "bestelnummer, wat er is gebeurd, wat u heeft geprobeerd".

Vier details maken hier het verschil:

1. "for" op het label en de overeenkomstige "id" op het besturingselement verbinden beide, zodat klikken op de tekst de cursor in het vak plaatst en ondersteunende software ze als één geheel voorleest;
2. "name" is de sleutel waaronder het antwoord binnenkomt, en een veld zonder deze sleutel levert niets op;
3. "rows" bepaalt hoeveel regels zichtbaar zijn voordat scrollen begint, een duidelijke indicatie van de verwachte lengte;
4. "placeholder" toont een voorbeeld en vervangt nooit het label, aangezien deze bij de eerste toetsaanslag verdwijnt.

"cols" is de horizontale tegenhanger en wordt in de meeste sjablonen weggelaten.

Attributen voor verplichte of beperkte antwoorden

Een korte opmerking en een garantieclaim vereisen andere voorwaarden, en drie attributen dekken het grootste deel hiervan af:

1. "required" voorkomt lege inzendingen en hoort bij het veld waar uw team niet zonder kan, meestal de probleembeschrijving;
2. "minlength" stelt een ondergrens in wanneer antwoorden van één woord nutteloos zijn, zoals bij een projectbriefing;
3. "maxlength" begrenst zeer lange invoer en werkt het best naast een teller die via "aria-describedby" aan het besturingselement is gekoppeld.

Het resultaat zijn herkenbaar verschillende sjablonen. Een supportbericht behoudt de required-status, zes rijen en een limiet van bijna 1200 tekens. Een projectbeschrijving beslaat 10 rijen met een ondergrens van ongeveer 80 tekens. Een recensie blijft optioneel en onbeperkt, omdat een minimumdrempel hier het schrijven zou ontmoedigen.

Toegankelijke volgorde vóór verzending

De volgorde in het document is net zo belangrijk als de attributen. Eerst het label, dan eventuele helptekst, vervolgens het besturingselement en daarna de ruimte voor validatieberichten. Hardop voorgelezen is de volgorde logisch, en een bezoeker die er met Tab doorheen navigeert, hoort de uitleg vóór het lege vak. "aria-describedby" koppelt de helptekst en de tekenteller aan het besturingselement, en geen enkele placeholder kan die koppeling vervangen.

Nicepage bouwt dezelfde structuur op via het Contact Form Element, dat labels, besturingselementen en verzending op orde houdt.

Kies een sjabloon op basis van het benodigde label, of het antwoord verplicht is, de verwachte lengte, de aanwijzingen die u bezoekers geeft en de validatie erachter.