I form

Il tag <form>

Il tag <form> è il contenitore esterno che definisce, tramite l'attributo action, l'URL della pagina che dovrà ricevere le informazioni inviate e tramite l'attributo method il tipo di trasmissione dei suddetti dati.

L'attributo method può avere due valori: "post" e "get". Quando scegliamo "post" i dati inviati sono nascosti, quando scegliamo "get" i dati sono visibili nell'URL della pagina. A seconda di come dobbiamo usare i dati raccolti dal form ci converrà usare un metodo o l'altro.

I tag <fieldset>, <legend> e <label>

Il tag <fieldset> serve per raggruppare i diversi campi di un form in sezioni, il cui titolo va inserito nel tag <legend>. Il tag <label> serve per assegnare una etichetta ad un particolare elemento del form e può essere usato solo se l'<input> ha un attributo id.

Il tag <input>

Il tag <input> serve per definire i campi del form che l'utente dovrà compilare. A seconda del valore dell'attributo type il tag <input> sarà diverso. E' un elemento vuoto quindi non necessita del tag di chiusura. Di norma si inseriscono anche gli attributi name e id che servono agli script PHP o Javascript per elaborare i dati.

Se vogliamo creare una casella dove inserire un testo e una password dobbiamo inserire due tag <input>, uno di type="text" ed uno di type="password".

Per le caselle di testo possiamo settare alcuni attributi: autofocus per fare in modo che al caricamento della pagina il campo con questo attributo sia già selezionato ed editabile, required per definire il campo come obbligatorio, placeholder per definire un testo provvisorio che indichi all'utente il tipo di dato che deve inserire, maxlength per definire il numero massimo di caratteri che possono essere inseriti nella tabella, pattern per definire un tipo di contenuto al quale deve corrispondere l'immissione dell'utente. L'attributo autofocus deve essere uno solo per pagina e può limitare l'accessibilità per chi usa uno screen reader.

L'attributo più importante di tutti i tag input è il value che rappresenta il valore di default del campo, che viene inviato al server anche se l'utente non l'ha inserito.

Se vogliamo che l'utente possa inserire un testo di più righe dobbiamo usare il tag <textarea>. Il contenuto della <textarea> ha lo stesso valore dell'attributo value nelle caselle di testo. E' possibile indicare un numero massimo di caratteri inseribili tramite l'attributo maxlength, il valore di default è 32.700. L'utente può ingrandire l'area di testo trascinandone l'angolo in basso a destra.

Se vogliamo offrire all'utente delle scelte da effettuare possiamo usare un <input> di type="checkbox", che definisce una scelta multipla, oppure un <input> di type="radio" che definisce una scelta esclusiva. Tutti gli elementi che fanno parte dello stesso set di scelta devono avere uguale attributo name. E' obbligatorio l'attributo value che definisce il valore che verrà inviato al server. Si può inserire l'attributo checked per fare in modo che una particolare opzione della scelta sia già preselezionata.

Se vogliamo che l'utente possa caricare un file dobbiamo usare un <input> di type="file". Nel caso in cui un form contenga un <input> di type="file" il method non può essere "get".

Se vogliamo che l'utente inserisca un'indirizzo e-mail, un URL o un numero di telefono dobbiamo usare un <input> di type="email" oppure di type="url" o di type="tel".

Ogni form ha bisogno di un bottone per l'invio dei dati. Ce ne sono diversi tipi: l'<input> di type="submit" serve per l'invio dei dati del form, l'<input> di type="reset" serve per pulire i campi del form dai dati inseriti fino a quel momento, l'<input> di type="image" serve per definire una immagine che funga da bottone generico, l'<input> di type="button" serve anch'esso per definire un bottone generico che viene usato per associare degli eventi Javascript.

Per definire il testo che appare nel bottone possiamo usare l'attributo value, che usiamo anche quando vogliamo dare un valore di default a tutti i campi del form.

Esiste anche il tag <button> che permette di creare un bottone con del testo al suo interno.

Differenze tra <input type="button"> e tag <button>:

• Nel tag <button> è possibile inserire dell'HTML
• Il tag <button> supporta l'uso degli pseudoelementi :before e :after
• Se il tag <button> non ha l'attributo type definito questo vale di default "submit"  

A volte può servirci che un campo del form sia nascosto, in questo caso usiamo un <input> di type="hidden". Quando invece vogliamo che un campo sia visibile ma non editabile dall'utente possiamo usare l'attributo disabled.

Se vogliamo offrire all'utente la possibilità di immettere un numero dobbiamo usare un <input> di type="number" per un generico numero oppure di type="range" per un numero compreso tra due valori. Necessitano di tre attributi: un valore minimo min, un valore massimo max e la granularità dei possibili valori step. <input> di type="number" viene reso dai browser come una casella con a lato delle freccine per aumentare o diminuire il numero, <input> di type="range" viene reso dai browser come una barra con un cursore.

Se vogliamo offrire all'utente la possibilità di inserire una data o un orario possiamo usare un <input> di type="date" oppure type="datetime" o type="datetime-local" (senza fuso orario), type="month", type="week", type="time". Necessitano di tre attributi: un valore minimo min, un valore massimo max e la granularità dei possibili valori step. Nei browser che li supportano appaiono come datepicker, negli altri come caselle di testo.

Se vogliamo offrire all'utente la possibilità di fare una ricerca dobbiamo usare il tag <input> di type="search".

Se vogliamo permettere all'utente di scegliere un colore da una palette dobbiamo usare l'<input> di type="color" che, nei browser che lo supportano, genera un colorpicker.

Non tutti i browser supportano tutti i tipi di <input> e i loro attributi, controllare sempre sul sito Can I use...? per scoprire se il tag è supportato o meno da un numero sufficiente di browser per decidere di usarlo.

Il tag <select>

Il tag <select> serve per creare degli elenchi a discesa. Le singole voci dell'elenco vanno racchiuse nel tag <option>. Di norma si inseriscono nel tag <select> anche gli attributi name e id che servono agli script PHP o Javascript per elaborare i dati. E' obbligatorio l'attributo value nel tag <option> che definisce il valore che verrà inviato al server. E' possibile consentire scelte multiple settando l'attributo multiple nel <select>. Si può inserire l'attributo selected in un <option> per fare in modo che una particolare opzione della scelta sia già preselezionata. Diverse opzioni di scelta possono essere raggruppate tramite un tag <optgroup> e un attributo label.

<form action="pagina.html" method="post" id="form1">
    <label for="nome">Inserisci il tuo nome</label>
    <input type="text" name="nome" id="nome" required><br>
    <label for="cognome">Inserisci il tuo cognome</label>
    <!-- l'attributo pattern indica che il campo deve contenere 20 caratteri alfabetici che possono essere maiuscoli o minuscoli-->
    <input type="text" name="cognome" id="cognome" pattern="[A-Za-z]{20}"><br>
    <label for="password">Inserisci la tua password</label>
    <input type="password" name="password" id="password" maxlength="10" placeholder="Qui la tua pw">
</form>

<form action="pagina.html" method="post" id="form2">
    <textarea name="recensione" maxlength="500" cols="80">Il contenuto del tag textarea è un testo di default</textarea>
</form>

<form action="pagina.html" method="post" id="form3">
    <fieldset>
        <legend>Lingue conosciute</legend>
        <input type="checkbox" name="lingua" value="Inglese">Inglese
        <input type="checkbox" name="lingua" value="Francese">Francese
        <input type="checkbox" name="lingua" value="Spagnolo">Spagnolo
        <input type="checkbox" name="lingua" value="Tedesco">Tedesco
    </fieldset>
    <fieldset>
        <legend>Sesso</legend>
        <input type="radio" name="sesso" value="Maschio" checked>Maschio
        <input type="radio" name="sesso" value="Femmina">Femmina
    </fieldset>
</form>

<form action="pagina.html" method="post" id="form4">
    <label for="file">Seleziona un file da caricare</label>
    <input type="file" name="file" id="file">
</form>

<form action="pagina.html" method="post" id="form5">
    <input type="email" name="email" id="email">Inserisci il tuo indirizzo mail<br>
    <input type="url" name="url" id="url">Inserisci l'URL del tuo sito<br>
    <input type="tel" name="tel" id="tel">Inserisci il tuo numero di telefono<br>
</form>

<form action="pagina.html" method="post" id="form6">
    <input type="submit" value="Conferma invio"><br>
    <input type="reset" value="Cancella tutto"><br>
    <input type="image" src="https://www.google.it/images/srpr/logo11w.png" alt="logo Google" width="50"><br>
    <input type="button" value="Bottone generico"><br>
    <button type="submit">Clicca e vai su
        <img src="https://www.google.it/images/srpr/logo11w.png" alt="logo Google" width="50">
        <i>il tuo motore di ricerca</i>
    </button>
</form>

<form action="pagina.html" method="post" id="form7">
    <input type="text" disabled placeholder="Questo campo è disabilitato">Il campo seguente è nascosto
    <input type="hidden" value="0">
</form>

<form action="pagina.html" method="post" id="form8">
    <input type="number" name="eta" min="18" max="99" step="1"><br>
    <input type="range" name="peso" min="40" max="100" step="10">
</form>

<form action="pagina.html" method="post" id="form9">
    <!-- il valore di step deve essere espresso in giorni-->
    <input type="date" min="2015-01-01" max="2015-12-31" step="1"><br>
    <!-- il valore di step deve essere espresso in secondi-->
    <input type="datetime" min="1980-01-01T13:30:00" max="1990-12-31T13:30:00" step="60"><br>
    <input type="datetime-local" min="1980-01-01T13:30:00" max="1990-12-31T13:30:00" step="60"><br>
    <!-- il valore di step deve essere espresso in mesi-->
    <input type="month" min="01" max="12" step="1"><br>
    <!-- il valore di step deve essere espresso in settimane-->
    <input type="week" min="1" max="52" step="1"><br>
    <!-- il valore di step deve essere espresso in secondi-->
    <input type="time" min="09:00:00" max="18:00:00" step="60">
</form>

<form action="pagina.html" method="post" id="form10">
    <input type="search">Immetti il testo da cercare
</form>

<form action="pagina.html" method="post" id="form11">
    <input type="color">Scegli un colore
</form>

<form action="pagina.html" method="post" id="form12">
    <label for="colori">Che colori ti piacciono?</label>
    <select name="colori" id="colori" multiple>
        <optgroup label="caldi">
            <option value="giallo" selected>giallo</option>
            <option value="arancione">arancione</option>
            <option value="rosso">rosso</option>
        </optgroup>
        <optgroup label="freddi">
            <option value="verde">verde</option>
            <option value="blu">blu</option>
            <option value="viola">viola</option>
        </optgroup>
    </select>
</form>

/* no css */

// no js