Laboratorio di Tecnologie Web HTML: Form Dott. Stefano Burigat

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Laboratorio di Tecnologie Web HTML: Form Dott. Stefano Burigat"

Transcript

1 Laboratorio di Tecnologie Web HTML: Form Dott. Stefano Burigat

2 Il ruolo dei form I form sono al giorno d'oggi un componente essenziale per l'interazione degli utenti con i siti web, essendo alla base di azioni come gli acquisti online, le prenotazioni, le ricerche, i post sui blog o i social network, le richieste di assistenza, etc. In risposta a questa sempre maggiore interattività dei siti web, HTML5 ha introdotto nuovi elementi ed attributi che rendono più facile l'utilizzo dei form per gli utenti e la loro creazione per gli sviluppatori, rendendo effettuabili tramite codice html alcuni compiti che in precedenza potevano essere gestibili solo via JavaScript. Le novità introdotte non sono attualmente supportate in modo completo dai browser ma sono comunque retrocompatibili. L'utilizzo dei form prevede l'interazione tra due componenti, un componente client HTML costituito dai diversi controlli (pulsanti, campi per l'input, menu, etc.) utilizzati per raccogliere le informazioni dagli utenti ed un componente server costituito da un'applicazione o script che elabora l'informazione acquisita dal form e ritorna una opportuna risposta. L'elemento <form> I form vengono aggiunti alle pagine web mediante l'utilizzo dell'elemento <form>, che racchiude tutti i controlli del form oltre a poter includere altri elementi di tipo blocco (ad esempio titoli, paragrafi, liste, etc.). Gli elementi <form> non possono essere innestati.

3 <title>iscrizione alla mailing list</title> <h1>iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="post"> Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti. Nome: <input type="text" name="username" /> <input type="text" name=" " /> <input type="submit" value="iscriviti" /> Gli attributi action e method dell'elemento <form> sono necessari per l'interazione con il componente server. L'attributo action viene utilizzato per specificare l'url dell'applicazione o script che verrà utilizzato lato server per elaborare i dati inseriti dall'utente (nell'esempio sopra, verrà chiamato lo script mailinglist.php contenuto nella directory script). A volte, il codice per l'elaborazione dei dati viene inserito direttamente all'interno del file html. In tal caso, il

4 valore dell'attributo action deve essere lasciato vuoto. L'attributo method specifica come l'informazione deve essere inviata al server. Consideriamo ad esempio di inserire Pinco Pallino nel campo Nome e nel campo dell'esempio precedente. Tale informazione viene codificata automaticamente dal browser nel modo seguente username=pinco%20pallino& =pinco.pallino%40example.com (in cui i caratteri non ammessi sono stati trasformati nel loro equivalente esadecimale) e inviata al server in due possibili modi, POST o GET, che vengono inseriti come valore dell'attributo method. Se tale attributo non è presente, il valore utilizzato di default è GET. Quando il metodo utilizzato è POST, il browser invia al server una richiesta separata che contiene un'intestazione speciale seguita dai dati. Solo il server può vedere il contenuto di tale richiesta ed il metodo POST è quindi preferibile quando si voglia inviare informazioni riservate come numeri di carta di credito o altri dati personali. Tale metodo è preferibile anche quando si deve inviare una grande quantità di dati. Quando il metodo utilizzato per l'invio dei dati è GET, i dati vengono aggiunti direttamente in fondo all'url definito tramite l'attributo action, separati dal simbolo? (punto di domanda). Tale metodo è appropriato se si vuole che l'utente possa salvare un segnalibro della pagina chiamata (che può ad esempio rappresentare i risultati di un'interrogazione ad un motore di ricerca). D'altra parte, le informazioni inviate sono visibili direttamente.

5 All'interno dell'elemento <form> vengono inseriti i controlli che permettono l'interazione con l'utente come campi di testo, pulsanti, menu, etc. Nell'esempio precedente sono presenti due campi di testo ed un pulsante che provoca l'invio dei dati al server. L'attributo name di un controllo definisce il nome della variabile alla quale sarà associato il contenuto inserito dall'utente tramite quel controllo (notate che il controllo di tipo pulsante nell'esempio precedente non ha bisogno di un nome in quanto la sua funzione non è raccogliere dati). L'applicazione o script che elaborerà i dati utilizzerà tali nomi per estrarre e manipolare i valori inseriti. Per questo motivo, ogni variabile deve avere un nome univoco. Controlli per i form In HTML5 ci sono 23 tipi diversi di controlli inseribili in un form. La maggior parte di questi controlli viene specificata utilizzando l'elemento <input>, il cui aspetto e la cui funzionalità variano in base al valore dell'attributo type. Controlli per l'inserimento di testo Uno dei task più comuni in un form è inserire informazione testuale. A tale scopo, si possono utilizzare l'elemento vuoto <input> o l'elemento contenitore <textarea> a seconda che si voglia permettere l'inserimento di una o più di una riga di testo, rispettivamente. Nel primo caso, si utilizza l'elemento <input> con attributo type impostato a text. Tale valore è il default per quanto riguarda l'elemento <input> e viene quindi utilizzato anche

6 quando non si specifica l'attributo type o quando il valore dell'attributo type non è riconosciuto dal browser. Oltre agli attributi type e name, altri attributi comuni per questo controllo sono value che specifica del testo da far comparire nel campo di input al caricamento del form o quando il form viene resettato, maxlength che specifica il numero massimo di caratteri che l'utente può inserire nel campo di testo (di default, il numero di caratteri è illimitato) e size che specifica la dimensione del controllo in caratteri. L'elemento <textarea> permette di inserire un campo multilinea scrollabile in cui gli utenti possono scrivere del testo. Al contrario di <input>, <textarea> consente di aggiungere del contenuto tra i tag di apertura e chiusura. Tale contenuto verrà visualizzato nel campo di testo al caricamento del form ma verrà anche inviato al server assieme ai dati inseriti dall'utente. Per questo motivo, è comune non inserire nulla come contenuto dell'elemento ed utilizzare gli attributi title o placeholder per dare suggerimenti all'utente su come usare il campo di testo. L'attributo placeholder è stato introdotto in HTML5 e può essere usato in tutti i controlli per l'inserimento di testo. Oltre a maxlength, visto sopra per l'elemento <input>, <textarea> supporta gli attributi <rows> e <cols> per specificare le dimensioni dell'area di testo in righe e colonne (numero di caratteri). E' comunque preferibile usare CSS per specificare tali parametri. Infine, è possibile usare l'attributo wrap per specificare se si devono escludere (valore soft) o includere (valore hard) dai dati inviati al server le interruzioni di riga inserite automaticamente quando viene raggiunto il valore

7 dell'attributo cols (che deve essere specificato) durante la digitazione. <title>titolo</title> <h1>lascia un commento</h1> <form action="script/mailinglist.php" method="get"> Usa questo form per darci un'opinione sui nostri prodotti. Nome: <br/> <input type="text" name="username" /> Commento: <br /> <textarea name="commento" placeholder="max 10 caratteri" maxlength="15" wrap="hard" cols="5"></textarea> <input type="submit" value="iscriviti" /> In aggiunta ai due controlli generici per l'inserimento di testo che abbiamo appena visto, esistono controlli specifici per informazioni come le password, gli indirizzi ed altro. Per creare tali controlli, si utilizzano appositi valori dell'attributo type dell'elemento <input> (e si possono

8 utilizzare gli stessi attributi utilizzati per il controllo generico di tipo text). Se type ha valore password, i caratteri inseriti dall'utente vengono oscurati (di solito tramite un asterisco o un pallino). E' importante tenere presente che anche se i caratteri non sono visibili, l'informazione inserita non è criptata. <title>titolo</title> <h1>login</h1> <form action="script/login.php" method="post"> Inserisci username e password per effettuare il login. Username: <input type="text" name="username" /> Password: <input type="password" name="pwd" maxlength="8" /> <input type="submit" value="accedi" /> Impostando l'attributo type dell'elemento <input> ai valori search, , tel o url otteniamo rispettivamente dei

9 controlli per l'inserimento di un campo di ricerca, di indirizzi , di numeri telefonici e di URL. I browser possono sfruttare questa informazione per gestire al meglio l'input, ad esempio mostrando un tastierino adattato al tipo di dati da immettere (su dispositivi mobili) o effettuando automaticamente dei controlli sulla correttezza dei dati inseriti (ad esempio, per la sintassi degli indirizzi ). Se il tipo non è riconosciuto dal browser, i dati inseriti vengono considerati testo generico. <title>titolo</title> <h1>input types</h1> <form action="script/form.php" method="get"> <br/> <input type=" " name=" " /> Search: <br/> <input type="search" name="search" /> Telephone: <br/> <input type="tel" name="phone" /> URL: <br/> <input type="url" name="url" />

10 <input type="submit" value="accedi" /> Pulsanti Diversi tipi di pulsanti possono essere inseriti nei form html. Il più comune è il pulsante submit che, quando premuto, viene utilizzato per l'invio al server dei dati inseriti nel form. Un altro pulsante utilizzato spesso è il pulsante di reset che serve a ripristinare lo stato iniziale dei controlli presenti in un form (il che non significa solo pulire i singoli campi). Entrambi i pulsanti menzionati vengono aggiunti tramite l'utilizzo dell'elemento <input> con attributo type impostato ai valori submit o reset. L'attributo name non è necessario (anche se si può impostare) in quanto la funzione del pulsante non è l'inserimento dati. L'attributo value può essere utilizzato per impostare il testo visualizzato sul pulsante (in generale, value specifica il valore iniziale di un controllo). <title>titolo</title>

11 <h1>login</h1> <form action="script/login.php" method="post"> Inserisci e password per effettuare il login. <br/> <input type=" " name=" " /> Password: <br/> <input type="password" name="pwd" maxlength="8" /> <input type="submit" value="accedi" /> <input type="reset" /> L'elemento <input> con attributo type impostato a image permette di creare un pulsante submit con un'immagine. L'immagine da utilizzare viene specificata tramite attributo url (con la solita sintassi) mentre è opportuno utilizzare l'attributo alt per migliorare l'accessibilità. Se si vuole avere maggiore flessibilità nella creazione di un pulsante si possono utilizzare l'elemento <input> con attributo type impostato a button oppure l'elemento contenitore <button>. Nel primo caso, il comportamento del pulsante deve essere specificato tramite JavaScript. Nel secondo caso, ciò che viene visualizzato sul pulsante viene inserito come contenuto dell'elemento (ad esempio, testo

12 e/o immagini) e l'attributo type può assumere i valori submit, reset, button o menu (che permette di ottenere lo stesso comportamento del rispettivo elemento <input> con lo stesso tipo). <title>titolo</title> <h1>login</h1> <form action="script/login.php" method="get"> Inserisci e password per effettuare il login. <br/> <input type=" " name=" "> Password: <br/> <input type="password" name="pwd" maxlength="8"> <input type="image" src="imgs/submit.png" alt="pulsante accedi" width="94" height="30"> <br/> <button type="reset">reset <img src="imgs/reset.png" alt="" width="25" height="20"/></button> I pulsanti di tipo checkbox e di tipo radio supportano la creazione di gruppi di opzioni e la selezione di elementi

13 all'interno di un gruppo. In un gruppo presentato tramite checkbox, l'utente può selezionare una o più opzioni tra quelle elencate mentre in un gruppo presentato tramite radio button può essere selezionata una sola opzione. Le chechbox vengono inserite in un form tramite utilizzo dell'elemento <input> con attributo type impostato a checkbox. Per creare un gruppo di checkbox, si specifica lo stesso valore dell'attributo name per ogni checkbox del gruppo (è comunque possibile creare singole checkbox come nel caso delle informative sulla privacy). L'attributo value viene utilizzato per specificare il valore che verrà inviato al server se la rispettiva checkbox risulta selezionata. Infine, se si vuole che una checkbox risulti già selezionata al caricamento del form, si utilizza l'attributo checked (essendo un attributo binario, in HTML5 è sufficiente specificare il nome dell'attributo senza valore). I radio button vengono inseriti in un form tramite utilizzo dell'elemento <input> con attributo type impostato a radio. La loro configurazione avviene utilizzando gli stessi attributi descritti sopra per le checkbox (l'unica differenza è che un solo elemento di un gruppo può essere nello stato selezionato). <title>iscrizione alla mailing list</title> <h1>iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get"> Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti.

14 /> Nome: <br/> <input type="text" name="username" <br/> <input type=" " name=" " /> Età: <br/> <ul> <li><input type="radio" name="age" value="under24" />Meno di 24</li> <li><input type="radio" name="age" value="25-44" />Tra 25 e 44</li> <li><input type="radio" name="age" value="over 45" />Oltre 45</li> </ul> Argomenti d'interesse: <br/> <ul> <li><input type="checkbox" name="topic" value="tecnologia" checked />Tecnologia</li> <li><input type="checkbox" name="topic" value="motori" />Motori</li> <li><input type="checkbox" name="topic" value="viaggi" />Viaggi</li> </ul> <input type="submit" value="iscriviti" />

15 Menu Un altro modo per permettere la selezione di opzioni ottimizzando lo spazio occupato è quello di utilizzare menu di tipo drop-down o scrollabili. Entrambi i tipi di menu vengono inseriti in un form utilizzando l'elemento contenitore <select>. Di default, l'elemento <select> crea un menu di tipo drop-down. All'interno dell'elemento <select> vengono inseriti tanti elementi contenitore di tipo <option> quante sono le voci di menu. Il contenuto dell'elemento <option> è ciò che viene visualizzato all'utente ed inviato al server se quella voce di menu viene selezionata (il valore inviato al server può essere modificato utilizzando l'attributo value di <option>). L'attributo binario selected può essere specificato all'interno di un elemento <option> per indicare che quell'elemento è l'elemento di default del menu. Se viene specificato l'attributo size dell'elemento <select> con un valore maggiore di 1, allora il menu che viene visualizzato è di tipo scrollabile. Il numero di voci di menu visibili è pari al valore di size (i browser, di default, potrebbero comunque visualizzare un numero di voci superiore) e l'attributo binario multiple può essere specificato per indicare che l'utente può selezionare più di una voce. E' anche possibile utilizzare l'elemento <optgroup> per suddividere le voci di menu in sottogruppi. L'attributo obbligatorio label di <optgroup> viene utilizzato per dare un nome al sottogruppo.

16 <title>iscrizione alla mailing list</title> <h1>iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get"> Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti. Nome: <br/> <input type="text" name="username" /> <br/> <input type=" " name=" " /> Età: <br/> <select name="age"> <option>meno di 24</option> <option selected>tra 25 e 44</option> <option>oltre 45</option> </select> Argomenti d'interesse: <br/> <select name="topic" size="3" multiple> <optgroup label="gruppo1"> <option value="tech" selected >Tecnologia</option> <option>motori</option> </optgroup> <optgroup label="gruppo2"> <option selected>viaggi</option> <option>cucina</option> <option>sport</option> </optgroup> </select>

17 <input type="submit" value="iscriviti" /> Il nuovo elemento <datalist> di HTML5 premette di creare menu di tipo drop-down di valori suggeriti per qualunque elemento per l'inserimento di testo. Al contrario dei menu visti in precedenza, l'utente mantiene comunque la possibilità di inserire valori non presenti nella lista. All'interno di <datalist> vengono inseriti elementi <option> per i diversi suggerimenti. Inoltre, è necessario specificare l'attributo id dell'elemento <datalist> e inserire tale identificatore come valore dell'attributo <list> dell'elemento <input> a cui saranno associati i suggerimenti. <title>titolo</title> <h1>datalist</h1> <form action="script/list.php" method="post"> Titolo di studio: <input type="text" list="titolostudio" name="educazione"> <datalist id="titolostudio"> <option value="laurea" /> <option value="laurea Magistrale" /> <option value="phd" /> </datalist>

18 Selezione di file Oltre a permettere la compilazione di campi, i form possono essere utilizzati per la sottomissione di file tramite l'utilizzo di un apposito controllo definito tramite l'elemento <input> con attributo type impostato a file. Il controllo effettivamente visualizzato varia drasticamente da browser a browser. Se un form contiene un elemento per la selezione di file, è necessario specificare l'attributo enctype dell'elemento <form> al valore multipart/form-data e l'attributo method al valore POST. L'attributo multiple può essere usato per consentire la sottomissione di più di un file contemporaneamente. <title>titolo</title> <h1>iscrizione alla conferenza</h1> <form action="script/signup.php" method="post" enctype="multipart/form-data"> Compila i campi sottostanti per iscriverti alla conferenza. Nome: <br/> <input type="text" name="username" /> <br/> <input type=" " name=" " />

19 Curriculum: <br/> <input type="file" name="curriculum" /> <input type="submit" value="iscriviti" /> Controlli nascosti Quando è necessario inviare al server che elabora il form delle informazioni che non provengono dall'utente, si possono utilizzare dei controlli nascosti non visibili sul form. I controlli nascosti vengono aggiunti tramite l'elemento <input> con attributo type impostato a hidden. Tipicamente, gli attributi name e value vengono utilizzati per specificare i dati da inviare. <title>iscrizione alla mailing list</title> <h1>iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get"> Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti. Nome: <br/> <input type="text" name="username" />

20 <br/> <input type=" " name=" " /> <input type="hidden" name="returnpage" value="thankyou.html"/> <input type="submit" value="iscriviti" /> Data e ora Per consentire agli utenti di specificare orari e date all'interno di un form, HTML5 mette a disposizione l'elemento <input> con attributo type impostato a date, time, datetime, datetime-local, month o week. I browser che non supportano tali valori, interpreteranno questi controlli come controlli per l'inserimento di testo semplice. L'attributo value può essere utilizzato per specificare la data o orario da visualizzare inizialmente (in formato ISO come descritto in precedenza per l'attributo datetime dell'elemento <time>). <title>titolo</title> <h1>lista dei controlli per l'inserimento di data e

21 ora</h1> <form action="script/dataora.php" method="post"> <ul> <li>data: <br/> <input type="date" name="date" value=" "/></li> <li>ora: <br/> <input type="time" name="time" value="09:13:00"/></li> <li>data e ora: <br/> <input type="datetime" name="datetime" value=" t03:13:00-5:00"/></li> <li>data e ora (senza fuso): <br/> <input type="datetime-local" name="datetimelocal" value=" t03:13:00"/></li> <li>mese: <br/> <input type="month" name="month" value=" "/></li> <li>settimana: <br/> <input type="week" name="week" value="2014- W2"/></li> </ul> Input numerici HTML5 ha introdotto due nuovi elementi da utilizzare nei form, <number> e <range>, che permettono agli utenti di specificare un valore numerico. I due elementi variano per il modo in cui vengono visualizzati all'utente, con il secondo normalmente mostrato come uno slider. Gli attributi min e max possono essere usati per definire l'intervallo di valori ammessi mentre l'attributo step può essere utilizzato per specificare l'incremento tra un valore ed il successivo (di default, vale 1 ma può essere impostato a al valore any per permettere l'inserimento di qualsiasi incremento).

22 <title>titolo</title> <h1>inserimento di valori numerici</h1> <form action="script/dataora.php" method="post"> <ul> <li>number: <br/> <input type="number" name="number" min="1" max="6" step="0.5"></li> <li>range (da 0 a 10): <br/> <input type="range" name="range" min="0" max="10"></li> </ul> Attributi utili dell'elemento <input> Oltre agli attributi type, name, value e altri più specifici che abbiamo già visto, l'elemento <input> supporta altri attributi che possono risultare utili in alcuni casi. Se si vuole mantenere un controllo visibile ma impedire all'utente di modificarne il contenuto, è possibile utilizzare gli attributi disabled e readonly. Il primo impedisce la selezione del controllo, che di solito viene visualizzato con uno sfondo grigio. Il valore contenuto in un campo disabled non viene inviato al server. L'attributo readonly ha un effetto simile a disabled, impedendo la modifica del campo da parte dell'utente, ma il valore del campo viene inviato al server. Attraverso script JavaScript è possibile

23 modificare lo stato ed il contenuto di tali controlli. L'attributo form consente di specificare l'identificatore del form al quale il controllo è associato. Con questo attributo non è necessario che un controllo sia inserito all'interno del form di cui fa logicamente parte. L'attributo required viene utilizzato per indicare che la compilazione di quel campo è obbligatoria. Se l'utente non compila il campo prima dell'invio del form, il browser può visualizzare un apposito messaggio di avviso. <title>titolo</title> <h1>attributi di input</h1> <form action="script/attr.php" method="get"> <ul> <li>disabled: <br/> <input type="text" name="disabled" value="non modificabile" disabled/></li> <li>readonly: <br/> <input type="text" name="readonly" value="sola lettura" readonly/></li> <li>required: <br/> <input type="text" name="required" required/></li> </ul> <input type="submit" value="invia" />

24 Altri controlli HTML5 per i form L'elemento <input> con attributo type impostato a color permette di far comparire un controllo per la selezione di un colore. L'elemento <progress> viene utilizzato per dare del feedback all'utente sul completamento di un'operazione come lo scaricamento di un file. Il livello di completamento viene specificato tramite l'attributo value (o nel corpo dell'elemento ma ciò non sembra essere supportato dai browser) e di solito viene modificato via JavaScript. Si può utilizzare l'attributo max per specificare il valore finale. Se value non è presente, viene presentata un'indicazione continua di operazione in corso. L'elemento <meter> è simile a <progress> ma viene utilizzato per mostrare il livello di un qualche parametro o misurazione all'interno di uno specifico intervallo di valori. L'intervallo viene specificato utilizzando gli attributi min e max. E' anche possibile indicare delle soglie di sicurezza minime e massime con gli attributi low e high. Il livello corrente viene specificato tramite l'attributo value ed il browser segnala se questo supera le soglie di sicurezza (di solito utilizzando il colore). <title>titolo</title> <h1>altri elementi HTML5</h1> <form action="script/other.php" method="post"> <ul> <li>color: <br/>

25 <input type="color" name="colore"></li> <li>progress: <br/> <progress name="feedback" value="50" max="100"></progress></li> <li>meter: <br/> <meter name="meter" min="0" max="100" low="25" high="75" value="50"></meter></li> </ul> L'elemento <output>, già incontrato e descritto in precedenza, fornisce un modo per marcare il risultato di uno script o applicazione. L'elemento <keygen> viene utilizzato per la generazione di chiavi che vengono utilizzate nella gestione di certificati web. Accessibilità dei form Per rendere i form più accessibili dal punto di vista della comprensibilità e della navigazione, è possibile utilizzare gli elementi <label>, <fieldset> e <legend>. Nonostante di solito i campi in un form vengano visualizzati assieme ad una qualche etichetta che ne identifica lo scopo, i due oggetti hanno solo una relazione visiva che si perde ad esempio se il form viene letto tramite screen reader. L'elemento <label> può essere utilizzato per associare esplicitamente del testo descrittivo ad uno specifico campo. Ogni elemento <label> è associato esattamente ad un controllo in un form e può essere utilizzato in due modi. Il primo metodo, detto associazione

26 implicita, consiste nel racchiudere il controllo che si vuole descrivere all'interno dell'elemento <label>. Il secondo metodo, l'associazione esplicita, permette di associare una label all'identificatore di un controllo mediante l'utilizzo dell'attributo for. Il vantaggio dell'associazione esplicita è che l'elemento <label> e il controllo a cui si riferisce restano distinti e possono essere meglio controllati a livello di stile. L'esempio seguente mostra entrambi i metodi. <title>iscrizione alla mailing list</title> <h1>iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get" id="form-mailinglist"> Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti. <label for="form-mailinglistusername">nome:</label> <br/> <input type="text" name="username" id="formmailinglist-username" /> <label for="form-mailinglist "> </label> <br/> <input type=" " name=" " id="formmailinglist- " /> Argomenti d'interesse: <br/> <ul> <li><label><input type="checkbox"

27 name="topic" value="tecnologia" checked />Tecnologia</label></li> <li><label><input type="checkbox" name="topic" value="motori" />Motori</label></li> <li><label><input type="checkbox" name="topic" value="viaggi" />Viaggi</label></li> </ul> <input type="submit" value="iscriviti" /> Notate che gli id utilizzati sono strutturati in modo tale da semplificare il riconoscimento del form di cui fanno parte (questo è utile per migliorare l'organizzazione dei form e distinguere i controlli dei form da altri id utilizzati nella pagina). Un ultimo vantaggio nell'utilizzo dell'elemento <label> è che il testo contenuto al suo interno può essere cliccato per selezionare il corrispondente controllo il che risulta utile soprattutto nel caso di checkbox e radiobutton (ma ios non sembra compatibile con tale comportamento). L'elemento <fieldset> può essere utilizzato per raggruppare logicamente i controlli di un form. All'interno di tale elemento può anche essere inserito un elemento <legend> che rappresenta una didascalia per il gruppo. <title>iscrizione alla mailing list</title>

28 <h1>iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get" id="form-mailinglist"> Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti. <fieldset> <legend>informazioni obbigatorie</legend> <label for="form-mailinglistusername">nome:</label> <br/> <input type="text" name="username" id="form-mailinglist-username" required /> <label for="form-mailinglist "> </label> <br/> <input type=" " name=" " id="formmailinglist- " required /> </fieldset> <fieldset> <legend>informazioni opzionali</legend> Argomenti d'interesse: <br/> <ul> <li><label><input type="checkbox" name="topic" value="tecnologia" checked />Tecnologia</label></li> <li><label><input type="checkbox" name="topic" value="motori" />Motori</label></li> <li><label><input type="checkbox" name="topic" value="viaggi" />Viaggi</label></li> </ul> </fieldset> <input type="submit" value="iscriviti" />

29

04/05/2011. Lezione 6: Form

04/05/2011. Lezione 6: Form Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi

Dettagli

Il linguaggio HTML - Parte 3

Il linguaggio HTML - Parte 3 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

Dettagli

Lezione 6: Form 27/04/2012

Lezione 6: Form 27/04/2012 Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi

Dettagli

DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE

DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE MODULI O FORM DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE ADATTE ALLA LETTURA MA POSSONO SVOLGERE UN RUOLO ATTIVO NEI CONFRONTI DI UNA PAGINA WEB

Dettagli

Strumenti a disposizione

Strumenti a disposizione FORM Strumenti a disposizione L'HTML visto fino ad ora permette di descrivere solo documenti statici e passivi Colori, immagini, testi, etc... L'utente può solo interagire con i link Non sempre questo

Dettagli

Sicurezza Protezioni in una pagina Web

Sicurezza Protezioni in una pagina Web Pagina 1 di 7 Sicurezza Protezioni in una pagina Web HTML è un linguaggio che consente di presentare informazioni in pagine di formato predefinito e accattivante. Quando non si hanno a disposizione informazioni

Dettagli

Laboratorio Progettazione Web PHP e FORMs HTML. Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2013/2014

Laboratorio Progettazione Web PHP e FORMs HTML. Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2013/2014 Laboratorio Progettazione Web PHP e FORMs HTML Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2013/2014 Struttura Applicazioni Web Browser Web HTTP Server Web API Dati Presentation Application Storage

Dettagli

ESEMPI DI FORM (da www.html.it)

ESEMPI DI FORM (da www.html.it) ESEMPI DI FORM (da www.html.it) Vediamo, nel particolare, tutti i tag che HTML 4.0 prevede per la creazione di form. Questo tag apre e chiude il modulo e raccoglie il contenuto dello stesso,

Dettagli

Lezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente!

Lezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente! Lezione nr. 5 >> Come creare un modulo Web I moduli web sono delle strutture fondamentali per ogni sito web e la loro conoscenza ti permetterà di risolvere almeno il 60% delle problematiche di gestione

Dettagli

Metodologie Informatiche Applicate al Turismo

Metodologie Informatiche Applicate al Turismo Metodologie Informatiche Applicate al Turismo 9. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze

Dettagli

Interazione con l utente : i moduli.

Interazione con l utente : i moduli. Interazione con l utente : i moduli. Nelle lezioni fin qui riportate, non abbiamo mai trattato l input di utente. Nelle applicazioni web, l input dell utente si acquisisce tramite i moduli (o FORM) HTML.

Dettagli

Dott.ssa Adriana Pietramala

Dott.ssa Adriana Pietramala Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Adriana Pietramala a.pietramala@mat.unical.it Riferimenti Sito del corso: Manuale PHP http://www.php.net/download-docs.php Editor di

Dettagli

I FORM. L'attributo action contiene l'url del file php a cui devono essere inviati i file per essere elaborati.

I FORM. L'attributo action contiene l'url del file php a cui devono essere inviati i file per essere elaborati. I FORM Che cosa sono e che caratteristiche hanno Un form contiene molti oggetti che permettono di inserire dati usando la tastiera. Tali dati verranno poi inviati alla pagina php che avrà il compito di

Dettagli

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: ...

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>... HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento

Dettagli

MODULO 1 PARTE 3. Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link)

MODULO 1 PARTE 3. Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link) MODULO 1 PARTE 3 Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link) Goy - a.a. 2009/2010 Programmazione Web 1 Gli oggetti HTTP request e HTTP response -I Vi ricordate?

Dettagli

1) Il client(browser utilizzato) invia al server i dati inseriti dall utente. Server

1) Il client(browser utilizzato) invia al server i dati inseriti dall utente. Server 2) Il Server richiama l'interprete PHP il quale esegue i comandi contenuti nel file.php specificato nell'attributo action del tag form creando un file HTML sulla base dei dati inviati dall utente 1) Il

Dettagli

HTML5 and Next RIA Apps. Le API per HTML5 Forms

HTML5 and Next RIA Apps. Le API per HTML5 Forms HTML5 and Next RIA Apps Le API per HTML5 Forms Le API per HTML5 Forms Nella precedente lezione abbiamo visto i principali nuov tag di HTML5, un esempio di progetto base con Initializr http://www.initializr.com/

Dettagli

Forms. Commercio elettronico Registrazione di nuovi membri (organizzazioni non-profit) Ricerca di mercato (collezione di dati relativi a utenti)

Forms. Commercio elettronico Registrazione di nuovi membri (organizzazioni non-profit) Ricerca di mercato (collezione di dati relativi a utenti) Forms Rendono XHTML interattivo in modo semplice: Commercio elettronico Registrazione di nuovi membri (organizzazioni non-profit) Ricerca di mercato (collezione di dati relativi a utenti) Svariati controlli

Dettagli

I Tag dell html. Parte quarta

I Tag dell html. Parte quarta I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:

Dettagli

Form Editor. Dove NomeProfilo è personalizzabile.

Form Editor. Dove NomeProfilo è personalizzabile. Form Editor Il tema permette di generare automaticamente dei moduli per la raccolta di dati in tre semplici step: 1. Si crea una tabella nel database per la raccolta dei dati. Per la creazione si parte

Dettagli

Appunti su ASP (Active Server Pages)

Appunti su ASP (Active Server Pages) Client Client Appunti su ASP (Active Server Pages) Che cosa è ASP Un server web è un computer che contiene tutte le pagine web di un determinato sito web. In tale computer è installato un software che

Dettagli

Lezione nr. 7. >> Come posso recuperare un valore da un campo TEXT?

Lezione nr. 7. >> Come posso recuperare un valore da un campo TEXT? Lezione nr. 7 >> Come posso recuperare i valori di un modulo web? Siamo finalmente giunti alla lezione che inizierà ad introdurti nel mondo della programmazione web avanzata. Niente di difficile, ovviamente,

Dettagli

Lezione nr. 8. Allora ecco come fare per recuperare le ultime tre tipologie di campo che ci sono rimaste da vedere.

Lezione nr. 8. Allora ecco come fare per recuperare le ultime tre tipologie di campo che ci sono rimaste da vedere. Lezione nr. 8 Ciao e benvenuto all ultima lezione del corso base. Innanzitutto voglio complimentarti con te per essere arrivato fino a qui. E stato un percorso un po duro e sei stato bravo nel superare

Dettagli

Richiami sugli elementi del linguaggio HTML

Richiami sugli elementi del linguaggio HTML Richiami sugli elementi del linguaggio HTML Un documento in formato Web può essere aperto con un browser, attraverso un collegamento a Internet oppure caricandolo dal disco del proprio computer senza connettersi

Dettagli

Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat www.dimi.uniud.it/burigat Aggiungere immagini E' possibile inserire immagini all'interno delle pagine web in due modi: come contenuto

Dettagli

Cimini Simonelli - Testa

Cimini Simonelli - Testa WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire

Dettagli

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle

Dettagli

Il Web, HTML e Java Corso di Laurea in Ingegneria Informatica Progetto S.C.E.L.T.E.

Il Web, HTML e Java Corso di Laurea in Ingegneria Informatica Progetto S.C.E.L.T.E. Il Web, HTML e Java Corso di Laurea in Ingegneria Informatica Progetto S.C.E.L.T.E. Università di Bologna Facoltà di Ingegneria Bologna, 08/02/2010 Outline Da applicazioni concentrate a distribuite Modello

Dettagli

Tecniche e Best Practice nella costruzione di Form accessibili per il Web. Roberto Zucchetto consulenza e formazione ICT

Tecniche e Best Practice nella costruzione di Form accessibili per il Web. Roberto Zucchetto consulenza e formazione ICT Tecniche e Best Practice nella costruzione di Form accessibili per il Web Roberto Zucchetto consulenza e formazione ICT Cos è IWA/HWG IWA/HWG è un Associazione professionale no profit riconosciuta leader

Dettagli

Dott.ssa Maria Vittoria Avolio. Dott.ssa Adriana Pietramala

Dott.ssa Maria Vittoria Avolio. Dott.ssa Adriana Pietramala Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Maria Vittoria Avolio avoliomv@unical.it Dott.ssa Adriana Pietramala a.pietramala@unical.it Riferimenti Manuale PHP http://www.php.net/download-docs.php

Dettagli

Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML

Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML Gianluca Moro gianluca.moro@unibo.it Dipartimento di Elettronica, Informatica e Sistemistica G. Moro - Università di Bologna World

Dettagli

l'interazione con l'utente.

l'interazione con l'utente. FORMS HTML Il Web non è costituito soltanto da documenti fantasiosi e belle immagini; collegare documenti e servizi Internet è utile ma manca ancora un ingrediente fondamentale: l'interazione con l'utente.

Dettagli

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css. Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,

Dettagli

World Wide Web. Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML. Il Successo del Web. Protocolli di accesso

World Wide Web. Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML. Il Successo del Web. Protocolli di accesso Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML Gianluca Moro gmoro@deis.unibo.it Dipartimento di Elettronica, Informatica e Sistemistica Università di Bologna World Wide Web nato

Dettagli

FORMMAIL.pl. E'presentata una lista dei campi che possono essere utilizzati all'interno della form: CAMPO NECESSARIO DA INSERIRE NELLA FORM

FORMMAIL.pl. E'presentata una lista dei campi che possono essere utilizzati all'interno della form: CAMPO NECESSARIO DA INSERIRE NELLA FORM FORMMAIL.pl L utilizzo di questo script è già previsto in tutti i nostri piani hosting. Inanzitutto la prima cosa da fare è creare un area di form: il "method" deve

Dettagli

ALCUNI ESEMPI DI DATI 6,28 numerico costante

ALCUNI ESEMPI DI DATI 6,28 numerico costante Scheda 21 JAVA SCRIPT I DATI DATI E TIPI DI DATI In una elaborazione i dati sono l elemento essenziale: senza dati non c è elaborazione. Si possono avere dati VARIABILI e dati COSTANTI oppure dati NUMERICI

Dettagli

WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &#"#2

WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &##2 ! "#$" %% $"$&&"'& $%%& $'&( ) *+&, ) && *+ ( -./ WWW (World Wide Web)!& ( # (&%#(!(&&( %% (*0 #,% )0#1( &#"#2 Siti Web pagine Web: documenti pronti per essere registrati su un server Internet residenza

Dettagli

Che cos'è un modulo? pulsanti di opzione caselle di controllo caselle di riepilogo

Che cos'è un modulo? pulsanti di opzione caselle di controllo caselle di riepilogo Creazione di moduli Creazione di moduli Che cos'è un modulo? Un elenco di domande accompagnato da aree in cui è possibile scrivere le risposte, selezionare opzioni. Il modulo di un sito Web viene utilizzato

Dettagli

Breve guida all utilizzo del file Excel: input-forms.xls

Breve guida all utilizzo del file Excel: input-forms.xls SUR+ OA: Configurazione del processo di submission e validazione dei metadati Breve guida all utilizzo del file Excel: input-forms.xls Versione: 1.4 (27 luglio 2011) Autore: Andrea Bollini, Nilde De Paoli

Dettagli

Alla base del web: il protocollo HTTP

Alla base del web: il protocollo HTTP Alla base del web: il protocollo HTTP Programmazione lato server Serie di tecniche che consentono di creare dinamicamente risorse da distribuire tramite un server Web Questo può essere ottenuto tramite

Dettagli

HTML: Altri elementi

HTML: Altri elementi Laboratorio di Tecnologie Web HTML: Altri elementi Dott. Stefano Burigat www.dimi.uniud.it/burigat Oltre a quelli chhe abbiamo visto in precedenza, l'html5 supporta diversi altri elementi che vengono utilizzati

Dettagli

Fondamenti di Informatica II 29. Elementi di programmazione web e linguaggi di script (2)

Fondamenti di Informatica II 29. Elementi di programmazione web e linguaggi di script (2) Interazione client-server (1) per far interagire il client con il server e necessario usare programmi residenti su server (p.e. script CGI - Common Gateway Interface) Fondamenti di Informatica II 29. Elementi

Dettagli

Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche

Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche A.A. 2006-07 Lezione n.10 parte II Prof. Roberto Canonico Università degli Studi di Napoli Federico

Dettagli

Laboratorio di Tecnologie Web HTML: Hyperlink Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Hyperlink Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Hyperlink Dott. Stefano Burigat www.dimi.uniud.it/burigat Aggiungere hyperlink L'elemento che rende possibile aggiungere hyperlink a risorse web è l'elemento inline

Dettagli

1 Creazione pagine web utente

1 Creazione pagine web utente 1 Creazione pagine web utente Con il nuovo sistema operativo SFW184 è stata implementata la possibilità di creare pagine web direttamente dall'utente, queste pagine potranno essere trasferite nelle directory

Dettagli

Tecnologie e Programmazione Web

Tecnologie e Programmazione Web Presentazione 1 Tecnologie e Programmazione Web Html, JavaScript e PHP RgLUG Ragusa Linux Users Group SOftware LIbero RAgusa http://www.solira.org - Nunzio Brugaletta (ennebi) - Reti 2 Scopi di una rete

Dettagli

Uso di form HTML per inviare dati nel web dinamico. I form HTML ed il web dinamico. Struttura di base dei form HTML. Form: controlli di input

Uso di form HTML per inviare dati nel web dinamico. I form HTML ed il web dinamico. Struttura di base dei form HTML. Form: controlli di input I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica orario.html Uso di form HTML per inviare dati nel web dinamico partenza arrivo data browser

Dettagli

La programmazione Web 3-Introduzione ai moduli (FORM)

La programmazione Web 3-Introduzione ai moduli (FORM) La programmazione Web 3-Introduzione ai moduli (FORM) Al crescente successo del Web si è accompagnato un continuo lavoro per ampliarne le possibilità di utilizzo e le funzionalità offerte agli utenti.

Dettagli

Lista dei Punti di Controllo per l'accessibilità dei contenuti web

Lista dei Punti di Controllo per l'accessibilità dei contenuti web Lista dei Punti di Controllo per l'accessibilità dei contenuti web Questo documento è tratto dal sito del W3C http://www.w3.org/tr/wai-webcontent/full-checklist.html ed è stato tradotto dagli studenti

Dettagli

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ Pag. 1 di 13 REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ PUBBLICA AMMINISTRAZIONE Comune di Pella (NO) http://www.comune.pella.no.it/ DATA DELLA VALUTAZIONE 09/07/2008 AUTORE DELLA VALUTAZIONE Alessio Mantegna

Dettagli

Istruzioni su inserimento ed aggiornamento del sito del Comune di Savona

Istruzioni su inserimento ed aggiornamento del sito del Comune di Savona Istruzioni su inserimento ed aggiornamento del sito del Comune di Savona Autore: Riccardo Cecinati CED riccardo.cecinati@comunesavona.it Data: 19 Maggio 2011 Versione:0.2 Indice generale Istruzioni su

Dettagli

Esercitazione 8. Basi di dati e web

Esercitazione 8. Basi di dati e web Esercitazione 8 Basi di dati e web Rev. 1 Basi di dati - prof. Silvio Salza - a.a. 2014-2015 E8-1 Basi di dati e web Una modalità tipica di accesso alle basi di dati è tramite interfacce web Esiste una

Dettagli

Corso di PHP. Prerequisiti. 6.1 PHP e il web 1. Conoscenza HTML Tecnica della programmazione Principi di programmazione web

Corso di PHP. Prerequisiti. 6.1 PHP e il web 1. Conoscenza HTML Tecnica della programmazione Principi di programmazione web Corso di PHP 6.1 PHP e il web 1 1 Prerequisiti Conoscenza HTML Tecnica della programmazione Principi di programmazione web 2 1 Introduzione In questa Unità illustriamo alcuni strumenti di programmazione

Dettagli

REQUISITO DI ACCESSIBILITA

REQUISITO DI ACCESSIBILITA ISTITUTO COMPRENSIVO Pascoli - Crispi Via Gran Priorato, 11-98121 Messina Via Monsignor D'Arrigo, 18-98122 Messina Tel/Fax. 09047030 090360037 e-mail: meic87300t@istruzione.it / meee00800r@istruzione.it

Dettagli

Verifica di Accessibilità del sito www.aots.sanita.fvg.it

Verifica di Accessibilità del sito www.aots.sanita.fvg.it Verifica di Accessibilità del sito www.aots.sanita.fvg.it NOTE: Verifica effettuata in base ai requisiti descritti nell allegato A del Decreto Ministeriale 8 luglio 2005, ai sensi della legge n.4 del 9

Dettagli

Allegato B. Elenco delle situazioni possibili

Allegato B. Elenco delle situazioni possibili Allegato B. Elenco delle situazioni possibili Descrizione dettagliata delle azioni da implementare per il sistema di gestione web e di registrazione di Icaro Prato Indice generale Premesse... 2 Note sulle

Dettagli

PHP. A. Lorenzi, R. Giupponi, D. Iovino LINGUAGGI WEB. LATO SERVER E MOBILE COMPUTING Atlas. Copyright Istituto Italiano Edizioni Atlas

PHP. A. Lorenzi, R. Giupponi, D. Iovino LINGUAGGI WEB. LATO SERVER E MOBILE COMPUTING Atlas. Copyright Istituto Italiano Edizioni Atlas PHP A. Lorenzi, R. Giupponi, D. Iovino LINGUAGGI WEB. LATO SERVER E MOBILE COMPUTING Atlas Copyright Istituto Italiano Edizioni Atlas Programmazione lato server PHP è un linguaggio che estende le funzionalità

Dettagli

Siti interattivi e dinamici. in poche pagine

Siti interattivi e dinamici. in poche pagine Siti interattivi e dinamici in poche pagine 1 Siti Web interattivi Pagine Web codificate esclusivamente per mezzo dell HTML non permettono alcun tipo di interazione con l utente, se non quella rappresentata

Dettagli

DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER

DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER DATABASE IN RETE E PROGRAMMAZIONE LATO SERVER L architettura CLIENT SERVER è l architettura standard dei sistemi di rete, dove i computer detti SERVER forniscono servizi, e computer detti CLIENT, richiedono

Dettagli

Analisi Accessibilità Diagnosi funzionale Ver. 1.0

Analisi Accessibilità Diagnosi funzionale Ver. 1.0 Analisi Accessibilità Diagnosi funzionale Ver. 1.0 Rapporto conclusivo di accessibilità... 2 Sommario della verifica tecnica e requisiti tecnici di accessibilità delle applicazioni basate su tecnologie

Dettagli

Accessibilità del sito web del Comune di Triggiano

Accessibilità del sito web del Comune di Triggiano Accessibilità del sito web del Comune di Triggiano Il Comune di Triggiano, già attento nella precedente versione del suo sito web al tema dell'accessibilità delle informazioni, ha riprogrammato tutte le

Dettagli

Corso di Informatica. Prerequisiti. Modulo T3 B3 Programmazione lato server. Architettura client/server Conoscenze generali sui database

Corso di Informatica. Prerequisiti. Modulo T3 B3 Programmazione lato server. Architettura client/server Conoscenze generali sui database Corso di Informatica Modulo T3 B3 Programmazione lato server 1 Prerequisiti Architettura client/server Conoscenze generali sui database 2 1 Introduzione Lo scopo di questa Unità è descrivere gli strumenti

Dettagli

HTML HTML. Markup SGML. HyperText Markup Language HyperText. Markup Language. Standard Generalized Markup Languages. Principi

HTML HTML. Markup SGML. HyperText Markup Language HyperText. Markup Language. Standard Generalized Markup Languages. Principi HTML HTML HyperText Markup Language HyperText Testo contenente link verso altri documenti Markup Language Markup In computerized document preparation, a method of adding information to the text indicating

Dettagli

Lezione III: Oggetti ASP e interazione tramite form HTML

Lezione III: Oggetti ASP e interazione tramite form HTML Lezione III: Oggetti ASP e interazione tramite form HTML La terza lezione, come le precedenti, ha avuto una durata di due ore, di cui una in aula e l altra in laboratorio, si è tenuta alla presenza della

Dettagli

HTML+XML= XHTML. Che cos è l XHTML

HTML+XML= XHTML. Che cos è l XHTML HTML+XML= XHTML Il ritorno al futuro del WEB A cura di Barbara Lotti Che cos è l XHTML Nel gennaio del 2000 il W3C ha rilasciato, anziché una nuova versione, una riformulazione dell HTML come applicazione

Dettagli

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict.

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict. Tasti di accesso rapido Al fine di migliorare l'accessibilità del sito sono stati definiti i seguenti tasti di accesso rapido, per attivare le principali funzionalità offerte: [H] = Homepage [R] = Ricerca

Dettagli

Il nome della pagina

<html> <head> <title> Il nome della pagina </title> </head> <body> </body> </html> Per creare una pagina html bisogna innanzitutto decidere quale programma utilizzare per la sua realizzazione, il blocco note di windows 95 è perfetto per il nostro scopo ma non sono esclusi altri programmi

Dettagli

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi

Dettagli

HTML. Struttura di un file HTML pag. 2 Esempio della struttura di un sito pag. 3. Impostare i dati in un link di tipo mailto pag.

HTML. Struttura di un file HTML pag. 2 Esempio della struttura di un sito pag. 3. Impostare i dati in un link di tipo mailto pag. HTML Vari Struttura di un file HTML pag. 2 Esempio della struttura di un sito pag. 3 Impostare i dati in un link di tipo mailto pag. 6 Testo scorrevole pag. 7 Link ad una pagina con il tag pag.

Dettagli

Mon Ami 3000 Touch Interfaccia di vendita semplificata per monitor touchscreen

Mon Ami 3000 Touch Interfaccia di vendita semplificata per monitor touchscreen Prerequisiti Mon Ami 3000 Touch Interfaccia di vendita semplificata per monitor touchscreen L opzione Touch è disponibile per le versioni Vendite, Azienda Light e Azienda Pro; per sfruttarne al meglio

Dettagli

BASI DI DATI http://www.diee.unica.it/~giacinto/bd. Cos è il PHP. Cos è il PHP. Esercitazione su PHP & MySQL

BASI DI DATI http://www.diee.unica.it/~giacinto/bd. Cos è il PHP. Cos è il PHP. Esercitazione su PHP & MySQL Università degli Studi di Cagliari Corso di Laurea in Ingegneria Elettronica Contatti BASI DI DATI http://www.diee.unica.it/~giacinto/bd Esercitazione su PHP & MySQL! Roberto Tronci! e-mail: roberto.tronci@diee.unica.it!

Dettagli

WEP WEb Programming. 4 PHP: dati e form

WEP WEb Programming. 4 PHP: dati e form WEP WEb Programming 4 Lucidi per il corso di Basi di Dati tenuto da Paolo Baldan presso l Università di Padova, anno accademico 2008/09 1 PHP e MySQL 2 Perché? 3 Le applicazioni hanno bisogno di operare

Dettagli

Come creare un modulo

Come creare un modulo Come creare un modulo Aggiungi moduli al tuo sito per registrare le informazioni dei tuoi clienti su un database, o per riceverle via e- mail. Trascina un widget Modulo sulla tua pagina Nel pannello Widget

Dettagli

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup:

Dettagli

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ Ente richiedente Provincia url Comune di Carmagnola TO http://comune.carmagnola.to.it/ Autore della valutazione Data Maurizio

Dettagli

Posta Elettronica Certificata

Posta Elettronica Certificata Posta Elettronica Certificata Guida all amministrazione del servizio MINIMANU.IT.DMPS1400 002 Posta Elettronica Certificata Manuale di amministrazione del servizio PEC di Telecom Italia Trust Technologies

Dettagli

Flavio De Paoli depaoli@disco.unimib.it

Flavio De Paoli depaoli@disco.unimib.it Flavio De Paoli depaoli@disco.unimib.it 1 Il web come architettura di riferimento Architettura di una applicazione web Tecnologie lato server: Script (PHP, Pyton, Perl), Servlet/JSP, ASP Tecnologie lato

Dettagli

Il linguaggio HTML - Nozioni di base

Il linguaggio HTML - Nozioni di base Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@dti.unimi.it What is HTML? HTML (HyperText Markup Language)

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Il sito web del comune è stato progettato e realizzato con particolare attenzione a quanto prescritto dalla Legge 4/2004 (cosiddetta Legge Stanca ), contenente "Disposizioni

Dettagli

I link e l'ipertestualità

I link e l'ipertestualità I link e l'ipertestualità I link sono "il ponte" che consente di passare da un documento all altro. In quanto tali, i link sono formati da due componenti: il contenuto che "nasconde" il collegamento (può

Dettagli

VERIFICA CORSO: MASTER DI PRIMO LIVELLO IN TECNOLOGIE DI SICUREZZA WEB E NETWORKING CODICE CORSO: B22-75-2008-0

VERIFICA CORSO: MASTER DI PRIMO LIVELLO IN TECNOLOGIE DI SICUREZZA WEB E NETWORKING CODICE CORSO: B22-75-2008-0 VERIFICA CORSO: MASTER DI PRIMO LIVELLO IN TECNOLOGIE DI SICUREZZA WEB E NETWORKING CODICE CORSO: B22-75-2008-0 UNITA FORMATIVA: LE TECNOLOGIE WEB LATO CLIENT DOCENTE: DANIELA REMOGNA DATA: 28 APRILE 2008

Dettagli

Introduzione. Portare HTML nella famiglia XML Mantenere compatibilità con i software che supportano HTML

Introduzione. Portare HTML nella famiglia XML Mantenere compatibilità con i software che supportano HTML Lezione 8 XHTML Introduzione " XHTML = HTML + XML " HTML: linguaggio di marcatura per presentare i contenuti di una pagina web " XML: super-linguaggio che consente la creazione di nuovi linguaggi di marcatura

Dettagli

La principale particolarità del web dinamico è la possibilità di variare i contenuti delle pagine in base alle richieste degli utenti.

La principale particolarità del web dinamico è la possibilità di variare i contenuti delle pagine in base alle richieste degli utenti. La principale particolarità del web dinamico è la possibilità di variare i contenuti delle pagine in base alle richieste degli utenti. Questa possibilità si materializza attraverso i meccanismi che permettono

Dettagli

Inizio attività / termine attività

Inizio attività / termine attività Inserire Cognome e Nome Non è necessario un Codice amministrativo Usare il Cognome come Nome utente Inserire una password e ripeterla al rigo sotto Potrebbe essere utile inserire il proprio indirizzo mail

Dettagli

L aspetto dei file HTML

L aspetto dei file HTML L aspetto dei file HTML Le pagine HTML contengono due tipi di oggetti: il testo del documento i TAG HTML Il documento si presenta come una successione di elementi (annidati) del tipo Testo influenzato

Dettagli

DISPENSA INTRODUTTIVA ALL'EDITOR DI PAGINE HTML DI STAROFFICE 7

DISPENSA INTRODUTTIVA ALL'EDITOR DI PAGINE HTML DI STAROFFICE 7 DISPENSA INTRODUTTIVA ALL'EDITOR DI PAGINE HTML DI STAROFFICE 7 L editor di pagine HTML si StarOffice è un editor di pagine scritte con il linguaggio HTML. Un testo HTML è un documento ipermediale, scritto

Dettagli

PYTHON Inviare dati con i form A cura di Silvio Bonechi [sabandini_at_tiscali_dot_it] per http://www.pctrio.com

PYTHON Inviare dati con i form A cura di Silvio Bonechi [sabandini_at_tiscali_dot_it] per http://www.pctrio.com PYTHON Inviare dati con i form A cura di Silvio Bonechi [sabandini_at_tiscali_dot_it] per http://www.pctrio.com 10.07.2006 Ver. 1.0 In questo articolo vedremo come gestire con un FORM l invio di dati ad

Dettagli

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 Le pagine del sito istituzionale e dei siti tematici del Comune di Pesaro sono state progettate

Dettagli

Manuale Gateway SMS. (Versione Documento 2.1) pagina 1 di 5

Manuale Gateway SMS. (Versione Documento 2.1) pagina 1 di 5 Manuale Gateway SMS (Versione Documento 2.1) pagina 1 di 5 1. Introduzione Questo documento descrive i diversi metodi e l'uso dell'sms center per trasmettere messaggi SMS con metodo HTTP POST o GET. Il

Dettagli

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Requisito n. 1 Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili

Dettagli

Scritto da Enrico Battuello Lunedì 07 Febbraio 2011 21:36 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:40

Scritto da Enrico Battuello Lunedì 07 Febbraio 2011 21:36 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:40 Nella prima parte di questo tutorial abbiamo introdotto alcuni concetti chiave legati alle nuove specifiche di HTML5, abbiamo introdotto alcuni nuovi tag per la costruzione di pagine web ed abbiamo parlato

Dettagli

CA Identity Manager. Guida alla progettazione della console utente 12.6.5

CA Identity Manager. Guida alla progettazione della console utente 12.6.5 CA Identity Manager Guida alla progettazione della console utente 12.6.5 La presente documentazione, che include il sistema di guida in linea integrato e materiale distribuibile elettronicamente (d'ora

Dettagli

Posta Elettronica Certificata Manuale di amministrazione semplificata del servizio PEC di TI Trust Technologies Documento ad uso pubblico Pag. 1 di 33 Indice degli argoment nti 1 Introduzione... 3 2 Caratteristiche

Dettagli

Guida a PHP. Primi esempi

Guida a PHP. Primi esempi Guida a PHP Php è un modulo aggiuntivo per web server che permette di creare delle pagine web dinamiche. Una pagina in Php è composta sia da tag html, sia da parti in codice di programmazione Php. Ogni

Dettagli

Una Guida Rapida ai servizi del Nuovo Sito della Congregazione della Passione

Una Guida Rapida ai servizi del Nuovo Sito della Congregazione della Passione Una Guida Rapida ai servizi del Nuovo Sito della Congregazione della Passione 1 Versione Italiana Indice degli argomenti Indice degli argomenti Sommario Indice degli argomenti... 2 1. Introduzione... 3

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per

Dettagli

Modulo 1: Fondamenti per scrivere una pagina web

Modulo 1: Fondamenti per scrivere una pagina web Modulo 1: Fondamenti per scrivere una pagina web Indice del modulo Introduzione al linguaggio di marcatura Contenuto, struttura, presentazione Elementi e attributi Proviamo a scrivere una pagina HTML Aggiungere

Dettagli

CLAROLINE. Manuale d'uso. Area Docenti

CLAROLINE. Manuale d'uso. Area Docenti CLAROLINE Manuale d'uso Area Docenti ELEARNING SYSTEM 2 Introduzione Claroline è un sistema Web di gestione di percorsi formativi a distanza. Permette a docenti, relatori, ecc. di generare ed amministrare

Dettagli