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! 🙂

  • alessandro

    Ora però non ci fare aspettare troppo i css.

    web addicted!

  • Salve,io non capisco niente di HTML e di creazioni di form,pero mi servirebbe il codice do un form per lasciare un commento nel sito,quindi una riga Nome, un altra multi righe per il commento,e un altro pulsante Invio. e misure,cioe possibilità di regolare misure del box per il commento.
    Sarebbe possibile di vedere questo codice dal quale prendere spunto?

    Grazie mille!

    • Ciao Irina,

      è possibile far ciò che dici tu a patto di avere anche un linguaggio di scripting che possa gestire l’invio delle email etc.
      Riassumere su due righe è un po’ problematico.
      Su quale server ti appoggi? Puoi utilizzare PHP per il linguaggio di scripting e per fare la validazine dei campi?
      Altrimenti ti consiglio di inglobare dei plugin esterni per la gestione dei commenti.
      Ad ogni modo non è proprio cosa da 5 minuti, mi dispiace 🙂

      • Grazie per veloce risposta.
        Io ho in sito su weebly, li inserisco codice in HTML, attualmente un codice da un sito inghlese,
        ma non e che mi piace tanto,perché non ce opzione,cioe non so come aggiungere,e di regolare misure del box e colore,la pagina del sito,dove ho inserito codice
        http://www.fashionsartorialezioni.com/domande.html.
        Il codice e questo :

        Widget is loading comments…

        /**/

  • Mi sono accorta un altra cosa – il codice per commenti che ho trovato (ovvero mi e stato consigliatoda assistenza del sito) non ha possibilità ne di moderazione ne sopratutto di cancellazione!!!!!

    Potrebbe darmi il codice HTML almeno di questo, cancellazione del commento se non piace,sia per utenti che per moderatore.
    Ora ho sbagliato a rispondere a una persona,ma non posso modificare ne cancellare il commento,un disastro,dovrei eliminare la pagina e crearla di nuovo????
    Grazie mille!

  • Salve! ..eeem non mi potete aiutare quindi?

    • Ciao Irina,
      scusami ma in questi giorni sono molto preso dal lavoro.
      Proverò a dare un’occhiata al tuo problema nel fine settimana 🙂

      • Figurati,ti capisco!
        io mi arrangio con quel codice che ho preso dal sito che offre questo servizio,unica cosa
        che non mi piace e la lingua inglese,non tutti utenti possono capire reply,ecc. e mi sembra non ce opzione di modifica dei commenti per i clienti, avevo gia detto!
        Grazie per il tuo aiuto,magari se hai qualche servizio a pagamento,tipo di scrivere un codice HTML a pagamento scrivi mi prezzi per e-mail per favore.
        Grazie.