Textarea HTML-sjablonen

HTML-sjablonen voor tekstvelden met gestructureerde velden

De meeste problemen met een veld met meerdere regels beginnen bij de markup: geen label gekoppeld aan het vak, geen naam om onder te verzenden, niets dat een bezoeker vertelt of er twee zinnen of twee alinea's worden verwacht. Een "textarea"-sjabloon regelt die zaken eerst.

Basismarkup: Label, Naam, Regels

Een compleet ondersteuningsveld heeft weinig nodig. Een label zoals "Beschrijf het probleem" verwijst naar het besturingselement via de "for"-waarde; het besturingselement herhaalt die waarde als de "id", heeft een "naam" zoals "bericht", opent met zes regels en biedt een placeholder zoals "ordernummer, wat er is gebeurd, wat u hebt geprobeerd".

Vier details zijn hierbij cruciaal:

1. "for" in het label en de bijbehorende "id" in het besturingselement verbinden de twee, zodat wanneer er op de tekst wordt geklikt, de cursor in het vak komt en ondersteunende software ze als één geheel leest;

2. "name" is de sleutel waaronder het antwoord binnenkomt, en een veld zonder naam draagt niets bij;

3. "rows" bepaalt hoeveel regels zichtbaar zijn voordat het scrollen begint, een eerlijke indicatie van de verwachte lengte;

4. "placeholder" toont een voorbeeld en vervangt nooit het label, omdat het verdwijnt bij de eerste toetsaanslag.

"cols" is de horizontale tegenhanger en de meeste sjablonen laten deze weg.

Attributen voor verplichte of beperkte antwoorden

Een korte opmerking en een garantieclaim vereisen verschillende garanties, en drie attributen dekken het grootste deel van die afstand:

1. "required" voorkomt een lege inzending en hoort thuis in het veld waar uw team niet zonder kan, meestal de probleemomschrijving;

2. "minlength" stelt een ondergrens in waar antwoorden van één woord nutteloos zijn, zoals in een projectbeschrijving;

3. "maxlength" beperkt zeer lange inzendingen en werkt het beste naast een teller die "aria-describedby" aan het besturingselement koppelt.

Het resultaat zijn duidelijk verschillende sjablonen. Een ondersteuningsbericht behoudt de vlag "required", zes regels en een limiet van bijna 1200 tekens. Een projectbeschrijving beslaat 10 regels met een minimum van ongeveer 80 regels. Een beoordeling blijft optioneel en onbeperkt, omdat een minimum van 80 regels het schrijven ontmoedigt.

Toegankelijke volgorde vóór inzending

De volgorde in het document is net zo belangrijk als de attributen. Eerst het label, dan eventuele helptekst, dan het besturingselement en dan de plek voor een validatiebericht. Als je het hardop voorleest, is de volgorde logisch en komt een bezoeker die door de tekst tabt de uitleg tegen vóór het lege vakje. "aria-describedby" koppelt de helptekst en de tekenteller aan het besturingselement, en geen placeholder vervangt die link.

Nicepage bouwt dezelfde structuur op via het Contactformulierelement, dat labels, besturingselementen en inzending in de juiste volgorde houdt.

Kies een sjabloon op basis van het label dat je nodig hebt, of het antwoord verplicht is, de verwachte lengte, de hints die je de bezoeker geeft en de validatie erachter.