Form

Form

<form action="login.php" method="post" enctype="multipart/form-data" name="login_form">
<!-- elementi del formulario -->
</form>

Il tag <form> è un elemento utilizzato per la creazione di moduli per l ‘immissione di dati da parte dell’utente.

action è l’attributo necessario in cui inserire l’indirizzo della pagina che riceverà i dati del formulario. Può essere un link relativo oppure un link assoluto.

method è l’attributo che definisce la modalità in cui verranno spediti i dati del formulario. Esistono due valori possibili:

  • get, i dati vengono visualizzati nella barra dell’indirizzo del browser, ha un limite di circa 3000 caratteri (lunghezza massima si un URL), non utilizzarlo per inviare dati sensibili
  • post, i dati inviati non vengono visualizzati nella barra di indirizzo del browser, non ha limiti di dimensione

enctype opzionale, è l’attributo che definisce la codifica dell’invio dei dati del formulario.
Esistono tre valori possibili:

  • application/x-www-form-urlencoded, è l’impostazione predefinita se non viene indicato. Tutti i caratteri sono codificati prima dell’invio (gli spazi sono convertiti in simboli “+” e i caratteri speciali sono convertiti in valori ASCII HEX).
  • multipart/form-data necessario quando nel formulario è presente la possibilità di caricare uno o più file.
  • text/plain sconsigliato, invia i dati senza nessuna codifica.

name opzionale, definisce il nome del formulario, utile nel caso nella stessa pagina sono presenti più formulari.

Il tag <form> è un elemento di tipo blocco.

input

Il tag <input> specifica un campo di input in cui l’utente può inserire dei dati.
È l’elemento più importante del formulario.

L’elemento <input> può essere visualizzato in diversi modi, a seconda del valore dell’attributo type.

Il tag input è un elemento di tipo inline.

button

<input type="button" value="Click me" onclick="popup()">

Il tag <input type="button"> definisce un bottone cliccabile.
Spesso è utilizzato per richiamare uno script in Javascript.

value è l’attributo che definisce la scritta del bottone.

onclick="popup()" `è l’attributo che definisce richiama lo script in Javascript, in questo caso una funzione dal nome popup().

Il tag <input type="button"> è un elemento di tipo inline.

checkbox

<form action="color.php">
    <div>
        <label for="giallo">Giallo</label>
        <input type="checkbox" id="giallo" name="color" value="giallo">
    </div>
    <div>
        <label for="verde">Verde</label>
        <input type="checkbox" id="verde" name="color" value="verde">
    </div>
    <div>
        <label for="viola">Viola</label>
        <input type="checkbox" id="viola" name="color" value="viola">
    </div>
    <button type="submit">Invia la tua scelta</button>
</form>

Il tag <input type="checkbox"> è utilizzato per consentire all’utente di selezionare una o più opzioni.

type definisce il tipo di input. In questo caso checkbox.

id è l’identificativo, univoco, del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome della checkbox. Assegnando lo stesso valore a più checkbox, si creerà un associazione allo stesso gruppo di opzioni.

value è il valore della checkbox.

checked è un valore booleano. Se è presente la checkbox sarà già selezionata.

Suggerimento: per migliorare le pratiche di accessibilità, associa sempre il tag <label>.
Per associare il tag label al tag input è sufficiente che l’attributo for, presente nel tag label, abbia lo stesso valore dell’attributo id presente nel tag input.

Il tag <input type="checkbox"> è un elemento di tipo inline.

color

<form action="color.php">
      <div>
          <label for="favcolor">Scegli il tuo colore preferito</label>
          <input type="color" id="favcolor" name="favcolor" value="#ff0000">
      </div>
      <button type="submit">Invia la tua scelta</button>
</form>

Il tag <input type="color"> definisce un selezionatore di colori (colopicker).

type definisce il tipo di input. In questo caso color.

id è l’identificativo, univoco del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome del tag input.

value è il valore predefinito del tag input.

Attenzione: l’attributo color non è supportato in Internet Explore 11 e Safari 9.1 o precedenti.

Il tag <input type="color"> è un elemento di tipo inline.

date

<form action="compleanno.php">
    <div>
        <label for="birthday">Il tuo compleanno:</label>
        <input type="date" id="birthday" name="birthday">
    </div>
    <button type="submit">Invia la data del tuo compleanno</button>
</form>

Il tag <input type="date"> definisce un selezionatore di data (datepicker).

type definisce il tipo di input. In questo caso date.

id è l’identificativo, univoco del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome del tag input.

Attenzione: l’attributo date non è supportato in Internet Explore 11 e Safari 14.1 o precedenti

Il tag <input type="date"> è un elemento di tipo inline.

datetime-local

<form action="compleanno.php">
    <div>
        <label for="birthdaytime">Il tuo compleanno (data e ora):</label>
        <input type="datetime-local" id="birthdaytime" name="birthdaytime">
    </div>
    <button type="submit">Invia la data del tuo compleanno</button>
</form>

il tag <input type="datetime-local"> definisce un selezionatore di data e ora (datepicker).

type definisce il tipo di input. In questo caso datetime-local.

id è l’identificativo, univoco del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome del tag input.

Attenzione: l’attributo datetime-local non è supportato in Internet Explore 11 e Safari 14.1 o precedenti

Il tag <input type="datetime-local"> è un elemento di tipo inline.

email

<form action="compleanno.php">
    <div>
        <label for="email">Inserisci la tua email:</label>
        <input type="email" id="email" name="email">
    </div>
    <button type="submit">Invia il tuo contatto</button>
</form>
<!--  Esempio con valore predefinito preimpostato -->
<form action="compleanno.php">
    <div>
        <label for="email">Inserisci la tua email:</label>
        <input type="email" id="emails" name="email" value="mario@rossi.com">
    </div>
    <button type="submit">Invia il tuo contatto</button>
</form>
<!--  Esempio con inserimento multiplo di indirizzi email-->
<span>Separa ogni indirizzo email con un a virgola</span>
<form action="compleanno.php">
    <div>
        <label for="email">Inserisci la tua email:</label>
        <input type="email" id="emails" name="email" multiple>
    </div>
    <button type="submit">Invia il tuo contatto</button>
</form>

Il tag <input type="mail"> definisce un campo per un indirizzo email.

type definisce il tipo di input. In questo caso mail.

id è l’identificativo, univoco del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome del tag input.

value permette di inserire un valore predefinito.

mulitpli è l’attributo che permette l’inserimento di più indirizzi email

Il tag <input type="email"> è un elemento di tipo inline.