Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
HTML I Form in HTML5
2
Form 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 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 <form> I form sono racchiusi tra i tag <form> e </form> Gli attributi principali del tag <form> 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 <body> autocomplete = “on” (default)/“off” suggerisce il completamento automatico di alcuni controlli HTML 5 Alice Pavarani
5
Esempi di utilizzo di form
Form per l’inserimento di nome e cognome Mandare una mail con i dati raccolti da un form Interagire con script eseguiti sul client (es. Javascript) in questo caso manca l’attributo action <form action="demo_form.asp" method="get"> Nome: <input type="text" name="nome"><br> Cognome: <input type="text" name="cognome"><br> <input type="submit" value="Invia"> </form> <form method="post"> ... </form> <form method="post"> ... </form> Alice Pavarani
6
Gli elementi di un form <input> campo di inserimento
<textarea> area di testo editabile su più righe <button> bottone cliccabile <datalist> campo di inserimento guidato da menu a tendina <option> voci del menu <select> menu a tendina selezionabile <optgroup> raggruppa le voci del menu definite da <option> <keygen> autenticazione sicura degli utenti (genera una coppia di chiavi: pubblica e privata) <fieldset> raggruppa più elementi di una form <label> etichetta di un controllo <output> rappresenta il risultato di un calcolo HTML 5 HTML 5 HTML 5 Alice Pavarani
7
Tag <input> 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 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 Alice Pavarani
8
Tag <input> 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 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 Alice Pavarani
9
Attributi del tag <input>
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 <input> variano a seconda del valore dell’attributo type Tutti i tipi di <input> - tranne button, image, reset, submit - hanno l’attributo name, necessario per identificare il controllo in cui l’utente ha immesso i dati HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 Alice Pavarani
10
Attributi personalizzati del tag <input>
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 <img> number, range max,min numero massimo e minimo possibili step incremento value valore di default Alice Pavarani
11
Appendice - Tag <input>
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 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 HTML 5 Alice Pavarani
Presentazioni simili
