Corso IFTS
Informatica, Modulo 3 – Progettazione pagine web statiche
(50 ore)
Il linguaggio HTML - Parte 3
Dott. Chiara Braghin
[email protected]
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
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
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
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
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