5 – Form

Le form sono delle maschere di inserimento dati che permettono l’iterazione con l’utente. Nelle form troviamo degli elementi come le classiche caselle di testo, elenchi a discesa, combo box, aree di testo, check box (cerchietti), radio button e i button. Per funzionare le form hanno bisogno di essere elaborate da altri linguaggi lato server come php, asp, dot net…

Vediamo la parte html con il tag <form> :

<form id="inserimentoCliente" name="inserimento"></form>

È importante indicare l’id della form, ma anche il name, perché l’aggancio alla pagina che riceve i dati dalla form, a differenza del javascript che usa l’id, saprà che i dati arrivano dalla form che si chiama inserimento. Importante è la destinazione dei dati tramite l’attributo action e il metodo di come vengono passati con method.

<form id="inserimentoCliente" name="inserimento" action="elabora.php" method="post"></form>

Con il metodo i post i dati saranno invisibili all’utente. Mentre con il metodo get i dati verranno passati tramite l’url. Vediamo il contenuto della form:

<form id="inserimentoCliente" name="inserimento" action="elabora.php" method="post">
    Cognome: <input type="cognome" id="Cognome">
</form>

Metto un po’ di abbellimento e inserisco i tag <input> dentro a una tabella:

<form style="background-color: pink; width: 45%; padding:5px; border: dashed 2px blue" id="inserimentoCliente" name="inserimento" action="elabora.php" method="post">
    <table>
        <tr><td> Cognome:</td>
            <td><input style="background-color: yellow" type="cognome" id="Cognome"></td>
        </tr>
        <tr><td>Nome:</td><td><input style="background-color: yellow" type="nome" id="Nome"></td>
        </tr>
    </table>
</form>

Posso impostare anche la lunghezza dei tag <input> tramite l’attributo size e la lunghezza massima dei caratteri con maxlength :

<input size="45" maxlength="9" type="cognome" id="Cognome">

Si può mettere anche un valore di default con l’attributo value :

<input value="no nickname" type="cognome" id="Cognome">

Si può anche fare in modo che l’input già selezionato col cursore selezionato attivando la prima casella di default senza che l’utente debba cliccarci tramite l’attributo autofocus :

<input autofocus type="cognome" id="Cognome">

Capita a volte che una casella non si voglia farla modificare (quindi rimane compilata) tramite  il readonly

<input readonly type="cognome" id="Cognome">

Se con il readonly posso comunque vedere il testo e copiarlo (ma non modificarlo o cancellarlo), con il disable lo rendo solo visibile inibendo ogni iterazione:

<input disable type="cognome" id="Cognome">

Interessante è l’autocomplete che permette di abilitare l’auto completamento dei dati precedentemente inseriti su quella casella.

<input autocomplete="on" type="cognome" id="Cognome">

L’autocomplete si può applicare anche su tutto il form.

Per inviare i dati inseriti bisogna aggiungere un bottone in fondo

<input type="submit" value="Invia">

Per rendere un campo obbligatorio l’attributo è require :

<input require type="cognome" id="Cognome">

Aggiungiamo il campo cap per evidenziare che se un campo predefinito da regole l’invio dati non viene accettato:

<input size="5" maxlength="5" type="text" name="cap" id="Cap" >

Si può impostare una regola da rispettare affinché il campo cap ristette delle regole da rispettare, tramite l’attributo required pattern che prevede la definizione di un’espressione regolare o regexp :

<input size="5" maxlength="5" type="text" name="cap" id="Cap" required pattern="[0-9] {5}">

Dico che il campo cap deve contenere numeri da 0 a 9 e deve contenere esattamente 5 caratteri.

Il problema del value è che se l’utente non compila il campo il valore del value viene inviato dal form. Qualora non voglia ottenere tale risultato devo usare l’attributo placeholder che ha funzione solo da etichetta.

<input placeholder="solo il primo cognome" type="cognome" id="Cognome">