1 / 33

Laboratorio di XHTML e CSS

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).

trey
Download Presentation

Laboratorio di XHTML e CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Laboratoriodi XHTML e CSS Lezione 6: Form

  2. 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

  3. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 6

  4. 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

  5. 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

  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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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>

  30. 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

  31. 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

  32. 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

  33. 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

More Related