HTML offre la possibilità di raccogliere delle informazioni da una pagina web, utilizzando i moduli (o form). Per creare un modulo devo servirmi del tag contenitore <form>. Gli attributi del tag form sono: action="a chi deve essere inviato il modulo per l’elaborazione" e method="POST o GET" che specifica con quale modalità devono essere trasmessi i dati del modulo: utilizzando il metodo GET le informazioni verranno inviate all’elaboratore del modulo tramite la barra degli indirizzi scrivendo dopo l' url '?' e le informazioni, con il metodo POST i dati sono invece inviati come parte del messaggio (non visibile sull’url). Ho la possibilità di inserire caselle di testo, caselle password, aree di testo, caselle di controllo, pulsanti di opzione, menu e pulsanti. Ogni elemento deve essere creato utilizzando il tag vuoto <input />. Gli attributi fondamentali del tag <input> sono: type="tipo di controllo che voglio inserire", valori ammessi: “text" (casella di testo), “password" (casella di testo della quale non si legge il contenuto) “checkbox" (casella di controllo), “radio" (casella di opzione); name="nome con il quale verrà riconosciuto il valore del controllo da parte dell’elaboratore del modulo"; value="valore di default". <input type="text" name="NOME" value="valore iniziale" /> Altri controlli inseribili in un modulo sono il campo note utilizzando nel modo che segue il tag contenitore <textarea>: <textarea name="nome" rows="num" cols="num"> testo della nota </textarea> il campo menu utilizzando il tag contenitore <select> nel modo seguente: <select name="nome controllo"> <option value="rosso"> colore rosso </option> <option value="verde"> colore verde </option> <option value="giallo"> colore giallo </option> </select> Per inviare il modulo deve essere creato un pulsante: <form action="mailto:indirzzo e- mail" method="POST"> <input type="text" name="NOME" value="valore iniziale" /> <input type="password" name="PSW" /> <input type="radio" name="taglia" value="S" />Small <input type="radio" name="taglia" value="M" />Medium <input type="radio" name="taglia" value="L" />Large <input type="checkbox" name="optional" value="CerchiInLega" />Cerchi in lega <input type="checkbox" name="optional" value="Fendinebbia" />Fendinebbia <input type="checkbox" name="optional" value="Radio" />Autoradio
Non essendo nostro scopo elaborare, mediante degli script, i valori inseriti nel moduli, ci limiteremo ad inviare i dati raccolti ad uno specificato indirizzo di posta elettronica; per questo motivo gli attributi del tag form saranno sempre method="POST" e action="mailto:indirzzo email". Esempio di verifica che le password inserite in due caselle di testo coincidano con uno script in javascript: <html> <head> <title>Inserire e validare la password</title> <script language=”javascript” type="text/javascript"> <!-- Nascondi lo script ai vecchi browsers function validazioneModulo(pswdModulo) { if (pswdModulo.pswd1.value == "") { alert ("Attenzione!!! Hai dimenticato di inserire la password!"); pswdModulo.pswd1.focus(); return false; } if (pswdModulo.pswd1.value != pswdModulo.pswd2.value) { alert ("Le password non corrispondono!"); pswdModulo.pswd1.focus(); pswdModulo.pswd1.select(); return false; } return true; } //fine occultamento script --> </script> </head> <body> <form onSubmit="return validazioneModulo(this)" action="azione.cgi"> Nome: <input type="text" size="30"> <p>Password: <input type="password" name="pswd1"> <p>Conferma password: <input type=”password” name="pswd2"> <input type="submit" value="Invia"> <input type="reset"> </form> </body> </html>
Torna su DPD- 2013