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