Introduzione

I form, sono praticamente dei moduli, che generalmente hanno il ruolo di trasmettere dati da una persona/macchina/database/ecc. che immete i dati, ad un’altra. (questa era una descrizione dei form semplificata, tanto per far capire a tutti di cosa si tratti)

I form possono essere di vari tipi:

  • form di contatto;
  • form di registrazione;
  • form di iscrizione ad una newsletter.

In questa guida vedremmo solamente 2 esempi di form, molto semplici da realizzare in HTML.

Guida per creare form semplici in HTML

Il primo form è praticamente un esempio di form di contatto ed il secondo form è un tentativo di form di registrazione inventato sul momento, tanto per far capire e spiegare i vari tag e attributi che abbiamo a disposizione per creare il form. (ATTENZIONE: questa guida non include tutti i tag e gli attributi per la creazione di form html avanzati.)

Ecco qui il video che spiega tutto sui form semplici, più giù trovate anche il codice usato per la realizzazione del tutorial.

Codice sorgente per creare form di contatto semplice in HTML

<form>
    <label for="nome">Nome</label>
    <input type="text" name="nome" id="nome" placeholder="es: Mario Rossi">
    <br>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="es: [email protected]" required>
    <br>
    <label for="messaggio">Messaggio</label>
    <textarea name="messaggio" placeholder="es: ciao! come stai?"></textarea>
    <br>
    <input type="submit" value="Invia">
</form>

Codice sorgente per creare form di registrazione semplice in HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Esempi semplici di form</title>
</head>
<body>
    <form>
        <label for="nome">Nome</label>
        <input type="text" name="nome" id="nome">
        <br>
        <label for="cognome">Cognome</label>
        <input type="text" name="cognome" id="cognome">
        <br>
        <label for="eta">Et�?</label>
        <input type="text" name="eta" id="eta">
        <br>
        <p>Sesso</p>
        <input type="radio" id="maschile" name="sesso" value="maschile">
        <label for="maschile">Maschile</label>
        <input type="radio" id="femminile" name="sesso" value="femminile">
        <label for="femminile">Femminile</label>
        <input type="radio" id="altro" name="sesso" value="altro">
        <label for="altro">Altro</label>
        <br>
        <p>Hobby</p>
        <input type="checkbox" id="karate" name="hobby" value="karate">
        <label for="karate">Karate</label>
        <input type="checkbox" id="leggere" name="hobby" value="leggere">
        <label for="leggere">Leggere</label>
        <input type="checkbox" id="bere" name="hobby" value="bere">
        <label for="bere">Bere</label>
        <br>
        <input type="submit" value="Invia">
    </form>
    <!--codice fornito da InformaticaDaZero.org-->
</body>
</html>