Esempi di Form semplici in HTML

Introduzione ai form in HTML

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.

I form possono essere di vari tipi:

  • form di contatto
  • form di registrazione
  • form di iscrizione ad una newsletter
  • ecc…

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

Il primo form è praticamente un esempio di form di contatto ed il secondo form è un 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 molto avanzati.)

Potrebbe interessarti: esempio form di contatto avanzato HTML5 e CSS3

Ecco qui il video che spiega tutto sui form semplici. Sotto questo video trovate anche il codice usato per la realizzazione del tutorial.

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>
`

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>
`