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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni

HTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni HTML: FORM Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Form Text Radio Select CheckBox TextArea Button ... L'elemento serve per delimitare un modulo

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

Form HTML.
campi del modulo

Form HTML. <form> campi del modulo </form> Form HTML I form (o moduli) HTML permettono ad un utente di interagire con la pagina che sta visitando. L inserimento di un form in una pagina web avviene mediante il tag FORM. Attributi del form campi

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

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

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

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

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

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

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

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

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

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

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

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

Siti web e Dreamweaver. La schermata iniziale

Siti web e Dreamweaver. La schermata iniziale Siti web e Dreamweaver Dreamweaver è la soluzione ideale per progettare, sviluppare e gestire siti web professionali e applicazioni efficaci e conformi agli standard e offre tutti gli strumenti di progettazione

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

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

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

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

Educazione didattica per la E-Navigation

Educazione didattica per la E-Navigation Educazione didattica per la E-Navigation Guida utente per l utilizzo della piattaforma WIKI Rev. 3.0 23 febbraio 2012 Guida EDEN rev. 3.0 P. 1 di 24 23/02/2012 Indice Come registrarsi... 3 Utilizzo della

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

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

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

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

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

Guida Joomla. di: Alessandro Rossi, Flavio Copes

Guida Joomla. di: Alessandro Rossi, Flavio Copes Guida Joomla di: Alessandro Rossi, Flavio Copes I contenuti 1. 6. Organizzare i contenuti in Joomla Come è possibile inserire ed organizzare i contenuti in Joomla: sezioni, categorie e articoli 2. 7. Ottimizzare

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

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

manuale utente rev. 2.0 powered by

manuale utente rev. 2.0 powered by manuale utente rev. 2.0 powered by www.cantierecreativo.net MANUALE UTENTE REV.2 Indice generale 1 Introduzione... 2 2 Accesso all'area amministrativa...3 3 Sezione Pagine... 4 3.1 Pagine recenti...4 3.2

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

GUIDA UTENTE FATTURA IMPRESA

GUIDA UTENTE FATTURA IMPRESA GUIDA UTENTE FATTURA IMPRESA (Vers. 4.5.0) Installazione... 2 Prima esecuzione... 5 Login... 6 Funzionalità... 7 Documenti... 8 Creazione di un nuovo documento... 9 Ricerca di un documento... 17 Calcolare

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

Creazione Account PEC (Posta Elettronica Certificata)

Creazione Account PEC (Posta Elettronica Certificata) Creazione Account PEC (Posta Elettronica Certificata) Come già specificato, il software è stato realizzato per la gestione di account PEC (Posta Elettronica Certificata), ma consente di configurare anche

Dettagli

Questa scelta è stata suggerita dal fatto che la stragrande maggioranza dei navigatori usa effettivamente IE come browser predefinito.

Questa scelta è stata suggerita dal fatto che la stragrande maggioranza dei navigatori usa effettivamente IE come browser predefinito. Pagina 1 di 17 Installazione e configurazione di applicazioni Installare e configurare un browser Come già spiegato nelle precedenti parti introduttive di questo modulo un browser è una applicazione (lato

Dettagli

19. LA PROGRAMMAZIONE LATO SERVER

19. LA PROGRAMMAZIONE LATO SERVER 19. LA PROGRAMMAZIONE LATO SERVER Introduciamo uno pseudocodice lato server che chiameremo Pserv che utilizzeremo come al solito per introdurre le problematiche da affrontare, indipendentemente dagli specifici

Dettagli

Piazza Vinci, 78-00139 Roma Tel. +39 347.301.78.14 Fax +39 06.878.599.211 info@etabetaweb.it www.etabetaweb.it. manuale utente Versione 1.

Piazza Vinci, 78-00139 Roma Tel. +39 347.301.78.14 Fax +39 06.878.599.211 info@etabetaweb.it www.etabetaweb.it. manuale utente Versione 1. Piazza Vinci, 78-00139 Roma Tel. +39 347.301.78.14 Fax +39 06.878.599.211 info@etabetaweb.it www.etabetaweb.it OPENm@il manuale utente Versione 1.2 INDICE INDICE 2 1. INDIRIZZI PRINCIPALI 3 1. MENU PRINCIPALE

Dettagli

RELAZIONE DI PROGETTO DELL ESAME STRUMENTI PER APPLICAZIONI WEB

RELAZIONE DI PROGETTO DELL ESAME STRUMENTI PER APPLICAZIONI WEB RELAZIONE DI PROGETTO DELL ESAME STRUMENTI PER APPLICAZIONI WEB Studente: Nigro Carlo N.mat.: 145559 Tema: Negozio virtuale Nome sito: INFOTECH Url: http://spaw.ce.unipr.it/progetti/infotech Per il progetto

Dettagli

HTML e interattività FORM

HTML e interattività FORM HTML e interattività FORM Interattività delle pagine web I moderni siti web non sono più soltanto un insieme di pagine da leggere con testo e immagini, ma rappresentano uno strumento per interagire con

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

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

Registrazione nuovo utente. Per registrare un nuovo utente cliccare sul link Registrazione

Registrazione nuovo utente. Per registrare un nuovo utente cliccare sul link Registrazione Manuale Gedos 2 Indice Indice... 3 Il Portale... 4 Registrazione nuovo utente... 5 Primo Logon... 8 Registrazione a Gedos... 9 Accesso ai Servizi... 11 Gestione Donatori... 12 Inserimento nuovo donatore...

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

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language HTML 05/04/2012 1 Introduzione Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language L'ipertesto è semplicemente un testo che funziona

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

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

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

A T I C _W E B G U I D A AL L A N A V I G A Z I O N E S U L S I T O D E L G R U P P O. Rev. 2.1

A T I C _W E B G U I D A AL L A N A V I G A Z I O N E S U L S I T O D E L G R U P P O. Rev. 2.1 G U I D A AL L A N A V I G A Z I O N E S U L S I T O D E L G R U P P O A T I C _W E B Rev. 2.1 1 1. ISCRIZIONE Le modalità di iscrizione sono due: Iscrizione volontaria Iscrizione su invito del Moderatore

Dettagli

L UFFICIO WEB. Modulo online per la gestione del personale. Manuale di utilizzo. Versione 1.0.75.0. Pagina 1 di 33

L UFFICIO WEB. Modulo online per la gestione del personale. Manuale di utilizzo. Versione 1.0.75.0. Pagina 1 di 33 L UFFICIO WEB Modulo online per la gestione del personale Manuale di utilizzo Versione 1.0.75.0 Pagina 1 di 33 1. INTRODUZIONE L applicazione Ufficio Web permette una gestione semplificata e automatizzata

Dettagli

SISTEMA AFFILIAZIONE TESSERAMENTO TRASFERIMENTI

SISTEMA AFFILIAZIONE TESSERAMENTO TRASFERIMENTI SISTEMA AFFILIAZIONE TESSERAMENTO TRASFERIMENTI ONLINE MANUALE UTENTE ASD/SSD AFFILIATE REVISIONE 1.0 NOVEMBRE 2014 Sistema Affiliazione Tesseramento trasferimenti online 1 INTRODUZIONE Questo manuale

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

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

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

Internet Architettura del www

Internet Architettura del www Internet Architettura del www Internet è una rete di computer. Il World Wide Web è l insieme di servizi che si basa sull architettura di internet. In una rete, ogni nodo (detto host) è connesso a tutti

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

FISH Sardegna ONLUS. www.fishsardegna.org. Manuale Utente. www.fishsardegna.org

FISH Sardegna ONLUS. www.fishsardegna.org. Manuale Utente. www.fishsardegna.org FISH Sardegna ONLUS Manuale Utente Note generali: Il sito è costruito su CMS Drupal 7. Per avere maggiori informazioni su Drupal si puo consultare online il portale ufficiale http://drupal.org/( in inglese)

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

Il Protocollo HTTP e la programmazione di estensioni Web

Il Protocollo HTTP e la programmazione di estensioni Web Il Protocollo HTTP e la programmazione di estensioni Web 1 Il protocollo HTTP È il protocollo standard inizialmente ramite il quale i server Web rispondono alle richieste dei client (prevalentemente browser);

Dettagli

GUIDA CENTRALINO VIRTUALE

GUIDA CENTRALINO VIRTUALE GUIDA CENTRALINO VIRTUALE Sommario 1 Quickstart 1.1 Inoltro a singolo operatore 1.2 Servizio di messaggi registrati 1.3 Inoltro a numero telefonico con preselezione 1.4 Servizio di voicemail 1.5 Servizio

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

Spazio Commerciale. Le tue vendite, il nostro successo. Manuale Operativo. Guida inserimento articoli tramite Area di amministrazione.

Spazio Commerciale. Le tue vendite, il nostro successo. Manuale Operativo. Guida inserimento articoli tramite Area di amministrazione. Manuale Operativo Guida inserimento articoli tramite Area di amministrazione Pagina 1 di 8 Indice Generale 1. Sommario 2. Introduzione 3. Glossario 4. Accesso all'interfaccia 5. Icone e funzionalità 5.1.

Dettagli

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

Dettagli

Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto. Approfondimento SOFTWARE PER L ARCHIVIAZIONE

Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto. Approfondimento SOFTWARE PER L ARCHIVIAZIONE APPROFONDIMENTO ICT Iniziativa Comunitaria Equal II Fase IT G2 CAM - 017 Futuro Remoto Approfondimento SOFTWARE PER L ARCHIVIAZIONE ORGANISMO BILATERALE PER LA FORMAZIONE IN CAMPANIA INDICE SOFTWARE PER

Dettagli

Documentazione. Divisione Sicurezza Dati

Documentazione. Divisione Sicurezza Dati Documentazione mailto:beable@beable.it http://www.beable.it 1 Questa guida è rilasciata con la licenza Creative Commons Attribution-Non- Commercial-NoDerivs 2.5, consultabile all indirizzo http://creativecommons.org.

Dettagli

GB informazioni e freeware

GB informazioni e freeware GB informazioni e freeware Informazioni per PC, internet, software, freeware e tutorial Home Programmi Informazioni Passatempo Siti utili Aggiornamenti sito News Posizione nel sito : Home >> Informazioni

Dettagli

RECUPERO CREDITI. Gestione del Credito Clienti. Release 5.20 Manuale Operativo

RECUPERO CREDITI. Gestione del Credito Clienti. Release 5.20 Manuale Operativo Release 5.20 Manuale Operativo RECUPERO CREDITI Gestione del Credito Clienti Programma pensato per la funzione di gestione del credito: permette di memorizzare tutte le informazioni relative alle azioni

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

@2011 Politecnico di Torino 1

@2011 Politecnico di Torino 1 Concetti di base Programmazione Web Il linguaggio HTML HTML consente di annotare un testo per contrassegnare le parti che lo compongono Le annotazioni sono realizzate tramite i "tag" Visualizzare documenti

Dettagli

Impostare il browser per navigare in sicurezza Opzioni di protezione

Impostare il browser per navigare in sicurezza Opzioni di protezione Impostare il browser per navigare in sicurezza Opzioni di protezione Data la crescente necessità di sicurezza e tutela dei propri dati durante la navigazione in rete, anche gli stessi browser si sono aggiornati,

Dettagli

Guida utente alla compilazione delle richieste di contributo on-line per le Associazioni dei Consumatori

Guida utente alla compilazione delle richieste di contributo on-line per le Associazioni dei Consumatori Guida Utente RCP2 Agenzia nazionale per l attrazione degli investimenti e lo sviluppo d impresa SpA Guida utente alla compilazione delle richieste di contributo on-line per le Associazioni dei Consumatori

Dettagli