HTML - I moduli

  »   HTML di base  »   HTML Tutorial - Creating Forms in HTML

I moduli sono uno degli strumenti più importanti utilizzati da un webmaster per raccogliere informazioni importanti su un utente internet, informazioni come e-mail, nome, indirizzo, telefono o qualsiasi altro tipo di informazioni.

In base alla necessità le informazioni possono anche essere memorizzate su un file, è possibile effettuare statistiche, registrare moduli o abbonamenti alle informazioni presentate nella vostra pagina web, e molto altro.

HTML - I campi di testo

Prima di entrare nel dettaglio, dobbiamo esporre un po' le basi di un modulo. I campi di testo hanno alcuni attributi che devono essere menzionati fin dall'inizio:

  • type - imposta il tipo di campo. Ad esempio: password, testo, file.
  • name - referenzia il campo dandogli un nome.
  • size - imposta la dimensione del campo.
  • maxlenght - il valore massimo di caratteri che è possibile inserire.
html<form method="post" action="mailto:youremail@email.com">
	Nome: <input type="text" size="10" maxlength="40" name="name" /><br />
	Password: <input type="password" size="10" maxlength="10" name="password" />
</form>

Demo

Nome:
Password:

NON utilizzare questo codice. I dati inviati infatti non saranno criptati e una condivisione è quindi rischiosa.

HTML - Moduli e-mail

Aggiungiamo ora il pulsante di invio. Generalmente, il pulsante di invio dovrebbe essere visualizzato al termine dei campi di inserimento ed è chiamato 'Invia', 'Conferma', o qualcosa di simile.

È inoltre necessario specificare una destinazione dei dati inseriti nel modulo, nonché la modalità di trasferimento. Questo può essere fatto aggiungendo i seguenti attributi del modulo:

  • method - Useremo il metodo "post". Questo invia il modulo con le informazioni inserite senza visualizzare i dettagli dell'utente.
  • action - Serve per specificare l'URL a cui verranno mandate le informazioni.
html<form method="post" action="mailto:youremail@email.com">.

	Nome: <input type="text" size="10" maxlength="40" name="name" /><br />
	Password: <input type="password" size="10" maxlength="10" name="password" /><br />
	
	<input type="submit" value="Invia" />
	
</form>

Demo

. Nome:
Password:

Modifica l'indirizzo e-mail inserendone uno vero per farlo funzionare!

HTML - Il pulsante radio

I pulsanti di opzione sono molto popolari, utili e facili da usare. L'esempio più usato sarebbe una domanda con più di una scelta di risposta. Gli attributi che devono essere noti sono i seguenti:

  • value - specifica cosa sarà inviato nel caso in cui un utente selezioni un determinato pulsante. Verrà inviato solo un singolo valore.
  • name - dà un nome al pulsante.
html<form method="post" action="mailto:youremail@email.com">
	<p>Che tipo di scarpe indossi ?</p>
	
	<label>Color:</label> <br />
	<input type="radio" name="color" value="dark" /> Scure <br />
	<input type="radio" name="color" value="light" /> Chiare <br />
	
	<label>Size:</label> <br />
	<input type="radio" name="size" value="small" /> Piccole <br />
	<input type="radio" name="size" value="average" /> Medie <br />
	<input type="radio" name="size" value="big" /> Grandi <br />
	
	<input type="submit" value="Email" />
</form>

Demo

Che tipo di scarpe indossi ?


Scure
Chiare

Piccole
Medie
Grandi

Se sostituite l'indirizzo e-mail con il vostro, riceverete un'e-mail con il vostro: size=(choose) color=(choose)'.

HTML - Checkbox

Utilizzando le caselle di controllo l'utente ha la possibilità di scegliere una, due o più varianti di risposta. Il nome e gli attributi del valore vengono utilizzati come per i pulsanti radio.

html<form method="post" action="mailto:youremail@email.com">
	<p>Quale colore preferisci?</p>

	<input type="checkbox" name="shoes" value="black" /> Nero <br/>
	<input type="checkbox" name="shoes" value="white" /> Bianco <br/>
	<input type="checkbox" name="shoes" value="gray" /> Grigio <br/>
	<input type="checkbox" name="shoes" value="black&white" /> Bianco e nero<br/>
	
	<input type="submit" value="Email" />
</form>

Demo

Quale colore preferisci?

Nero
Bianco
Grigio
Bianco e nero

HTML -Un'altro modulo lista

Un altro modello di lista è il seguente, in cui l'utente seleziona una certa riga che sarà inviata come opzione scelta.

html<form method="post" action="mailto:youremail@email.com">
	<p>Preferenze musicali:</p>
	
	<select multiple name="music" size="4">
		<option value="emo" selected>Emo</option> 
		<option value="metal/rock" >Metal/Rock</option> 
		<option value="hiphop" >Hip Hop</option> 
		<option value="ska" >Ska</option> 
		<option value="jazz" >Jazz</option> 
		<option value="country" >Country</option> 
		<option value="classical" >Classical</option> 
		<option value="alternative" >Alternative</option> 
		<option value="oldies" >Oldies</option> 
		<option value="techno" >Techno</option> 
	</select><br />
	
	<input type="submit" value="Email" />
</form>

Demo

Preferenze musicali:


Un altro modello di modulo è il menu a tendina. Questo sarà visualizzato come un campo, che mostrerà poi una lista quando viene fatto un click su di esso.

html<form method="post" action="mailto:youremail@email.com">
	<p>Livello di educazione?</p>
	
	<select name="education">
		<option>Scegli</option>
		<option>Diploma scuola superiore </option> 
		<option>Laurea</option>
		<option>Dottorato</option>
	</select><br />
	
	<input type="submit" value="Email" />
</form>

Demo

Livello di educazione?


HTML - Modulo di Upload

Innanzitutto va detto che questo modulo è solo l'interfaccia, la parte visibile con cui l'utente potrà lavorare. Per fare un upload completo è necessario utilizzare PHP o PERL, per non parlare di javascript.

Un modulo di upload è composto da molte parti. Inizieremo stabilendo la dimensione del file che caricheremo. Questa cosa è fatta usando un campo nascosto. Dopo di che, creeremo il campo in cui l'utente sarà in grado di scrivere l'indirizzo del file o sarà in grado di sfogliare in una 'finestra di esplorazione'.

html<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />

Demo

HTML - Campo di testo e commenti

Generalmente, le zone di testo sono utilizzate per inviare commenti. I blog e i forum sono le principali pagine web che utilizzano questo tipo di opzioni. Tuttavia, ci sono molti siti che utilizzano queste zone di testo per conoscere l'opinione dell'utente su un determinato argomento.

Per creare una zona di testo specificheremo prima gli attributi rows e cols all'interno del tag <textarea>. 'Rows' stabilirà l'altezza del campo, e 'cols' la sua lunghezza, in termini di caratteri. Nell'esempio seguente ci sono 5 righe di 20 caratteri ciascuna. Inoltre, dobbiamo specificare gli attributi dell'etichetta warp, quelli che sono:

  • wrap=
    1. "off"
    2. "virtual"
    3. "physical"
html<form method="post" action="mailto:youremail@email.com">

	<textarea rows="5" cols="20" wrap="physical" name="comments">Write a comment</textarea><br />
	<input type="submit" value="Email Yourself" />
	
</form>

Demo


Inoltre, va detto che tutto ciò che scriverai sarà mostrato nella zona di testo.