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.
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:info@tizioincognito.it">info@tizioincognito.it</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>Ultima modifica 27 Gennaio 2022