Nelle lezioni precedenti abbiamo visto tutti gli attributi indispensabili da conoscere in <form>, ora vediamo come inserire il contenuto all’interno.
Tutti i tipi di contenuto
Possiamo utilizzare numerosi tag da inserire all’interno di un form. Ecco i principali, in ordine alfabetico:
<button>, <datalist>, <fieldset>, <input>, <label>, <legend>, <select>, <textarea>.
Nota: alcuni di questi tag potrebbero non funzionare in alcuni browser non aggiornati.
Il più importante: <input>
Il più usato tra tutti è il tag <input>. Quando si usa, si deve quasi sempre inserire al suo interno l’attributo type=”valore”. All’interno potrai inserire il tipo di input che preferisci. Visto che la lista è lunga, nella prossima lezione vedremo in dettaglio tutti i valori che esistono, nel frattempo i tre più importanti sono:
I pulsanti: <button>
I pulsanti si possono inserire con il tag <button> e </button>.
Di solito si utilizza <input type=”button”> per i pulsanti, ma <button> può essere un’alternativa, utile soprattutto se si deve utilizzare il linguaggio JavaScript (che puoi imparare su Biadets). L’attributo più importante è type e ha tre valori utilizzabili:
<button type="button"> Testo del pulsante </button>
Perché i pulsanti <button> compiano delle azioni dopo averli cliccati, si può utilizzare l’attributo onclick=”valore”, dove come valore si inserisce, nel linguaggio JavaScript, uno script. Ad esempio, per andare ad una altra pagina puoi inserire window.location.href='pagina2.html'.
<button type="button" onclick="window.location.href='pagina2.html'">
Vai alla seconda pagina
</button>
Le liste predefinite: <datalist>
Per creare una lista predefinita, si usa <datalist>. Appare mentre l’utente scrive qualcosa ed è un suggerimento da cliccare. Ogni elemento della lista si crea con <option> e con l’attributo value=”valore” inserendo come valore il testo del suggerimento.
Per attribuire una lista ad un input di testo, si inserisce in <input> l’attributo list=”valore”, inserendo il valore contenuto in id all’interno di <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>
Raggruppare gli elementi: <fieldset> e <legend>
Per raggruppare gli elementi all’interno di una sezione con un contorno, si utilizza <fieldset>. Utilizzando <legend> dopo <fieldset>, potrai aggiungere una didascalia alla selezione.
<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>
Creare una selezione: <label> e <select>
Per creare una selezione, dove l’utente può scegliere l’opzione da una tendina che appare, si utilizza <label>. Il tag <select>, invece, contiene tutte le opzioni che possono essere scelte, da inserire ognuna all’interno di <option>. Per collegare <label> e <select> si utilizza l’attributo for=”valore” in <label>, e come valore si inserisce il valore di id presente in <select>, come nell’esempio.
<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>
Utilizza l’attributo size=”valore” all’interno di <select> per scegliere quante opzioni devono essere visibili. Inserisci come valore un numero.
<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>
Utilizza l’attributo selected all’interno di un <option> per selezionarlo come predefinito.
<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>
Area di testo: <textarea>
Un testo si può aggiungere, come abbiamo già visto, con un <input>. Per creare un’area di testo più grande di una semplice riga, si può utilizzare <textarea>.
<form action="grazie.html">
<textarea name="testo"></textarea>
<input type="submit">
</form>
Puoi anche inserire il numero di colonne, con cols=”valore”, e righe, con rows=”valore”, visibili nell’area di testo, all’interno di <textarea>.
<form action="grazie.html">
<textarea name="testo" rows="10" cols="20"></textarea>
<input type="submit">
</form>
Oppure puoi definire la grandezza con style, che hai visto nelle lezioni precedenti.
<form action="grazie.html">
<textarea name="testo" style="width:50px;height:100px"></textarea>
<input type="submit">
</form>
Per opzione predefinita, nelle <textarea> può essere modificata la grandezza direttamente dall’utente con il mouse in basso a destra del contorno. Puoi disattivarla inserendo in style il valore resize:none.
<form action="grazie.html">
<textarea name="testo" style="resize:none"></textarea>
<input type="submit">
</form>
Nota: questa lezione non insegna come i dati devono essere elaborati dopo l’invio di un modulo. Per farlo serve il linguaggio PHP, che puoi imparare su Biadets.
| Prossima lezione |