Modulo o Form in Html.

Presentazione sul tema: "Modulo o Form in Html."— Transcript della presentazione:

1 Modulo o Form in Html

2 Il Modulo è un contenitore di elementi HTML.
Tali elementi permettono all’utente di creare un’interfaccia GUI per interagire con il sistema. Tramite l’interfaccia l’utente può effettuare scelte, inserire dati, fornire risposte. L’interazione avviene in due fasi: Creazione del form per prendere i dati in input Elaborazione dei dati acquisiti mediante script L’elaborazione può avvenire: direttamente sul client tramite programmi di scripting (Applet e Active Script) al momento della sottomissione del form (tasto di conferma) dove i dati sono trasformati in coppie nome-valore inviati dal client ad un programma presente sul server (PHP, ASP, Applicazioni CGI)

3 I tag del form Il form è definito con i tag <FORM> e </FORM> che non possono essere nidificati. <Form [Action=“URL_dello script”] [Method=“Get|Post”]> Elementi Html </Form> Action specifica un URL che contiene il nome del programma sul server, oppure un indirizzo di Method specifica il metodo utilizzato per trasferire le informazioni al programma sul server.

4 Gli elementi dei moduli
Uno degli elementi maggiormente utilizzati è INPUT <Input Type=“TipoElemento” Name=“NomeElemento” Value=“ValoreIniziale”> L’attributo Type identifica il tipo di elemento che può essere: Campo di testo Campo password Campo nascosto Casella di controllo Casella di scelta alternativa Pulsante Altri elementi sono:

5 Campo di testo E’ un elemento grafico formato da una singola riga nella quale l’utente può inserire valori di tipo stringa. <Input Type=“Text” Name=“NomeCampo” Size=Larghezza Value=“Valore” Maxlength=“Lunghezza” [Disabled|Readonly]>

6 Campo Password Permette di inserire testo che risulta non visibile sullo schermo in quanto mascherato dal carattere *. Non è un campo crittografato. <Input Type=“Password” Name=“utente” Size=“8”>

7 Campo Nascosto Permette di “nascondere” (non essere visibile nel form) il campo. Tali campi sono utilizzati per passare informazioni agli script del documento o agli script del server. <Input Type=“Hidden” Name=“Utente” Value=“Paolo”> Il nome Paolo è passato agli script senza che il campo sia visualizzato.

8 Casella di Controllo Le caselle di controllo, o check box, sono elementi di selezione multipla e vengono utilizzati per consentire la registrazioni di informazioni del tipo “si/no”, “vero/falso” oppure la scelta tra più opzioni disponibili. <Input Type=“Checkbox” Name=“NomeCasella” [Checked]>

9 Casella di Scelta Alternativa
Le caselle di scelta alternativa, o radio box o radio button, sono simili alle caselle di controllo, ma consentono la selezione esclusiva di una sola casella all’interno di un gruppo. <Input Type=“Radio” Name=“NomeCasella” [Checked]> E’ necessario che NomeCasella sia uguale per tutti i radio box. L’attributo Checked forza la selezione della casella al valore true. Se più caselle di un gruppo vengono impostate a checked, verrà selezionata solo quella relativa all’ultimo checked.

10 I Pulsanti Il tipo pulsante o button consente di creare un pulsante caratterizzato da un nome e una eventuale etichetta che viene visualizzata su di esso. <Input Type=“Button|Submit|Image|Reset” Name=“Nome” Value=“Etichetta”> I Pulsanti hanno senso se associati a programmi di script. Se, ad esempio, diamo il valore Submit, quando il pulsante viene premuto, invia il contenuto di tutti gli elementi del form al server. Il tipo Image è simile a Submit ma utilizza un’immagine grafica. Il tipo Reset riporta i valori di tutti i campi al loro valore iniziale.

11 Altri elementi Altri elementi Html presenti nel form sono:
Campo area di testo Casella di selezione E adesso prova tu:

12 Campo area di testo L’area di testo è un particolare campo di testo che utilizza più righe, consentendo di immettere più informazioni. <Textarea Name=“NomeArea” Rows=“NumeroRighe” Cols=“NumeroColonne”> Contenuto di default </Textarea>

13 Casella di selezione La casella di selezione ha la forma di un elenco a discesa o di un menù di voci (menù pop-down) <Select Name=“NomeSelect” Size=“NumeroRighe” [Multiple]> <Option Value=“Nome1” [Selected]> Stringa1 </Option> <Option Value=“Nome2” [Selected]> Stringa2 </Option> <Option Value=“NomeN” [Selected]> StringaN </Option> </Select> Size assegna il numero di righe della lista da visualizzare. Multiple identifica il caso di lista con scelta multipla possibile. Option definisce i singoli elementi della lista. Selected identifica il valore di dafult da presentare in visualizzazione nella casella </Option> è raccomandato ma non necessario.

14 Esercizio Crea un modulo Html per la prenotazione di un prodotto da un negozio on-line di componenti per computer. Nel modulo deve essere specificato: Nome e cognome dell’acquirente Indirizzo e numero di telefono Prodotto scelto Modalità di pagamento