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=”nome@dominio.it” 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:

Lascia un commento