Textarea Modelli HTML

Template HTML textarea per campi strutturati

La maggior parte dei problemi con un campo multilinea inizia nel markup: nessuna etichetta collegata alla casella, nessun nome per l'invio, nessun elemento che indichi al visitatore se sono attese due frasi o due paragrafi. Un template "textarea" risolve prima di tutto questi aspetti.

Markup di base: Label, Name, Rows

Un campo di supporto completo richiede poco. Un'etichetta come "Descrivi il problema" punta al controllo tramite il relativo valore "for"; il controllo ripete quel valore come "id", presenta un "name" come "message", si apre su sei righe e offre un placeholder come "numero d'ordine, cosa è accaduto, cosa hai provato".

Quattro dettagli fanno la differenza:

1. "for" sull'etichetta e il corrispondente "id" sul controllo collegano i due elementi, in modo che facendo clic sul testo il cursore entri nella casella e i software di assistenza li leggano come un blocco unico;
2. "name" è la chiave con cui viene ricevuta la risposta, e un campo privo di essa non invia alcun dato;
3. "rows" stabilisce quante righe sono visibili prima dello scorrimento, fornendo un chiaro indizio sulla lunghezza prevista;
4. "placeholder" mostra un esempio e non sostituisce mai l'etichetta, poiché scompare alla prima digitazione.

"cols" è l'equivalente orizzontale e la maggior parte dei template lo omette.

Attributi per risposte obbligatorie o limitate

Un breve commento e una richiesta di garanzia richiedono condizioni differenti, e tre attributi coprono gran parte di queste esigenze:

1. "required" impedisce l'invio a vuoto e va applicato al campo di cui il team non può fare a meno, in genere la descrizione del problema;
2. "minlength" impone una soglia minima laddove risposte di una sola parola risulterebbero inutili, come nel brief di un progetto;
3. "maxlength" limita gli inserimenti troppo lunghi e funziona al meglio accanto a un contatore collegato al controllo tramite "aria-describedby".

Il risultato sono template chiaramente distinti. Un messaggio di supporto mantiene l'attributo required, sei righe e un limite di quasi 1200 caratteri. Una descrizione di progetto occupa 10 righe con un minimo di circa 80 caratteri. Una recensione resta opzionale e illimitata, poiché una soglia minima scoraggerebbe la compilazione.

Ordine accessibile prima dell'invio

La sequenza nel documento ha la stessa importanza degli attributi. Prima l'etichetta, poi l'eventuale testo di supporto, quindi il controllo e infine lo spazio per il messaggio di convalida. Letto ad alta voce, l'ordine risulta logico, e un visitatore che naviga con il tasto Tab incontra la spiegazione prima della casella vuota. "aria-describedby" collega il testo di supporto e il conteggio dei caratteri al controllo, e nessun placeholder può sostituire tale legame.

Nicepage crea la stessa struttura attraverso il suo Contact Form Element, che mantiene in ordine etichette, controlli e invio.

Scegli un template in base all'etichetta necessaria, all'eventuale obbligatorietà della risposta, alla lunghezza prevista, ai suggerimenti forniti al visitatore e alla convalida sottostante.