Esempi di Form semplici 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. (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
  • 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 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 molto avanzati, per i form avanzati, a breve, realizzeremo una guida apparte)

Ecco qui il video che spiega tutto sui form semplici, più giù 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: mariorossi93@gmail.com" 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>

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *