Textområde HTML-mallar

Textarea HTML-mallar för strukturerade fält

De flesta problem med ett flerradigt fält börjar i markupen: ingen etikett kopplad till rutan, inget namn att skicka in under, inget som talar om för en besökare om två meningar eller två stycken förväntas. En "textarea"-mall avgör dessa delar först.

Grundläggande markup: Etikett, Namn, Rader

Ett komplett supportfält behöver lite. En etikett som "Beskriv problemet" pekar på kontrollen genom dess "för"-värde; kontrollen upprepar det värdet som sitt "id", har ett "namn" som "meddelande", öppnas vid sex rader och erbjuder en platshållare som "ordernummer, vad som hände, vad du försökte".

Fyra detaljer där väger tyngden:

1. "för" på etiketten och matchande "id" på kontrollen kopplar samman de två, så att klicka på texten placerar markören i rutan och hjälpprogram läser dem som ett;
2. "namn" är nyckeln som svaret kommer under, och ett fält utan den bidrar inte med något;

3. "rows" anger hur många rader som är synliga innan rullning börjar, en ärlig ledtråd 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 den horisontella motsvarigheten, och de flesta mallar utelämnar den.

Attribut för obligatoriska eller begränsade svar

En snabb kommentar och ett garantianspråk behöver olika garantier, och tre attribut täcker större delen av det avståndet:

1. "required" stoppar en tom inlämning och hör hemma i det fält ditt team inte kan arbeta utan, vanligtvis problembeskrivningen;

2. "minlength" anger ett golv där svar på ett ord är värdelösa, som i en projektbeskrivning;

3. "maxlength" begränsar mycket långa poster och fungerar bäst bredvid en räknare som "aria-describedby" ansluter till kontrollen.

Resultatet är tydligt olika mallar. Ett supportmeddelande behåller den obligatoriska flaggan, sex rader och en gräns på nästan 1200 tecken. En projektbeskrivning sträcker sig över 10 rader med en gräns på cirka 80. En granskning är valfri och obegränsad, eftersom en gräns där avskräcker från att skriva.

Tillgänglig ordning före inlämning

Sekvensen i dokumentet är lika viktig som attributen. Etiketten först, sedan eventuell hjälptext, sedan kontrollen och sedan platsen för ett valideringsmeddelande. Läs högt, ordningen blir begriplig, och en besökare som tabbar igenom den möter förklaringen före den tomma rutan. "aria-describedby" knyter hjälptexten och teckenräknaren till kontrollen, och ingen platshållare ersätter den länken.

Nicepage sätter ihop samma struktur genom sitt Contact Form Element, vilket håller etiketter, kontroller och inlämning i ordning.

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