Textområde HTML-mallar

Textarea HTML-mallar för strukturerade fält

De flesta problem med ett flerradigt fält börjar i själva källkoden: ingen etikett knuten till rutan, inget namn att skicka under och inget som talar om för besökaren om två meningar eller två stycken förväntas. En "textarea"-mall reder ut dessa delar först.

Grundläggande markup: Label, Name, Rows

Ett komplett supportfält kräver lite. En etikett som "Beskriv problemet" pekar på kontrollen via sitt "for"-värde; kontrollen upprepar det värdet som sitt "id", bär ett "name" som "message", öppnas på sex rader och erbjuder en platshållare som "ordernummer, vad som hände, vad du har provat".

Fyra detaljer är avgörande här:

1. "for" på etiketten och matchande "id" på kontrollen kopplar samman de två, så att ett klick på texten placerar markören i rutan och hjälpmedelsteknik läser upp dem som en helhet;
2. "name" är nyckeln som svaret tas emot under, och ett fält utan detta attribut skickar ingenting;
3. "rows" anger hur många rader som är synliga innan rullning krävs, vilket ger en tydlig vink om den förväntade längden;
4. "placeholder" visar ett exempel och ersätter aldrig etiketten, eftersom den försvinner vid första tangenttryckningen.

"cols" är dess horisontella motsvarighet och utelämnas i de flesta mallar.

Attribut för obligatoriska eller begränsade svar

En snabb kommentar och ett garantianspråk ställer olika krav, och tre attribut täcker det mesta av detta spann:

1. "required" förhindrar tomma formulärinskick och hör hemma på fältet som teamet absolut inte kan arbeta utan, vanligtvis problembeskrivningen;
2. "minlength" sätter en lägsta gräns där enordssvar är oanvändbara, exempelvis i en projektbrief;
3. "maxlength" begränsar mycket långa inlägg och fungerar bäst intill en räknare som "aria-describedby" kopplar till kontrollen.

Resultatet blir tydligt differentierade mallar. Ett supportmeddelande behåller required-attributet, sex rader och en gräns på närmare 1200 tecken. En projektbeskrivning sträcker sig över 10 rader med en undre gräns på cirka 80 tecken. En recension förblir valfri och obegränsad, eftersom ett minimum där skulle avskräcka från att skriva.

Tillgänglig ordning före inskickning

Dokumentets ordningsföljd är lika viktig som attributen. Först etiketten, sedan eventuell hjälptext, därefter kontrollen och sist utrymmet för valideringsmeddelanden. Uppläst är ordningen logisk, och en besökare som navigerar med tabbtangenten möter förklaringen innan den tomma rutan. "aria-describedby" knyter hjälptexten och teckenräknaren till kontrollen, och ingen platshållare kan ersätta den kopplingen.

Nicepage bygger upp samma struktur via sitt Contact Form Element, som håller ordning på etiketter, kontroller och formulärinskick.

Välj en mall utifrån den etikett du behöver, om svaret är obligatoriskt, den längd du förväntar dig, de ledtrådar du ger besökaren och valideringen bakom.