Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 3 Dott. Chiara Braghin braghin@dti.unimi.it Addenda Vedi tabella caratteri speciali Vedi file caratteri_speciali.html Come indicare il path del file contenente l immagine. Vedi file lezione_img.html C. Braghin - HTML, Part 3 2 1
L elemento <FORM> L'elemento <FORM> permette di creare un modulo (form in inglese) riempibile da chi consulta il documento stesso L'utente che legge il documento HTML vedrà la maschera come un insieme di campi di inserimento dati: potrà scrivere informazioni all'interno di alcuni campi selezionare bottoni e menu pop-up Quando l'utente spedirà la maschera selezionando il pulsante di sottomissione i dati saranno codificati e spediti al server, dove andranno gestiti da un qualche programma3 C. Braghin - HTML, Part 3 3 L elemento <FORM> (2) - Sintassi <FORM> tag principale l attributo ACTION specifica l'url al quale vanno spediti i dati o l azione che viene eseguita l attributo METHOD specifica il tipo di metodo HTTP usato per spedire i dati: il metodo GET fa si che i dati vengono aggiunti all'url come una stringa di query il metodo POST spedisce i dati come in un corpo di documento HTML, cioe' nello stesso modo in cui il browser riceve i dati di un documento HTML, ma nella direzione opposta. I dati ricevuti tramite FORM sono spediti al servere lì utilizzati. C. Braghin - HTML, Part 3 4 2
L elemento <FORM> (3) - Tag All interno del tag <FORM> vanno inseriti altri tag per permettere all utente di inserire i dati <INPUT> Genera bottoni tipo radio, menu a cascata, campi di inserimento a linea singola e pulsanti, a seconda del valore dell attributo TYPE: SUBMIT: crea il pulsante submit che, quando cliccato, spedisce i dati inseriti nel form all indirizzo specificato nell attributo ACTION RESET: crea il pulsante reset che, quando cliccato, cancella i dati inseriti nel form TEXT: input di testo RADIO: crea radio box CHECK: crea check box PASSWORD: spazio per la password HIDDEN: campo nascosto BUTTON: pulsante generico C. Braghin - HTML, Part 3 5 L elemento <FORM> (3) - Tag <TEXTAREA> Crea una zona per l inserimento libero di testo NAME, ROWS, COLS sono attributi che definiscono, rispettivamente, il nome usato nella spedizione, il numero di righe e il numero di colonne del riquadro creato <SELECT> Crea delle liste selezionabili NAME è l attributo che definisce il nome usato nella spedizione <OPTION> serve per definire ciascun elemento della lista (e annidato all interno di <SELECT> ha come attibuti VALUE, che inserisce il valore nella lista, e SELECTED che stabilisce il valore assegnato di default il tag di chiusura è opzionale Potete anche usare le tabelle <TABLE> per aggiustare il layout della vostra maschera Esempio12: form.html C. Braghin - HTML, Part 3 6 3
L elemento <FORM> (4) - Esempio NB: il tag <SELECT> ha anche un attributo SIZE che permette di specificare quanti elementi del menu devono essere visibili. Se non si specifica nulla, c è un solo elemento visibile. C. Braghin - HTML, Part 3 7 Esercizi 1) Progettare un form (utilizzando una tabella per migliorare il layout) per la prenotazione di un volo aereo per una compagnia aerea che vola solo nelle tratte: Roma-MI, Roma-VE. Alcune informazioni che devono essere contenute: Volo di sola andata Volo andata e ritorno Località di partenza e destinazione Date dei voli C. Braghin - HTML, Part 3 8 4
Esercizi (6) 7) Preparate un file HTML contenente dei campi di testo, dei pulsanti di tipo radio o check box, un'area per contenere un commento da parte dell'utente. Ad esempio, potete inserire: un campo per il nome dell'utente un campo per il cognome dell'utente un campo per l'indirizzo di posta elettronica... un'area per richiedere dei suggerimenti/commenti sul vostro sito ovviamente non dovrà mancare il pulsante per l'invio del modulo C. Braghin - HTML, Part 3 9 Esercizi (7) 8) Scrivete il codice HTML per la compilazione di un questionario on line pensate ad alcune domande che ammettono risposta singola e create dei radio button con le risposte se avete domande a risposta multipla, ricordate di usare i pulsanti di tipo check-box C. Braghin - HTML, Part 3 10 5