Form in HTML5 con input type text

Categoria: Forms | Livello: Beginner | Tags: forms, html5, php
Scritto da il . Ultimo aggiornamento: 2014-05-04
Come realizzare un semplice form in html5 e php con un campo di input di tipo testo.

Form1 è un esempio di Form realizzato in HTML5 che include un unico campo di input di tipo testo. Vedremo come si scrive il codice per inserire il form in una pagina web, come usare gli attributi autocomplete, autofocus, placeholder e required, come validare il campo tramite una regex inserita sull'attributo pattern. Infine scriveremo un file PHP semplicissimo che all'input sul bottone invia una notifica via email con il testo inserito nel campo.

Questo esempio si compone di due parti:

  1. Paragrafo 1: scheda del pacchetto Form1 con i file di esempio del form (Free download)
  2. Paragrafi da 2 a 6: commento al codice e suggerimenti

Ti ricordo che puoi riutilizzare il codice presente in questa pagina e nei file scaricabili, codice che è rilasciato con licenza Creative Commons CC BY-SA 3.0 IT. Per prima cosa scarica il pacchetto zip con i file e il codice pronto uso, poi lasciati guidare passo-passo alla realizzazione del form. Buon divertimento con le API Form di HTML5!

Free Download HTML5 Forms - Form1
Scarica Gratis il Form (HTML5 + PHP)

1. Download dei file di esempio

Il pacchetto in formato compresso ZIP contiene il file HTML con il codice del form e il file PHP con il codice per l'invio, non include codice JavaScript e file CSS. Il form è perfettamente funzionante e richiede soltanto di essere integrato secondo le esigenze.

Titolo Form1: Input Text - HTML5 Forms by examples
Release 0.1.0 del 2014-04-08
Descrizione Codice di esempio per la realizzazione di un form semplice in HTML5 per l'invio via email di un testo immesso in input. Include codice HTML e PHP. Non include JavaScript e CSS.
Linguaggi HTML5, PHP
Contenuto Scripts. Files: form.html, invia-email.php
Anteprima form1.jpg.
Download form1v0_1_0.zip
Data Pubblicato per la prima volta il 2014-04-08
Lingua it-IT
Autore
Licenza Licenza Creative Commons Attribuzione - Condividi allo stesso modo 3.0 Italia (CC BY-SA 3.0 IT)

2. Scrivere il codice HTML5: <form> e <input type:"text">

Creare un form in HTML5 è semplicissimo:

Immaginiamo di volere realizzare sul blog un form con il quale gli utenti possano suggerire il nome del nostro nuovo cucciolo, suggerimento che poi arriverà anonimo direttamente nella nostra casella di posta. Il codice da inserire nella pagina html è:

<form action="invia-email.php" method="post" id="form-contatto1">
    <label for="nomecucciolo">Suggerisci un nome per il mio cucciolo</label>
    <input type="text" placeholder="Suggerisci un nome" name="nomecucciolo">
    <input type="submit" name="suggerisci" value="Suggerisci">
</form>

Se inserisci in una pagina html il codice sopra ottieni questo risultato:

Form v. 1.1

3. Attributi autocomplete, autofocus e placeholder

Tra i nuovi attributi portati in dote da HTML5 troviamo autocomplete, autofocus e placeholder, tutti disponibili per il campo di input "text":

Proviamo a riscrivere il codice html del nostro form usando anche gli due attributi autocomplete e autofocus:

<form action="invia-email.php" method="post" id="form-contatto2">
    <label for="nomecucciolo">Suggerisci un nome per il mio cucciolo</label>
    <input type="text" autocomplete="off" placeholder="Suggerisci un nome" name="nomecucciolo" autofocus>
    <input type="submit" name="suggerisci" value="Suggerisci">
</form>

Se inserisci in una pagina html il codice sopra ottieni questo risultato:

Form v. 1.2

Facciamo due considerazioni:

  1. L'autofocus di questa pagina è impostato proprio sul campo "text" del secondo forum, per verificarlo puoi ricaricare la pagina.
  2. Puoi fare un semplice test per verificare il funzionamento dell'autocomplete, che risulta attivo sul primo form per default e disattivo sul secondo a causa dell'esplicita dichiarazione. Per la verifica procedi così: inserisci il testo "ciao" nel primo form e fai clic su submit, poi torna alla pagina e fai un refresh, quindi prova nuovamente a digitare "ciao" partendo dalla prima lettera e visualizzerai il suggerimento tipico della precompilazione. Ripetendo lo stesso test con il secondo form verificherai che ciò non accade.
1. Nota di Usabilità: alcuni suggeriscono l'uso dell'autofocus per facilitare la scrittura all'interno dei campi senza ricorso a dispositivi di puntamento (mouse e touch), ma questa soluzione presenta una controindicazione con riferimento all'uso della barra spaziatrice, che serve anche a scrollare la pagina. Con l'autofocus attivo, al clic della barra spaziatrice la pagina non scrolla e si inseriscono involontari spazi bianchi nel campo "preselezionato".
2. Nota di Privacy: l'autocomplete è indubbiamente comodo ma può minare la privacy degli utenti, quindi va usato con cautela valutando da caso a caso.

4. Validazione con pattern e regex

L'attributo pattern è una delle novità più interessanti dei forms in HTML5, poichè permette di validare il campo lato client senza fare ricorso al JavaScript. Si tratta in pratica di usare una regola per decidere se il valore inserito nel campo è da considerarsi valido oppure no. Le regole vengono inserite nel linguaggio delle espressioni regolari (regex).

Nel nostro caso, ad esempio, potremmo desiderare che il nome del nostro futuro gatto sia costituito dalle sole 26 lettere dell'alfabeto latino, senza altri caratteri speciali né numeri. Una regex di questo tipo si scrive:

[a-zA-Z]

Il significato della regex sopra è: puoi usare tutti i caratteri dalla a alla z (in minuscolo) e tutti quelli dalla A alla Z (in maiuscolo). Proviamo a inserire questa regola nel form tramite l'attributo pattern e vediamo cosa accade:

<form action="invia-email.php" method="post" id="form-contatto3">
    <label for="nomecucciolo">Suggerisci un nome per il mio cucciolo</label>
    <input type="text" pattern="[a-zA-Z]+" autocomplete="off" placeholder="Suggerisci un nome" name="nomecucciolo">
    <input type="submit" name="suggerisci" value="Suggerisci">
</form>

Il form aggiornato con il pattern:

Form v. 1.3

Facendo qualche test scopriamo che la regola immessa, sebbene ci faccia accettare un nome come Pluto e sia case insensitive, potrebbe essere certamente migliorata, ad esempio accettando:

Le opzioni sono davvero tante, ma accontentiamoci di queste. La regex da inserire nel pattern è:

[a-zA-Z'\s]{2:15}

Riscriviamo il codice html del form:

<form action="invia-email.php" method="post" id="form-contatto4">
    <label for="nomecucciolo">Suggerisci un nome per il mio cucciolo</label>
    <input type="text" pattern="[a-zA-Z'\s]{2,15}" autocomplete="off" placeholder="Suggerisci un nome" name="nomecucciolo">
    <input type="submit" name="suggerisci" value="Suggerisci">
</form>

Adesso testiamolo con l'immissione di nomi con spazi vuoti, lettere accentate e apostrofi:

Form v. 1.4

5. Attributo required

Required è un attributo importantissimo che fa una cosa essenziale: rende il campo obbligatorio. Nel nostro caso è fondamentale perchè non vorremmo di certo ricevere email vuote, cioè con l'unico campo non compilato.
Del resto il cucciolo aspetta un nome! ^_^

Aggiorniamo pertanto il codice html:

<form action="invia-email.php" method="post" id="form-contatto4">
    <label for="nomecucciolo">Suggerisci un nome per il mio cucciolo</label>
    <input type="text" pattern="[a-zA-Z'\s]{2,15}" autocomplete="off" placeholder="Suggerisci un nome" name="nomecucciolo" required >
    <input type="submit" name="suggerisci" value="Suggerisci">
</form>

Per verificare come si comporta il form con il nuovo attributo required sull'input text, prova a fare clic su "Suggerisci" senza inserire nulla nel campo:

Form v. 1.5

6. Codice PHP per notifica via email

È giunto il momento di dotare il nostro form di codice PHP per l'invio dell'email. Con un editor di testo crea un nuovo file, copia dentro il codice che trovi di seguito, salva il file con il nome invia-email.php.

Codice PHP del form (file invia-email.php):

<?php
    $mailto = 'tua@email.com'; // Email del ricevente
    $subject = 'Un nuovo suggerimento per il tuo cucciolo'; // Titolo del messaggio di posta

    $error_message = 'Oooops! Invio non riuscito.'; // Messaggio di errore
    $success_message = 'Grazie per avermi suggerito un nome per il mio cucciolo!'; // Messaggio di invio riuscito

    $nomecucciolo = stripcslashes($_POST['nomecucciolo']);

    $message = "Hai un nuovo suggerimento dal tuo form in HTML5.\r\n"; // Prima riga del messaggio di posta
    $message .= "Nome suggerito per il cucciolo: $nomecucciolo"; // Seconda riga del messaggio di posta
    $headers = "Da: " . "X-Mailer: PHP/" . phpversion(); // Email del mittente

    if (mail($mailto, $subject, $message, $headers)) {
        echo($success_message);
    } else {
        echo($error_message);
    }
?>

Ricorda che puoi creare pagine html e php con qualunque editor testuale, anche con il blocco note di Windows. Questo script PHP per il form si trova in un file testuale che è facile da realizzare:

Le parole precedute dal segno di dollaro sono variabili. In questo script abbiamo soltanto variabili testuali:

Free Download HTML5 Forms - Form1
Scarica Gratis il Form (HTML5 + PHP)

Francesco D'Agostino | Twitter (@webbalo) | Google+ | Facebook