340 likes | 441 Views
Laboratorio di XHTML e CSS. Lezione 6: Form. Form. In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito).
E N D
Laboratoriodi XHTML e CSS Lezione 6: Form
Form • In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). • Le informazioni sono poi spedite a chi gestisce la pagina (per esempio per e-mail o più comunemente a un server “in attesa”). • Si deve usare il comando <form> Elementi della form Pulsanti invia e cancella </form> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Scopodei form • Tutte le informazioni che il sito ricava dalle form possono essere usate da altri programmi. • Ad esempio, le form sono utili in combinazione con i database: ogni form produce un record (una riga) che viene memorizzato in un database per elaborazioni successive. Testo di default Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Form: attributi <form action=risultato del pulsante INVIO (es. link a pagina di conferma o mailto:indirizzo internet a cui inviare i dati inseriti) method=“post / get” (metodo con cui i dati del modulo verranno inviati al server) id=nome univoco per identificare la form > Elementidella form Pulsantiinvia e cancella </form> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Form: inviodati • POST Incorpora i dati del modulo nella richiesta HTTP. • GET Accoda il valore all'URL di richiesta della pagina. • Se non si specifica nulla, l'impostazione predefinita è il metodo GET. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Form: inviodati GET GET Accoda il valore all'URL di richiesta della pagina. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Form: inviodati • Non utilizzare il metodo GET per inviare moduli lunghi. • La lunghezza massima degli URL è di 8192 caratteri. Se i dati inviati superano questo limite, possono verificarsi troncamenti che determinano risultati di elaborazione inaspettati o errati. • Per questionidisicurezza, megliousareilmetodo POST Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: creazione di una form <form action="http://win.pixely.it/html/registrazioneGET.php" method="get" name="iscrizione“ id=“iscrizione”> Inserisci il tuo nome: <input type="text" name="nome" size="40“ /> <input type="submit" value="Iscrivimi“ /> </form> Create una form con metodo GET e verificatecosasuccede al link dopo aver inviatoilvostronome: Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1(2): creazione di una form <form action="http://win.pixely.it/html/registrazione.php" method=“post" name="iscrizione“ id=“iscrizione”> Inserisci il tuo nome: <input type="text" name="nome" size="40“ /> <input type="submit" value="Iscrivimi“ /> </form> Cambiateilcodiceinserendonell’actionhttp://win.pixely.it/html/registrazione.php E nelmetodo POST. Cosasuccede? Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Form: elementi • È necessario creare degli spazi per l'input dell'utente. Ogni spazio deve avere un nome. • Si possono inserire: • caselle e aree di testo per inserire del testo libero • check box (caselle a selezione multipla) • radio box (caselle a selezione singola) • menù a selezione singola o multipla Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Campo ditesto • Per inserire del testo libero su una sola riga <input type=“text/password” [password:leletterevengonovisualizzate con *** } ] name=“nomelogico” value=“valore iniziale di default” size=“45” [lunghezza del campo espressa in n° dicaratteri] maxlength=“45” [n° massimodicarattericonsentiti] /> Testo di default Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: inseriamo campi di testo <p>Inserisciiltuonome: <input type="text" name="nome" size="40“ /></p> <p>Inserisci la tua email: <input type="text" name="email" size="40“ /></p> <p>Inserisciuna password per ilsito: <input type="password" name="password" size="40“ /></p> All’internodella form inseriamo un campo per ilnome, uno per l’email e uno per la password: Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Areeditesto • Per inserire del testo libero su più righe <textarea name=“nomelogico” cols=“50” [n dicolonne] rows=“6” [n° dirighe] > Testoinizialedi default </textarea> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: area di testo <p>Inserisci un suggerimento per migliorare il sito del Salone del Gusto: <br /> <textareacols="70" rows="7“ name="suggerimento"></textarea> </p> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Comando <input> <input type = “text”{campo di testo} = “password”{spazio per la password} = “radio”{campo radio button} = “checkbox” {crea checkbox} = “submit”{crea il pulsante di INVIO} = “reset” {crea il pulsante CANCELLA } /> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Radio button • Per inserire opzioni mutualmente esclusive <inputtype=“radio” name=“nomelogico” [Un gruppo di pulsanti di scelta devono condividere lo stesso nome affinché forniscano valori di selezione che si escludono a vicenda. Il nome non può contenere spazi o caratteri speciali.] value=“valore di risposta del bottone” [Imposta il valore da inviare al server quando viene selezionato il pulsante di scelta. ] checked=“checked” [bottoneselezionatodi default] /> Testo di default Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: radio button <p> Maschio<input type="radio" name="genere" value="Maschio“ /> Femmina<input type="radio" name="genere" value="Femmina“ /> </p> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Check box • Per inserire opzioni di selezione, anche multiple <inputtype=“checkbox” name=“nomelogico” value=“valore di risposta del bottone” [Imposta il valore da inviare al server quando viene selezionato il pulsante di scelta. ] checked=“checked”[bottoneselezionatodi default] /> Testo di default Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: check box <p>I tuoi interessi: <input name="interessi" type="checkbox" value="auto" /> auto <input name="interessi" type="checkbox" value="informatica" /> informatica <input name="interessi" type="checkbox" value="libri" /> libri <input name="interessi" type="checkbox" value="cucina" /> cucina <input name="interessi" type="checkbox" value="viaggi" /> viaggi </p> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Submit/Reset • Invia: quandocliccatospedisceidatidella form • Cancella: quandocliccatocancellaidati <inputtype=“submit/reset”[submit crea il pulsante di invio, reset quello di cancella] name=“nomelogico del pulsante” value=“scritta che appare sopra il pulsante” /> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: bottone submit e reset <input type="submit" value="Iscrivimi“ /> <input type="reset" value="Cancella“ /> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Menu diselezione • L’ultimapossibilitàèquelladicrearedei menu pop-up a selezionesingola o multipla. • Per definireil menu siusail tag: <select></ select > • Per ogniriga del menu (opzione) siusail tag: <option>testoopzione del menu</option> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Menu diselezione <select name=“nomelogico” size=“numero” [quante opzioni del menu devono essere visualizzate prima che venga aperto. ] multiple=“multiple” [permette la selezione multipla, altrimenti si ha la singola. ] > … </select> Testo di default Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Menu diselezione <optionvalue=“valorerestituito” [valore inviato al server quando viene selezionata la riga] selected=“selected” [riga selezionata di default]> Testoche compare come voce del menu </option> Testo di default Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: menù scelta singola <p>Scegli la tua professione: <selectname="professione"> <optionvalue="studente">Studente</option> <optionvalue="dirigente">Dirigente</option> <optionvalue="operaio">Operaio</option> <optionvalue="indipendente">Lavoratore indipendente</option> </select> </p> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: menù scelta multipla <p>Scegli la tua professione: <selectname="professione“ multiple=“multiple”> <optionvalue="studente">Studente</option> <optionvalue="dirigente">Dirigente</option> <optionvalue="operaio">Operaio</option> <optionvalue="indipendente">Lavoratore indipendente</option> </select> </p> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Label • Per rendere le form piu’ facilmentenavigabili, sipossonoaggiungerealcunielementi. • Ogni campo dovrebbeavere la sua label. Si usail tag label, con un attibuto “for” che lo associa ad un elementodella form • <form> • <label for=“yourName”>Your Name</label> • <input type=“text” name=“yourName” id=“yourName” value=“ ”/> • Nota: name e id sonoentrambiobbligatori! • Con id un elementodella form puòessereabbinato al rispettivo label; • Con name un elementodella form puòessereprocessatodaqualunquelinguaggiodiprogrammazione server-side. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esempio con la label Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6 <p> <labelfor="name">Inserisci il tuo nome:</label> <input type="text" name="nome" id="name" size="40“ /> </p> <p> <labelfor="mail">Inserisci la tua email: </label> <input type="text" name="email" id="mail" size="40“ /> </p> <p> <labelfor="password">Inserisci una password per il sito: </label> <input type="password" name="password" id="password" size="40“ /> </p>
Fieldsets e legends • Si possonoraggrupparecampidella form correlati, per esempioivarielementi del nome (nome, cognome, titolo, etc.) o dell’indirizzo (via, città, CAP, provincia, Paese, etc.) usandoil tag fieldset. • Il tag fieldsetpuòavere come figlioil tag legend, che serve per indicareunalegenda per ilraggruppamento. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esercizio 1: fieldsets e legends <fieldset> <legend>Nome e cognome</legend> <p><label for="name">Inserisciiltuonome:</label> <input type="text" name="nome" id="name" size="40“ /> </p> <p> <label for="cognome">Inserisciiltuocognome:</label> <input type="text" name="cognome" id="name" size="40“ /> </p> </fieldset> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Option groups • Il tag optgroup serve per raggruppare le opzioni in un menù di selezione. Richiede un attributo label, il cui valore è visualizzato dal browser come un’intestazione non selezionabile prima delle opzioni corrispondenti. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6
Esempio: option groups • <p> • <labelfor="paese">Scegli il tuo paese:</label> • <selectname="country” id=“paese”> • <optgrouplabel="Africa"> • <optionvalue="gam">Gambia</option> • <optionvalue="mad">Madagascar</option> • </optgroup> • <optgrouplabel="Europe"> • <optionvalue="fra">France</option> • <optionvalue="rus">Russia</option> • </optgroup> • </select> • </p> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6