Esempi di Form in HTML (semplici)

Qui di seguito vogliamo raccogliere qualche esempio di form per pagine HTML. L'intento è quello di permettere un raffronto tra la resa grafica e il codice HTML che il lettore potrà provare a replicare. Gli esempi di questo post sono volutamente semplici, lasciati senza CSS o particolari attributi in modo da focalizzare l'attenzione sui tag fondamentali. Potete inserirli in un qualsiasi body di una vostra pagina web per un test completo.

 
 
 
Esempio 00
La form passa i dati ad una pagina fittizia register.php

 

 Ed ecco il codice che implementa l'immagine sopra, così da poter confrontare.

      <h1>Esempio di pagina web con un form</h1>

      <form action="register.php" method="post">

      <fieldset>
        <legend>Dati anagrafici</legend>
        Inserisci qui il tuo nome: <input type="text" name="nome" /><br />
        Inserisci qui il tuo cognome: <input type="text" name="cognome" /><br />

        Sesso: <input type="radio" name="sesso" value="maschio" />maschio
        <input type="radio" name="sesso" value="femmina" />femmina<br />

        Luogo di nascita: <input type="text" name="luogo" /><br/>
        Data di nascita: <input type="date" name="data" /><br/>
      </fieldset> 

      <fieldset>
        <legend>Password personale</legend>
        Inserisci la password <input type="password" name="password" /><br />
      </fieldset> 

      <fieldset>
        <legend>Dati personali</legend>
        Patente <input type="checkbox" name="auto" />auto 
        <input type="checkbox" name="moto" />moto 
        <input type="checkbox" name="motorino" />moto 50cc<br />

        Classe <select name="classe">
          <option value="xx">Seleziona la classe</option>
          <option value="3ai">Classe 3AI</option>
          <option value="3bi">Classe 3BI</option>
          <option value="3ci">Classe 3CI</option>

        </select><br />

        <textarea name="commento" cols="40" rows="20">Inserisci qui i tuoi commenti</textarea><br />
      </fieldset> 

      <input type="button" value="Saluta" onClick="alert('Ciao!');" />
      <input type="submit" value="Invia" />
      <input type="reset" value="Cancella" />
    </form>

 

Esempio 01

Altro esempio, molto semplice da realizzare in una manciata di minuti. La form passa i dati ad una pagina fittizia stat.php. Aggiungi però un campo nascosto che passa il valore 2.

Ed ecco il codice corrispondete proposto

<form  action="stat.php" method="post">
<fieldset>
<legend>Dati utente</legend>
<input type="hidden" name="controllo" value="2"><br>
Nome <input type="text" name="nome" value="il tuo nome" size="15" maxlength="20"><br>
Cognome <input type="text" name="cognome" value="il tuo cognome" size="15" maxlength="20"><br>
Sesso: <input name="sesso" type="radio" value="1">M
<input name="sesso" type="radio" value="2">F
<input type="reset" value="cancella"><input type="submit" value="invia dati"><br>
</fieldset>
</form>

 

Esempio 02

 Altro esempio. Questa volta fai puntare la tua form alla pagina registrati.php e aggiungi un campo nascosto con nome controllo e valore 2

Ed ecco il codice per contro-verificare.

 

<form action="registrati.php" method="post">
<fieldset>
<legend>Condizioni del servizio:</legend>
Per aderire al servizio devi inserire un user, una password ed accettare le condizioni.<br>
<input type="hidden" name="controllo" value="2"><br>
User <input type="text" name="user" value="" size="15" maxlength="20"><br>
Password <input type="password" name="password" size="15" maxlength="20"><br>
Conferma <input type="password" name="passwordb" size="15" maxlength="20"><br>
Condizioni:<br>
<textarea readonly rows="5" cols="30"><br>
Il webmaster gestore del sito declina ogni ecc....<br>
</textarea><br>
<input name="ceck" type="checkbox"> Ho letto ed accetto le condizioni.<br>
<input type="submit" value="aderisci">
</fieldset>
</form>

 

 Esempio 03

Un esempio più articolato e completo con tutti o quasi gli elementi delle form. Le label sono inserite in alto, pratica molto diffusa tra gli stili in voga recentemente.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Il codice corrispondente per verificare l'esercizio

<!DOCTYPE html>
<html lang="it">
<head>
	<title>Registrazione</title>
	<meta charset="UTF-8">
</head>
<body>

<h1>Benvenuti nella pagina di registrazione</h1>

<form>
	<fieldset>
		<legend>Modulo di registrazione</legend>
		<p>Inserendo i tuoi dati nel modulo sottostante potrai usufruire di servizi eccezionali.
                 Cosa aspetti? (Se incontri difficoltà contattaci ad <a href="mailto:Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.">Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.</a>)</p>
	

			<label for="nomealunno">Nome:</label><br />
			<input type="text" name="nomealunno" id="nomealunno" required size=20><br />
			<br />
			<label for="cognomealunno">Cognome:</label><br />
			<input type="text" name="cognomealunno" id="cognomealunno" required size=20><br />
			<br />
			<label for="sesso">Sesso:</label><br />
			<input type="radio" name="sesso" id="sesso" value="m">M
			<input type="radio" name="sesso" value="f">F
			<br />
			<br />
			Hai conosciuto questo servizione come:<br />
			<input type="checkbox" id="informatica" name="informatica">Internet<br />
			<input type="checkbox" id="calcio" name="calcio">Giornali<br />
			<input type="checkbox" id="scommesse" name="scommesse">Amici<br />
			<br />
			<select name="tempistiche">  
				<option value="Frequenza">-Fequenza-</option>
				<option value="Giorno">Giorno</option>
				<option value="Settimana">Settimana</option>
				<option value="Mese">Mese</option>
			</select><br /><br />

			<label for="commenti">Eventuali commenti:</label><br />
			<textarea id="commenti" name="commenti"></textarea>

			<br /><br />
			<input type="submit" value="Invia">
			<input type="reset" value="Cancella">


	</fieldset>
</form>

<div class="center">Crediti: Alfredo Centinaro - Classe VI DI</div>
</body>
</html>

 


Stampa