Textarea Modelli HTML

Modelli HTML per aree di testo per campi strutturati

La maggior parte dei problemi con un campo multilinea inizia nel markup: nessuna etichetta associata alla casella, nessun nome sotto cui inviare il modulo, nulla che indichi al visitatore se sono previste due frasi o due paragrafi. Un modello "textarea" risolve prima questi problemi.

Markup di base: Etichetta, Nome, Righe

Un campo di supporto completo richiede poco. Un'etichetta come "Descrivi il problema" punta al controllo tramite il suo valore "for"; il controllo ripete quel valore come "id", ha un "name" come "messaggio", si apre a sei righe e offre un segnaposto come "numero d'ordine, cosa è successo, cosa hai provato".

Quattro dettagli sono fondamentali:

1. "for" sull'etichetta e il corrispondente "id" sul controllo collegano i due, in modo che cliccando sul testo il cursore venga posizionato nella casella e il software di assistenza li legga come un unico elemento;

2. "name" è la chiave sotto cui viene inviata la risposta e un campo senza di essa non apporta alcun contributo;

3. "rows" imposta il numero di righe visibili prima che inizi lo scorrimento, un'indicazione onesta sulla lunghezza prevista;

4. "placeholder" mostra un esempio e non sostituisce mai l'etichetta, poiché scompare alla prima pressione di un tasto.

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

Attributi per risposte obbligatorie o limitate

Un commento rapido e una richiesta di garanzia richiedono garanzie diverse e tre attributi coprono la maggior parte di questa differenza:

1. "required" impedisce l'invio di un campo vuoto e deve essere inserito nel campo senza il quale il team non può lavorare, solitamente la descrizione del problema;

2. "minlength" imposta un limite minimo oltre il quale le risposte di una sola parola sono inutili, come in una descrizione di progetto;

3. "maxlength" limita le risposte molto lunghe e funziona al meglio se affiancato a un contatore collegato al controllo tramite "aria-describedby".

Il risultato sono modelli chiaramente diversi. Un messaggio di supporto mantiene l'indicatore di obbligatorietà, sei righe e un limite di quasi 1200 caratteri. La descrizione di un progetto si estende su 10 righe con un limite minimo di circa 80 caratteri. La revisione rimane facoltativa e illimitata, poiché un limite minimo in quella sezione scoraggia la scrittura.

Ordine accessibile prima dell'invio

La sequenza nel documento è importante quanto gli attributi. Prima l'etichetta, poi l'eventuale testo di supporto, quindi il controllo e infine lo spazio per un messaggio di convalida. Se letto ad alta voce, l'ordine risulta logico e un visitatore che naviga nel documento tramite il tasto Tab trova la spiegazione prima della casella vuota. "aria-describedby" collega il testo di supporto e il contatore di caratteri al controllo e nessun segnaposto sostituisce questo collegamento.

Nicepage crea la stessa struttura tramite il suo Elemento modulo di contatto, che mantiene etichette, controlli e invio in ordine.

Scegli un modello in base all'etichetta di cui hai bisogno, se la risposta è obbligatoria, alla lunghezza prevista, ai suggerimenti che fornisci al visitatore e alla convalida associata al titolo.