Laboratorio di Tecnologie Web HTML: Form Dott. Stefano Burigat www.dimi.uniud.it/burigat 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. <!DOCTYPE html> <html> <head> <title>Iscrizione alla mailing list</title> </head> <body> <h1>Iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="post"> <p>Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti.</p> <div> <p> Nome: <input type="text" name="username" /> </p> </div> <div> <p> Email: <input type="text" name="email" /> </p> </div> <div> <p> <input type="submit" value="Iscriviti" /> </p> </div> </form> </body> </html> 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 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 [email protected] nel campo Email dell'esempio precedente. Tale informazione viene codificata automaticamente dal browser nel modo seguente username=Pinco%20Pallino&email=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. 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 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 dell'attributo “cols” (che deve essere specificato) durante la digitazione. <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Lascia un commento</h1> <form action="script/mailinglist.php" method="get"> <p>Usa questo form per darci un'opinione sui nostri prodotti.</p> <div> <p> Nome: <br/> <input type="text" name="username" /> </p> </div> <div> <p> Commento: <br /> <textarea name="commento" placeholder="Max 10 caratteri" maxlength="15" wrap="hard" cols="5"></textarea> </p> </div> <div> <p> <input type="submit" value="Iscriviti" /> </p> </div> </form> </body> </html> 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 email ed altro. Per creare tali controlli, si utilizzano appositi valori dell'attributo “type” dell'elemento <input> (e si possono 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. <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Login</h1> <form action="script/login.php" method="post"> <p>Inserisci username e password per effettuare il login.</p> <div> <p> Username: <input type="text" name="username" /> </p> </div> <div> <p> Password: <input type="password" name="pwd" maxlength="8" /> </p> </div> <div> <p> <input type="submit" value="Accedi" /> </p> </div> </form> </body> </html> Impostando l'attributo “type” dell'elemento <input> ai valori search, email, tel o url otteniamo rispettivamente dei controlli per l'inserimento di un campo di ricerca, di indirizzi email, 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 email). Se il tipo non è riconosciuto dal browser, i dati inseriti vengono considerati testo generico. <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Input types</h1> <form action="script/form.php" method="get"> <div> <p> Email: <br/> <input type="email" name="email" /> </p> </div> <div> <p> Search: <br/> <input type="search" name="search" /> </p> </div> <div> <p> Telephone: <br/> <input type="tel" name="phone" /> </p> </div> <div> <p> URL: <br/> <input type="url" name="url" /> </p> </div> <div> <p> <input type="submit" value="Accedi" /> </p> </div> </form> </body> </html> 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). <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Login</h1> <form action="script/login.php" method="post"> <p>Inserisci email e password per effettuare il login.</p> <div> <p> Email: <br/> <input type="email" name="email" /> </p> </div> <div> <p> Password: <br/> <input type="password" name="pwd" maxlength="8" /> </p> </div> <div> <p> <input type="submit" value="Accedi" /> <input type="reset" /> </p> </div> </form> </body> </html> 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 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). <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Login</h1> <form action="script/login.php" method="get"> <p>Inserisci email e password per effettuare il login.</p> <div> <p> Email: <br/> <input type="email" name="email"> </p> </div> <div> <p> Password: <br/> <input type="password" name="pwd" maxlength="8"> </p> </div> <div> <p> <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> </p> </div> </form> </body> </html> I pulsanti di tipo checkbox e di tipo radio supportano la creazione di gruppi di opzioni e la selezione di elementi 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). <!DOCTYPE html> <html> <head> <title>Iscrizione alla mailing list</title> </head> <body> <h1>Iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get"> <p>Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti.</p> <div> <p> Nome: <br/> <input type="text" name="username" /> </p> </div> <div> <p> Email: <br/> <input type="email" name="email" /> </p> </div> <div> 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> </div> <div> 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> </div> <div> <input type="submit" value="Iscriviti" /> </div> </form> </body> </html> 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. <!DOCTYPE html> <html> <head> <title>Iscrizione alla mailing list</title> </head> <body> <h1>Iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get"> <p>Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti.</p> <div> <p> Nome: <br/> <input type="text" name="username" /> </p> </div> <div> <p> Email: <br/> <input type="email" name="email" /> </p> </div> <div> <p> Età: <br/> <select name="age"> <option>Meno di 24</option> <option selected>Tra 25 e 44</option> <option>Oltre 45</option> </select> </p> </div> <div> <p> 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> </p> </div> <div> <input type="submit" value="Iscriviti" /> </div> </form> </body> </html> 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. <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Datalist</h1> <form action="script/list.php" method="post"> <p>Titolo di studio: <input type="text" list="titolostudio" name="educazione"> <datalist id="titolostudio"> <option value="Laurea" /> <option value="Laurea Magistrale" /> <option value="PhD" /> </datalist> </form> </body> </html> 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. <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Iscrizione alla conferenza</h1> <form action="script/signup.php" method="post" enctype="multipart/form-data"> <p>Compila i campi sottostanti per iscriverti alla conferenza.</p> <div> <p> Nome: <br/> <input type="text" name="username" /> </p> </div> <div> <p> Email: <br/> <input type="email" name="email" /> </p> </div> <div> <p> Curriculum: <br/> <input type="file" name="curriculum" /> </p> </div> <div> <input type="submit" value="Iscriviti" /> </div> </form> </body> </html> 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. <!DOCTYPE html> <html> <head> <title>Iscrizione alla mailing list</title> </head> <body> <h1>Iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get"> <p>Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti.</p> <div> <p> Nome: <br/> <input type="text" name="username" /> </p> </div> <div> <p> Email: <br/> <input type="email" name="email" /> </p> </div> <div> <input type="hidden" name="returnpage" value="thankyou.html"/> </div> <div> <input type="submit" value="Iscriviti" /> </div> </form> </body> </html> 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>). <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Lista dei controlli per l'inserimento di data e ora</h1> <form action="script/dataora.php" method="post"> <ul> <li>Data: <br/> <input type="date" name="date" value="2014-0312"/></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="2014-01-14T03:13:00-5:00"/></li> <li>Data e ora (senza fuso): <br/> <input type="datetime-local" name="datetimelocal" value="2014-01-14T03:13:00"/></li> <li>Mese: <br/> <input type="month" name="month" value="201401"/></li> <li>Settimana: <br/> <input type="week" name="week" value="2014W2"/></li> </ul> </form> </body> </html> 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). <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <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> </form> </body> </html> 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 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. <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <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> <div> <p> <input type="submit" value="Invia" /> </p> </div> </form> </body> </html> 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). <!DOCTYPE html> <html> <head> <title>Titolo</title> </head> <body> <h1>Altri elementi HTML5</h1> <form action="script/other.php" method="post"> <ul> <li>Color: <br/> <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> </form> </body> </html> 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 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. <!DOCTYPE html> <html> <head> <title>Iscrizione alla mailing list</title> </head> <body> <h1>Iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get" id="form-mailinglist"> <p>Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti.</p> <div> <p> <label for="form-mailinglistusername">Nome:</label> <br/> <input type="text" name="username" id="formmailinglist-username" /> </p> </div> <div> <p> <label for="form-mailinglistemail">Email:</label> <br/> <input type="email" name="email" id="formmailinglist-email" /> </p> </div> <div> 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> </div> <div> <input type="submit" value="Iscriviti" /> </div> </form> </body> </html> 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. <!DOCTYPE html> <html> <head> <title>Iscrizione alla mailing list</title> </head> <body> <h1>Iscrizione alla mailing list</h1> <form action="script/mailinglist.php" method="get" id="form-mailinglist"> <p>Iscriviti alla mailing list per ottenere informazioni sui nostri prodotti.</p> <fieldset> <legend>Informazioni obbigatorie</legend> <div> <p> <label for="form-mailinglistusername">Nome:</label> <br/> <input type="text" name="username" id="form-mailinglist-username" required /> </p> </div> <div> <p> <label for="form-mailinglistemail">Email:</label> <br/> <input type="email" name="email" id="formmailinglist-email" required /> </p> </div> </fieldset> <fieldset> <legend>Informazioni opzionali</legend> <div> 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> </div> </fieldset> <div> <input type="submit" value="Iscriviti" /> </div> </form> </body> </html>
Scarica
