I moduli sono definiti dall'elemento form. Tutti gli elementi all'interno di form appartengono a tale modulo.
<form> … </form>
Nell'elemento iniziale <form> si richiede l'attributo action. Attraverso questo si indica cosa deve accadere con i dati del modulo. Solitamente, si tratta di un'applicazione PHP.
<form method="post" action="form.php"> … </form>
Assicuratevi che il file specificato possa effettivamente essere trovato. Quindi dovete impostare il percorso corretto.
Invece di uno script, è possibile specificare un indirizzo email.
<form method="post" action=mailto:contatto@psd-tutorials.it method="post" enctype="text/plain"> … </form>
In questo caso, i dati del modulo vengono inviati via email. Ciò non è di certo elegante, quindi la variante con lo script viene quasi sempre preferita. Ma se al momento non si dispone di uno script, è possibile completare l'invio del modulo anche via email.
Un altro attributo importante per l'elemento form è method. Con questo si stabilisce il metodo di trasmissione HTTP per l'invio del contenuto del modulo. Sono disponibili due varianti diverse.
• post = I dati del modulo vengono inviati in due fasi all'indirizzo specificato. Innanzitutto, il browser contatta l'indirizzo specificato. Una volta riuscito, i dati del modulo vengono passati allo script.
• get = Con questo metodo, i dati del modulo vengono aggiunti alla fine dell'URL assegnato all'attributo action. I dati del modulo sono quindi visibili anche nella barra degli indirizzi del browser.
Resta ovviamente la domanda su quale di queste due varianti utilizzare per l'invio dei dati del modulo. In linea di massima, è possibile utilizzarle entrambe. Ma in particolare quando si tratta di grandi quantità di dati e dell'upload di file sul server, è consigliabile usare il metodo post.
Campi modulo semplici
Fino a ora è stato definito solo lo scheletro esterno del modulo. Nel browser, però, non è ancora visibile alcun modulo.
<form method="post" action="form.php"> … </form>
Ora si tratta di riempire il modulo con contenuto/vita.
Il tipo di campo probabilmente più utilizzato è un campo di input su una riga. Questi vengono utilizzati ad esempio per chiedere nomi, cognomi e indirizzi email. I campi di input su una riga si definiscono come segue:
<input type="text" name="nome" />
All'elemento input viene assegnata la combinazione attributo-valore type="text". Inoltre, a ogni campo di input è necessario fornire un identificatore interno. Questo identificatore deve essere univoco nel documento ed è particolarmente utile quando si tratta di elaborare i dati del modulo tramite script. Evitate di usare spazi e caratteri speciali nell'identificatore.
Se guardate il risultato nel browser, otterrete l'immagine seguente:
Non è affatto spettacolare in questo momento. Ma se cliccate sul campo di testo, noterete che potete già inserire testo.
Ancora manca un'etichetta per far sapere ai visitatori cosa devono inserire nel campo.
Nome: <input type="text" name="nome" />
Anche qui, dando un'occhiata al browser, otterrete il risultato desiderato.
Con l'attributo size potete definire la larghezza del campo.
Nome: <input type="text" name="nome" size="30" /> <br /> CAP: <input type="text" name="cap" size="5" />
All'attributo size viene assegnata la larghezza desiderata del campo.
In questo caso, 5 corrisponde esattamente a cinque caratteri. In questo contesto, l'attributo maxlength è interessante. Questo specifica il numero massimo di caratteri ammessi nel campo. Ecco un esempio anche per questo:
Nome: <input type="text" name="nome" size="30" maxlength="40" />
Se il valore specificato in maxlength è maggiore di quello in size, quando si inseriscono testi più lunghi, avviene automaticamente lo scrolling nel campo.
Con l'attributo value è possibile fornire un valore predefinito per il campo.
Nome: <input type="text" name="nome" value="Il tuo nome" />
Il valore assegnato a value è considerato come preimpostazione nel campo.
Gli utenti possono cancellare questo valore preimpostato.
Potete inoltre impedire che i valori nei campi vengano cancellati. In questo caso si definisce un campo di input che di fatto non è più un campo di input. In realtà, tali campi spesso vengono utilizzati per le uscite. Potrebbe essere interessante utilizzarlo, ad esempio, per mostrare i valori calcolati tramite script. Pensate ad un calcolatore, ad esempio. Allo stesso modo, è possibile preimpostare manualmente un campo con un testo che i visitatori non possono più modificare. (Nota: il simbolo dell'euro non viene visualizzato correttamente nella visualizzazione in PDF).
<input name="prezzo" type="text" value="€ 699.-" readonly />
Per impostare un campo in sola lettura, si assegna l'attributo readonly. Anche qui, diamo un'occhiata al risultato:
Il testo predefinito è visibile direttamente. Tuttavia, non è possibile cancellarlo.
Definire campi password
Ovviamente conoscete i campi password. Ovunque vi registriate, dovete inserire una password. (Solitamente è richiesto di inserirla due volte).
I dati inseriti nel campo di input non sono visibili, ma vengono automaticamente sostituiti da stelle/puntini dal browser. Vantaggio di questa variante: le persone che potrebbero guardare oltre la vostra spalla durante l'inserimento della password non possono decifrarla. Tuttavia, è un errore pensare che i campi password siano automaticamente sicuri. In realtà, le password vengono trasmesse in chiaro in caso di utilizzo di HTTP normale durante l'invio del modulo.
I campi password vengono definiti nel seguente modo:
<input type="password" name="password" />
All'attributo type viene assegnato il valore password. Anche qui, diamo un'occhiata al risultato.
Quando digiterete qualcosa lì, i browser renderanno immediatamente illeggibile durante l'inserimento.
