HTML I Form in HTML5 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 2 Alice Pavarani 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 3 Alice Pavarani 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” /“off” suggerisce il (default) completamento automatico di alcuni controlli 4 Alice Pavarani Esempi di utilizzo di form 1. Form per l’inserimento di nome e cognome <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> 2. Mandare una mail con i dati raccolti da un form <form action="mailto:[email protected]" method="post"> ... </form> 3. Interagire con script eseguiti sul client (es. Javascript) <form method="post"> ... </form> in questo caso manca l’attributo action 5 Alice Pavarani Gli elementi di un form campo di inserimento <textarea> area di testo editabile su più righe <button> bottone cliccabile <datalist> campo di inserimento guidato da menu a tendina <input> <option> <select> voci del menu menu a tendina selezionabile voci del menu <optgroup> raggruppa le voci del menu definite da <option> <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 6 Alice Pavarani Tag <input> Specifica diversi tipi di controlli di interazione di un form, a seconda del suo attributo type: 7 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 Alice Pavarani Tag <input> 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 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 9 Alice Pavarani Attributi personalizzati del tag <input> Attributi particolari: 10 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 incremento step value valore di default Alice Pavarani Appendice - Tag <input> Specifica diversi tipi di controlli di interazione di un form, a seconda del suo attributo type: 11 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 Alice Pavarani
© Copyright 2024 Paperzz
