Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

form

5 maggio 2011, Scritto da , category HTML

html formI moduli sono strumenti molto utili che servono per raccogliere informazioni fornite dall’utente.

L’interazione che può essere offerta navigando su internet è una delle componenti che, probabilmente, più di tutte differenziano questo media da quelli tradizionali (libri, tv).
L’utilizzo dei moduli, il cui tag è <form>, rendono possibile questa interazione. Vediamo come, iniziando dalla sintassi.

Tag html per i moduli

  • <form></form>: è il tag principale e serve per creare un modulo. Al suo interno vanno gli elementi che comporranno il modulo. Richiede il tag di chiusura. Non si possono annidare più form. I suoi attributi sono:
    * method: può assumere i valori GET e POST .
    GET: i nomi ed i valori dei campi della form vengono passati alla  barra degli indirizzi del browser.
    – Vantaggi: si può tener d’occhio facilmente se i parametri ed i valori sono corretti.
    – Svantaggi: la barra degli indirizzi non può contenere più di 1024 caratteri; la url generata diventa molto lunga, complessa e difficile da condividere; è facile modificare il nome ed il valore delle informazioni passate.
    POST: i nomi dei campi ed i relativi valori vengono passati in maniera “nascosta”
    Vantaggi: più pulita la url generata, più sicurezza nell’invio delle informazioni
    Svantaggi: più difficoltà nel fare debug
    * name: serve per dare un nome alla form. Attributo opzionale ma utile per referenziare la form con javascript e css
    * id: serve per dare un id unico alla form. Vale il discorso fatto per name.
    * action: serve per specificare la risorsa a cui inviare le informazioni
  • <fieldset></fieldset>: elemento che serve per raggruppare (visivamente) i campi di un modulo. E’ opzionale ma può tornare utile per abbellire la form grazie ai css e per interagire meglio grazie a javascript
  • <legend></legend>: tag necessario in caso di fieldset. Serve per dare un’etichetta al gruppo di campi contenuti nel set. E’ opzionale ma può essere utile per abbellire la form grazie ai css
  • <label></label>: serve per creare una etichetta testuale da associare ad un campo della form. E’ opzionale ma valgono gli stessi discorsi fatti per fieldset e legend
  • <input>: tag fondamentale per inputare (cioè per inserire) informazioni da inviare al server. Può assumere vari aspetti e caratteristiche a seconda dell’attributo type. Vediamo come:
    • type=”text”: serve per inserire un campo di tipo testuale. Max 255 caratteri. Si usa spesso combinato con l’attributo maxlenght, necessario per inserire un limite ai caratteri inseribili nel campo, e con l’attributo size, necessario per dare una determinata dimensione (in caratteri) alla cella di testo.
    • type=”password”: serve per inserire un campo di tipo password. Ha le stesse caratteristiche del campo text ma tutti i caratteri che vengono inseriti all’interno della cella vengono oscurati con un asterisco o con un pallino. Questa funzionalità è utile per evitare che qualche persona vicina al monitor possa leggere la password che stiamo digitando.
    • type=”file”: serve per caricare un file sul server remoto. A fianco alla cella del percorso del file compare un pulsante per sfogliare le cartelle locali del proprio computer
    • type=”radio”: serve per dare all’utente la possibilità di scegliere una informazione in relazione ad altre. La scelta è esclusiva. Tipico esempio dei radio button è il sondaggio, nel quale si esprime una preferenza tra diversi valori.
    • type=”checkbox”: simile al radio, però in questo caso la scelta tra valori può essere molteplice.
    • type=”submit”: serve per inserire un pulsante che consenta l’invio delle informazioni inserite nella form
    • type=”reset”: serve per inserire un pulsante che consenta l’azzeramento di tutti i campi già inseriti nella form
    • type=”hidden”: serve ad inviare le informazioni in maniera nascosta. Il browser non renderizza i campi hidden ma riesce a passare ugualmente i valori contenuti in esso.
    • name: attributo necessario per dare un nome all’informazione che si desidera inviare al server.
    • value: attributo necessario per passare l’informazione. Se non specificato, il valore sarà quanto scritto nella casella di testo/password/hidden
    • id: identificatore univoco del campo. Utile ai fini di personalizzazione dell’aspetto e per la manipolazione tramite javascript
  • <textarea></textarea>: serve per inserire grandi quantità di testo, superiore ai 255 caratteri. La textarea può avere gli attributi rows e cols, che servono ad impostare il numero di righe e colonne, oltre a name e value
  • <select></select>: serve per inserire un menu di tipo “drop down” o, in gergo, “a tendina”. All’interno del tag select si inseriscono tanti tag <option></option> quante sono le opzioni da scegliere. Gli attributi per select sono: name ed id che hanno lo stesso significato per le input, e MULTIPLE che, combinato con size, trasformano la select da menu dropdown ad elenco di opzioni con la possibilità della multiselezione.
    Il tag <option> prevede l’attributo value e può essere raggruppato in sezioni grazie al tag <optgroup>
  • <button></button>: definisce un pulsante privo di qualsiasi compito. Il comportamento e l’aspetto vengono determinati dai css e javascript

Esempi di form

<form action="">
<fieldset>
<legend>Info</legend>
Nome: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Compleanno: <input type="text" size="10" />
</fieldset>
</form>

Questa form risulterà così;

Info

Nome:
Email:
Compleanno:

Oppure:

<form name="input" action="grazie.php" method="get">
Nome: <input type="text" name="nome" value="Mario" /><br />
Cognome: <input type="text" name="cognome" value="Rossi" /><br />
<input type="submit" value="Invia" />
</form>

che risulterà così:

Nome:

Cognome:


O ancora:

<form>
Nome <input type="text" name="nome">
Sesso <input type="radio" name="sex" value="m">M <input type="radio" name="sex" value="f">F
Pernottamento <select name="notti"><option value="1">1 notte</option><option value="2">2 notti</option></select>
Messaggio: <textarea name="textarea" cols="3" rows="3"></textarea>
<input type="submit" value="invia"> </form>

che risulterà così:
Nome
Sesso M F
Pernottamento
Messaggio:

… e così via! 🙂

Privacy Policy