I forms
HTML5 offre una serie estesa di attributi per ridurre al massimo la scrittura di codice javascript. Elenco dei nuovi attributi:
-
tel, il controllo formale è a cura dello sviluppatore;
-
search,
-
url, indirizzo internet;
-
email, il controllo è solo formale;
-
datetime,
-
date, data nella forma yyyy-mm-dd;
-
month, data nella forma yyyy-mm;
-
week, data nella forma yyyy-Www;
-
time, orario nella forma hh:mm;
-
datetime-local, data con localizzazione;
-
number,
-
range, valorizzazione di min, max e step;
-
color, utilizza un color-chooser;
Esempio di form:
| <!doctype html> <html> <head> <title>Disegnare i forms con HTML5</title> </head> <body> <form> <section> <h2>Dati anagrafici</h2> <p>L’asterisco (*) indica i campi obbligatori</p> <fieldset> <label>Nome *</label><input name=”nome” id=”nome” type=”text” required autofocus=”autofocus”> </fieldset> <fieldset> <label>Numero Figli</label><input name=”n_figli” id=”n_figli” type=”number” min=”0″ max=”10″> </fieldset> </section> <section> <h2>Dati commerciali</h2> <fieldset> <label>Telefono *</label><input name=”telefono” id=”telefono” type=”tel” required> </fieldset> <fieldset> <label>P. Iva</label><input name=”piva” id=”piva” type=”text”> </fieldset> <fieldset> <label>Email *</label><input name=”email” id=”email” type=”email” placeholder=”[email protected]” required> </fieldset> <fieldset> <label>Sito Personale</label><input name=”sito” id=”sito” type=”url” placeholder=”www.sito.com”> </fieldset> </section> <section> <h2>Informazioni extra</h2> <fieldset> <label>Commenti</label><textarea name=”commenti” id=”commenti” placeholder=”www.sito.com” maxlength=”100″ wrap=”soft”></textarea> </fieldset> <fieldset> <button name=”commenti” id=”commenti”>Invia</button> </fieldset> </section> </form> </body> </html> |
Please follow and like us:
