Modulo o Form in Html

Размер: px

Начинать показ со страницы:

Download "Modulo o Form in Html"

Fabia Ferrari
8 anni fa
Просмотров:

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

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

3 Modulo o Form in Html

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

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

6 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:

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

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

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

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

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

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

13 Altri elementi Altri elementi Html presenti nel form sono: 1. Campo area di testo 2. Casella di selezione E adesso prova tu:

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

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

16 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

Похожие документы

D B M G Il linguaggio HTML

D B M G Il linguaggio HTML Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti