HTML I Form in HTML5. Form 2 Un form è una sezione di documento che contiene Testo normale e...
11
HTML I Form in HTML5
-
Upload
clara-masi -
Category
Documents
-
view
248 -
download
1
Transcript of HTML I Form in HTML5. Form 2 Un form è una sezione di documento che contiene Testo normale e...
HTMLI Form in HTML5
Alice Pavarani2
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: http://www.w3.org/TR/html5/forms.html
Alice Pavarani3
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 Pavarani4
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 controlliHTML 5
Alice Pavarani5
Esempi di utilizzo di form1. 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
<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 action="mailto:[email protected]" method="post"> ... </form>
<form method="post"> ... </form>
Alice Pavarani6
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
<option> voci del menu <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 Pavarani7
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) email campo per l’inserimento di un indirizzo email 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 Pavarani8
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 Pavarani9
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 (email, file) pattern specifica una regular expression per controllare il valore inserito (text,
search, url, email, 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 Pavarani10
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 Pavarani11
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) email campo per l’inserimento di un indirizzo email 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
