Nelle lezioni precedenti abbiamo visto gli attributi principali del tag <form>. Ora è il momento di scoprire quali elementi possono essere inseriti al suo interno per permettere all'utente di interagire con il modulo.
All'interno di un tag <form> possono essere inseriti numerosi elementi HTML. I più utilizzati, in ordine alfabetico, sono:
<button>, <datalist>, <fieldset>, <input>, <label>, <legend>, <select> e <textarea>.
Ognuno di essi ha uno scopo diverso e permette di creare moduli più completi e semplici da utilizzare.
Nota: alcuni di questi elementi potrebbero non essere completamente supportati da browser molto datati.
<input>Il tag <input> è l'elemento principale dei form. Nella maggior parte dei casi deve essere accompagnato dall'attributo type="valore", che permette di scegliere il tipo di controllo da visualizzare. Esistono molti valori disponibili e li analizzeremo nella prossima lezione. Per il momento, ecco i più comuni:
type="text" crea una casella di testo.type="button" crea un pulsante.type="submit" crea un pulsante che invia i dati del form.<button>I pulsanti possono essere creati anche con il tag <button>. Nella maggior parte dei casi si utilizza <input type="button">, ma <button> offre una maggiore flessibilità, soprattutto quando si utilizza JavaScript.
L'attributo più importante è type="valore", che può assumere questi valori:
button crea un normale pulsante senza un comportamento predefinito.submit invia il modulo.reset ripristina tutti i campi del form ai valori iniziali.<button type="button"> Testo del pulsante </button>
Per eseguire un'azione quando il pulsante viene premuto, puoi utilizzare l'attributo onclick="valore". Al suo interno si inserisce un'istruzione scritta in JavaScript. Ad esempio, per aprire un'altra pagina puoi utilizzare window.location.href='pagina2.html'.
<button type="button" onclick="window.location.href='pagina2.html'">
Vai alla seconda pagina
</button>
<datalist>Il tag <datalist> permette di creare una lista di suggerimenti che compare mentre l'utente digita in una casella di testo. Ogni suggerimento viene definito tramite il tag <option>, utilizzando l'attributo value="valore".
Per collegare una lista a un campo di testo è necessario aggiungere all'elemento <input> l'attributo list="valore". Come valore si inserisce l'id assegnato al tag <datalist>.
<form>
<input list="regioni" name="input_regioni">
<datalist id="regioni">
<option value="Abruzzo">
<option value="Basilicata">
<option value="Calabria">
<option value="Campania">
</datalist>
<input type="submit">
</form>
<fieldset> e <legend>Per organizzare un modulo in sezioni è possibile utilizzare il tag <fieldset>, che racchiude un gruppo di elementi all'interno di un bordo. Per aggiungere un titolo alla sezione si utilizza il tag <legend>. Questo rende il modulo più ordinato e semplice da compilare.
<form action="grazie.html">
<fieldset>
<legend>La regione migliore</legend>
Inserisci una regione che ti piace: <input type="text" name="regione">
<input type="submit">
</fieldset>
</form>
<label> e <select>Per permettere all'utente di scegliere un'opzione da un elenco si utilizza il tag <select>. Le varie possibilità vengono inserite all'interno di tag <option>. Il tag <label>, invece, serve ad associare un testo descrittivo all'elemento del form.
Per collegare <label> e <select> si utilizza l'attributo for="valore" nel tag <label>, indicando come valore l'id del tag <select>.
<form action="grazie.html">
<label for="regioni">Scegli una regione:</label>
<select id="regioni" name="regioni_varie">
<option value="1">Abruzzo</option>
<option value="2">Basilicata</option>
<option value="3">Calabria</option>
<option value="4">Campania</option>
</select>
<input type="submit">
</form>
Con l'attributo size="valore" puoi scegliere quante opzioni devono essere visibili contemporaneamente nell'elenco.
<form action="grazie.html">
<label for="regioni">Scegli una regione:</label>
<select id="regioni" name="regioni_varie" size="3">
<option value="1">Abruzzo</option>
<option value="2">Basilicata</option>
<option value="3">Calabria</option>
<option value="4">Campania</option>
</select>
<input type="submit">
</form>
Per selezionare automaticamente un'opzione all'apertura della pagina, aggiungi l'attributo selected al tag <option> desiderato.
<form action="grazie.html">
<label for="regioni">Scegli una regione:</label>
<select id="regioni" name="regioni_varie">
<option value="1">Abruzzo</option>
<option value="2">Basilicata</option>
<option value="3" selected>Calabria</option>
<option value="4">Campania</option>
</select>
<input type="submit">
</form>
<textarea>Per inserire testi lunghi si utilizza il tag <textarea>. A differenza di <input>, permette di scrivere su più righe ed è quindi ideale per commenti, descrizioni o messaggi.
<form action="grazie.html">
<textarea name="testo"></textarea>
<input type="submit">
</form>
Puoi impostare le dimensioni iniziali dell'area di testo utilizzando gli attributi cols="valore" e rows="valore", che indicano rispettivamente il numero di colonne e di righe visibili.
<form action="grazie.html">
<textarea name="testo" rows="10" cols="20"></textarea>
<input type="submit">
</form>
In alternativa puoi definirne la larghezza e l'altezza utilizzando l'attributo style, come hai visto nelle lezioni dedicate agli stili CSS.
<form action="grazie.html">
<textarea name="testo" style="width:50px;height:100px"></textarea>
<input type="submit">
</form>
Per impostazione predefinita, l'utente può ridimensionare una <textarea> trascinando l'angolo in basso a destra. Se desideri impedirlo, puoi inserire nell'attributo style la proprietà resize:none.
<form action="grazie.html">
<textarea name="testo" style="resize:none"></textarea>
<input type="submit">
</form>
Nota: questa lezione introduce gli elementi principali dei form, ma non spiega come elaborare i dati inviati dall'utente. Per farlo è necessario utilizzare un linguaggio lato server, come PHP o Node.js, argomenti trattati nei corsi dedicati.