Corso di HTML / Usare textarea, select, option e button
Utilizzate textarea per il testo su più righe, select con option per un elenco a scelta preimpostato e button per un'azione esplicita. Questi elementi hanno diversi modi di conservare i valori e inviare un modulo.
Inserire più righe con textarea
Il valore iniziale di un textarea viene inserito tra il suo tag di apertura e chiusura, invece che in un attributo value. Il contenuto iniziale è un valore modificabile; un placeholder è invece un suggerimento che scompare quando si digita.
<label for="message">Il tuo messaggio</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>rows e cols influenzano la dimensione visualizzata inizialmente; il CSS può adattare il controllo alla larghezza disponibile. name è necessario se il suo contenuto deve essere inviato. Il testo tra i tag diventa un vero valore iniziale. Se desiderate mostrare solo un esempio, utilizzate placeholder come indicazione aggiuntiva e mantenete l'etichetta visibile. Utilizzate textarea al posto di un input su una riga se i lettori devono poter modificare una risposta più lunga.
Offrire opzioni con select e option
<label for="topic">Oggetto</label>
<select id="topic" name="topic">
<option value="order">Ordini</option>
<option value="delivery">Consegna</option>
<option value="other">Altro</option>
</select>Lo schermo mostra "Ordini", ma il valore trasmesso è order. id="topic" collega il controllo alla sua etichetta, mentre name="topic" nomina i dati trasmessi. Scegliete i valori value delle opzioni corrispondenti a quanto il server si aspetta. Senza interazione, viene selezionata la prima opzione. Se l'utente deve scegliere consapevolmente, iniziate con <option value="">Scegli un argomento</option> e aggiungete required a select. Se esiste un valore predefinito ragionevole, la prima opzione reale può essere preferita.
Testare insieme i controlli in un modulo
Salvate questo documento con il nome controls.html. La prima opzione vuota e l'attributo required significano che è necessario selezionare un argomento effettivo prima di inviare. Il pulsante di reset è incluso in questo esercizio di confronto.
<!doctype html>
<html lang="it-IT">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Esercizio sui controlli del modulo</title>
<style>
textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
textarea { width: 24rem; }
</style>
</head>
<body>
<h1>Esercitarsi con i campi di contatto</h1>
<form id="controls-form" method="get">
<p><label for="topic-choice">Oggetto</label>
<select id="topic-choice" name="topic" required>
<option value="">Selezionare un argomento</option>
<option value="order">Ordini</option>
<option value="delivery">Consegna</option>
</select></p>
<p><label for="message-text">Messaggio</label>
<textarea id="message-text" name="message" rows="4">Domanda di prova</textarea></p>
<button type="submit">Verificare i valori inseriti</button>
<button type="reset">Ripristinare i valori originali</button>
</form>
</body>
</html>- Inviate senza scegliere un argomento per testare la selezione obbligatoria.
- Selezionate "Consegna", modificate il messaggio e inviate. Il valore inviato è
delivery, mentre l'etichetta visibile è "Consegna". - Modificate di nuovo i campi e premete il pulsante di ripristino. L'oggetto torna alla prima opzione e il messaggio torna al testo originale.
Un elemento di controllo senza testo iniziale appare vuoto dopo il ripristino; un elemento di controllo con un valore iniziale torna a quel valore. Aprite di nuovo il file per confrontare il suo stato iniziale.
Riferimento all'area di testo su MDN · Riferimento a select su MDN · Riferimento a button su MDN
Indicare il tipo di ciascun pulsante
All'interno di un modulo, un button è destinato per impostazione predefinita all'invio. Usate type="button" per un'altra azione controllata da script, in modo che il modulo non venga inviato accidentalmente. Osservate come i nomi e i valori vengono trasmessi nella struttura del modulo e GET vs. POST.
<form method="get">
<label for="note">Nota</label>
<textarea id="note" name="note" rows="4"></textarea>
<button type="submit">Invia</button>
<button type="reset">Reimposta</button>
</form>Il modulo utilizza GET e invia all'URL corrente. Su una pagina fornita tramite HTTP o HTTPS, vedrete i valori nell'URL dopo l'invio. Per i file file:// aperti localmente, l'elaborazione dipende dal browser; ciò non dimostra un'elaborazione server-side riuscita. Il ripristino riporta i controlli ai loro valori originali; non li svuota sempre. Se un textarea iniziava con del testo, il ripristino riporta quel testo. Un pulsante di ripristino può cancellare il lavoro di qualcuno, quindi dovreste inserirlo in un modulo reale solo se ha uno scopo chiaro e una collocazione chiara. Consultate la documentazione degli elementi HTML su MDN per gli attributi individuali.
type="button" impedisce l'invio del modulo, ma non crea una nuova azione da solo. Senza uno script collegato, fare clic su questo pulsante non produce alcun effetto. Distinguete le azioni integrate di invio e ripristino di HTML dalle azioni che richiedono uno script.
