La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

HTML I Form in HTML5. Form 2  Un form è una sezione di documento che contiene  Testo normale e markup  Elementi speciali detti controlli (check box,

Presentazioni simili


Presentazione sul tema: "HTML I Form in HTML5. Form 2  Un form è una sezione di documento che contiene  Testo normale e markup  Elementi speciali detti controlli (check box,"— Transcript della presentazione:

1 HTML I Form in HTML5

2 Form 2  Un form è una sezione di documento che contiene  Testo normale e markup  Elementi speciali detti controlli (check box, text area, radio button,…)  I form vengono generalmente utilizzati per permettere all’utente di interagire con la pagina Web  L’utente comunica attraverso i controlli  Successivamente il form viene inviato (submit) ed elaborato in remoto dal Web Server  Pagina di riferimento interamente dedicata ai form in HTML5: Alice Pavarani

3 Form 3  Ogni campo (controllo) con cui l’utente può interagire è composto da:  nome: definito dall’attributo name dei tag di alcuni controlli  valore: impostato dall’utente interagendo con il controllo  I dati raccolti in un form vengono inviati (submit) al Web Server come un insieme di coppie: nome=valore Alice Pavarani

4 Tag 4  I form sono racchiusi tra i tag e  Gli attributi principali del tag sono:  name specifica il nome del form  action specifica l’URL a cui inviare i dati dopo il submit del form  method specifica il metodo http da usare per elaborare i dati:  “get” invia i dati del form attaccandoli all’URL, nella forma URL?nome1=valore1&nome2=valore2  “post” invia i dati del form inserendoli all’interno del tag  autocomplete = “on” (default) /“off” suggerisce il completamento automatico di alcuni controlli Alice Pavarani

5 Esempi di utilizzo di form 5 1. Form per l’inserimento di nome e cognome 2. Mandare una mail con i dati raccolti da un form 3. Interagire con script eseguiti sul client (es. Javascript) in questo caso manca l’attributo action Nome: Cognome:... Alice Pavarani

6 Gli elementi di un form 6  campo di inserimento  area di testo editabile su più righe  bottone cliccabile  campo di inserimento guidato da menu a tendina  voci del menu  menu a tendina selezionabile  voci del menu  raggruppa le voci del menu definite da  autenticazione sicura degli utenti (genera una coppia di chiavi: pubblica e privata)  raggruppa più elementi di una form  etichetta di un controllo  rappresenta il risultato di un calcolo Alice Pavarani

7 Tag 7  Specifica diversi tipi di controlli di interazione di un form, a seconda del suo attributo type :  button bottone cliccabile  checkbox campo per la selezione di valori (on/off)  color campo per la selezione di un colore mediante la tabella dei colori RGB  date campo per l’inserimento della data (giorno/mese/anno)  datetime-local campo per l’inserimento della data e dell’ora (giorno/mese/anno – ore:minuti:secondi)  campo per l’inserimento di un indirizzo  file bottone “Sfoglia…” per selezionare un file e relativo campo per visualizzare il nome del file inserito  hidden coppia nome=valore da inviare al server ma nascosta all’utente  image bottone con immagine per inviare i dati raccolti dal form (submit)  month campo per l’inserimento di mese/anno  number campo per l’inserimento di un numero Alice Pavarani

8 Tag 8  password campo di inserimento in cui il testo inserito non viene visualizzato  radio bottone per scegliere uno tra più valori possibili  range barra con indicatore scorrevole  reset bottone per resettare il valore di tutti i campi a quello iniziale  search campo per l’inserimento di una stringa di ricerca  submit bottone per inviare i dati raccolti dal form  tel campo per l’inserimento di un numero di telefono  text campo per l’inserimento del testo (default)  time campo per l’inserimento dell’ora (ore:minuti:secondi)  url campo per l’inserimento di un URL  week campo per l’inserimento di settimana/anno Alice Pavarani

9 Attributi del tag 9  Principali attributi  autocomplete (come per le form) auto completamento del campo  autofocus imposta automaticamente il focus sul controllo  disabled disabilita il controllo  multiple l’utente può inserire più valori per il controllo ( , file )  pattern specifica una regular expression per controllare il valore inserito ( text, search, url, , password )  readonly definisce un controllo di sola lettura (non modificabile)  required impone che un controllo venga compilato  Gli attributi aggiuntivi del tag variano a seconda del valore dell’attributo type  Tutti i tipi di - tranne button, image, reset, submit - hanno l’attributo name, necessario per identificare il controllo in cui l’utente ha immesso i dati Alice Pavarani

10 Attributi personalizzati del tag 10  Attributi particolari:  text, password  value valore iniziale del campo  size dimensione della casella di testo  maxlenght numero massimo di caratteri che si possono inserire  checkbox, radio  value valore che il campo assume se è selezionato  checked indica se il campo è selezionato per default  button, submit, reset  value etichetta del bottone  image  src URL dell’immagine che è etichetta del bottone  la maggior parte degli attributi del tag  number, range  max,min numero massimo e minimo possibili  step incremento  value valore di default Alice Pavarani

11 Appendice - Tag 11  Specifica diversi tipi di controlli di interazione di un form, a seconda del suo attributo type :  button bottone cliccabile  checkbox campo per la selezione di valori (on/off)  color campo per la selezione di un colore mediante la tabella dei colori RGB  date campo per l’inserimento della data (giorno/mese/anno)  datetime campo per l’inserimento della data e dell’ora (giorno/mese/anno – ore:minuti:secondi)  campo per l’inserimento di un indirizzo  file bottone “Sfoglia…” per selezionare un file e relativo campo per visualizzare il nome del file inserito  hidden coppia nome=valore da inviare al server ma nascosta all’utente  image bottone con immagine per inviare i dati raccolti dal form (submit)  month campo per l’inserimento di mese/anno  number campo per l’inserimento di un numero  password campo di inserimento in cui il testo inserito non viene visualizzato  radio bottone per scegliere uno tra più valori possibili  range barra con indicatore scorrevole  reset bottone per resettare il valore di tutti i campi a quello iniziale  search campo per l’inserimento di una stringa di ricerca  submit bottone per inviare i dati raccolti dal form  tel campo per l’inserimento di un numero di telefono  text campo per l’inserimento del testo (default)  time campo per l’inserimento dell’ora (ore:minuti:secondi)  url campo per l’inserimento di un URL  week campo per l’inserimento di settimana/anno Alice Pavarani


Scaricare ppt "HTML I Form in HTML5. Form 2  Un form è una sezione di documento che contiene  Testo normale e markup  Elementi speciali detti controlli (check box,"

Presentazioni simili


Annunci Google