Eccoci arrivati a un topic fondamentale nel codice html, ovvero le form.

Quando parliamo di form ci riferiamo a tutto ciò che crea interazione tra l’utente e il sito web: ad esempio, quando dobbiamo compilare le caselle di testo con nome e cognome, età, nazionalità, ecc. Oppure, quando scriviamo dei commenti per esprimere delle opinioni su un blog o sui social network.

Prima di tutto, per poter creare una form si deve scrivere il tag <form>; all’interno di essa si utilizzano due attributi:

  1. Method: fa riferimento al metodo di invio dei dati e i valori possibili sono get o post; col metodo GET i dati vengono inviati in maniera visibile (appaiono nella barra degli indirizzi in alto al browser), mentre con il metodo POST l’invio avviene in modo trasparente per l’utente, pertanto non è possibile visualizzare i parametri nella barra degli indirizzi. Su questo topic ci torneremo più avanti, non preoccupatevi. Per ora concentriamoci sulla struttura delle nostre form!
  2. Action: in questo caso ci riferiamo a dove i dati delle form dovranno essere inviati una volta che l’utente avrà cliccato sul pulsante submit o invia.

Ora andremo ad analizzare quali sono i principali tag per poter creare le form (o moduli).

Ve ne sono di tre tipi:

  1. Inserimento di testo
  2. Effettuazioni di scelte
  3. Pulsanti

inserimento di testo

Per poter inserire del testo ci sono due modalità:

  1. <input type=”text”> : viene utilizzato per creare delle caselle di testo in cui l’utente può scrivere il contenuto su una singola linea (ad esempio, nome e cognome, numero di telefono, e-mail, ecc.).
  2. <textarea> : si crea un’area di testo in cui è possibile inserire descrizioni, commenti o testi molto lunghi, con la possibilità di andare a capo (ad esempio, quando postiamo un commento su un blog, su un forum o sui social network.


1

Gli attributi APPLICATI AL CAMPO DELLA FORM

  1. Name: l’attributo specifica il nome del campo della form. Fa riferimento al campo specifico.
  2. Placeholder: tale attributo specifica un piccolo suggerimento che descrive all’utente il contenuto che dovrà scrivere; il valore del placeholder comparirà nel campo ogniqualvolta il valore di questo sia “vuoto”, pertanto agisce come un “suggerimento”.
  3. Required: indica all’utente che il campo da compilare è obbligatorio prima dell’invio dei dati.

GLI ATTRIBUTI APPLICATI ALLA TEXTAREA

  1. Value: specifica il valore predefinito di un elemento input che l’utente potrà scrivere o modificare.
  2. Maxlength: nella textarea indica il numero massimo di caratteri che si possono digitare.
  3. Cols e Rows: con questi attributi possiamo definire le dimensioni della nostra textarea.

Avrete sicuramente notato il tag <label> (etichetta) con l’attributo for associato alla casella di testo Nome. Tramite l’utilizzo di tale tag, ogni volta che l’utente andrà a cliccare sulla scritta Nome, la casella di testo si evidenzierà di azzurro in modo da aiutarlo nella compilazione.

Vedrete che con la pratica tutti questi tag e attributi saranno sempre più familiari! 🙂

EFFETTUAZIONI DI SCELTE

Passiamo ora a un altro genere di form, quelle che permettono agli utenti di poter scegliere diverse opzioni: età, secco, nazionalità e così via.

Abbiamo tre tipi di form:

  1. <input type=”radio”> : permette all’utente di poter selezionare una sola opzione.
  2. <input type=”checkbox”> : diversamente, qui l’utente potrà selezionare e deselezionare più opzioni.
  3. <select> : tramite questa form l’utente selezionerà da un menù a tendina l’elemento desiderato.


1

COME INSERIRE I PULSANTI

Infine, vediamo come creare i pulsanti.


1

Avrete sicuramente notato che ci sono due modi per realizzare i pulsanti:

  1. Scrivendo <input type=”button”> e poi il valore;
  2. Oppure, se volessimo creare un pulsante specifico (come ad esempio un submit o reset) allora si dovrà scrivere nel seguente modo: <input type=”submit> e <input type=”reset”>, specificando a entrambi una classe=”button” e naturalmente il valore.

Se voleste invece creare un pulsante per poter caricare file o foto allora dovremo scrivere <input type=”file” name=”foto”>.

Per qualsiasi dubbio, non esitate a postare un commento.

Al prossimo articolo!

 

 

 

 




Comments

  1. Salve Alessia, come faccio a far funzionare il form mail per la mia pagina web? Dove devo inserire l’indirizzo mail dove mi dovrebbero arrivare i messaggi?
    Grazie mille!

Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.