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.
Indice dei contenuti
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