Pagina dinamica E un documento contenente oggetti, dati e informazioni che possono variare anche in base all iterazione dell utente con il documento stesso. Un esempio classico è quello di una persona che richiede su Internet informazioni su un prodotto inserendo i parametri di ricerca in una pagina web definita a tale scopo; i dati vengono inviati al server web che interroga il database aziendale e costruisce la pagina HTML di risposta da reinviare al browser dell utente. Con l uso dei moduli in linea si instaura un feedback tra l utente che riceve le pagine richieste e il server che le invia.
Form HTML Sono moduli che possono essere compilati dall utente, utilizzabili per questionari, prenotazioni, ordinazioni, immissioni dati, etc Il modulo di immissione dati viene inserito in un documento hmtl, l utente lo compila e lo invia (con un operazione detta submit ad un server per la successiva elaborazione effettuata con un linguaggio appositamente studiato per la programmazione lato server (server side). I principali sono: Script server side: PHP e ASP Applicazioni CGI (Common Gateway Interface): Java Applet e Active Script: programmi client side, eseguiti sulla macchina in cui risiede il browser.
Modulo o Form in Html
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)
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 e-mail Method specifica il metodo utilizzato per trasferire le informazioni al programma sul server.
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: 1. Campo di testo 2. Campo password 3. Campo nascosto 4. Casella di controllo 5. Casella di scelta alternativa 6. Pulsante Altri elementi sono:
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]>
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 >
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.
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]>
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.
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.
Altri elementi Altri elementi Html presenti nel form sono: 1. Campo area di testo 2. Casella di selezione E adesso prova tu:
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>
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.
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