Ipotizziamo di voler creare un form di inserimento da proporre all’utente utilizzando quanto più possibile le nuove possibilità offerte:
<!doctype html>
<html>
<head>
<title>Disegnare i forms con HTML5</title>
<style>
body {
margin: 0; padding: 0;
font-size: 12px;
font-family: "Verdana", sans-serif;
color: #444;
}
section {
width: 400px;
height: 230px;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-top: 10px;
padding: 15px;
padding-top: 5px;
}
fieldset {
clear: left;
border: 0px;
border-bottom: 1px dotted #dcdcdc;
padding: 10px;
height: 30px;
}
label {
font-weight: bold;
width: 100px;
float: left;
}
input, textarea {
border: 1px solid #dcdcdc;
padding: 4px;
width: 250px;
color: #444;
float: left;
}
button {
margin-left: 100px;
border: 1px solid #ccc;
padding: 10px;
color: #444;
}
.firstSection {
border-top: 1px solid #ccc;
height: 200px;
}
.lastSection {
border-bottom: 1px solid #ccc;
height: 185px;
}
.longLine {
height: 70px;
}
.note {
font-size: 11px;
font-style: italic;
}
.noBottomBorder {
border: 0;
}
</style>
</head>
<body>
<form>
<section class="firstSection">
<h2>Dati anagrafici</h2>
<p class="note">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 class="lastSection">
<h2>Informazioni extra</h2>
<fieldset class="longLine">
<label>Commenti</label><textarea name="commenti" id="commenti" placeholder="www.sito.com" maxlength="100" wrap="soft"></textarea>
</fieldset>
<fieldset class="noBottomBorder">
<button name="commenti" id="commenti">Invia</button>
</fieldset>
</section>
</form>
</body>
</html>Ed ecco il risultato così come renderizzato da Opera, corredato da commenti:
Il comportamento in caso di click sul submit ed email mancante:
Il medesimo caso gestito da Firefox:
Ecco un form specifico per i campi relativi alle date:
<!doctype html>
<html>
<head>
<title>Disegnare i forms con HTML5 [ le date ]</title>
<style>
body {
margin: 0; padding: 0;
font-size: 12px;
font-family: "Verdana", sans-serif;
color: #444;
}
section {
width: 400px;
height: 420px;
margin: 0 auto;
border: 1px solid #ccc;
margin-top: 10px;
padding: 15px;
padding-top: 5px;
}
fieldset {
clear: left;
border: 0px;
border-bottom: 1px dotted #dcdcdc;
padding: 10px;
height: 30px;
}
label {
font-weight: bold;
width: 100px;
float: left;
}
input {
border: 1px solid #dcdcdc;
padding: 4px;
width: 250px;
color: #444;
float: left;
}
</style>
</head>
<body>
<section>
<h2>Input con types relativi alle date</h2>
<form>
<fieldset>
<label>Time</label><input name="t" id="t" type="time">
</fieldset>
<fieldset>
<label>Datetime</label><input name="dt" id="dt" type="datetime">
</fieldset>
<fieldset>
<label>Week</label><input name="w" id="w" type="week">
</fieldset>
<fieldset>
<label>Month</label><input name="m" id="m" type="month">
</fieldset>
<fieldset>
<label>Datetime-Local</label><input name="dtl" id="dtl" type="datetime-local">
</fieldset>
</form>
</section>
</body>
</html>Il risultato in Opera:
Vediamo la sintassi corretta per i controlli range e color:
<fieldset>
<label>Range</label><input name="ra" id="ra" type="range" min="0" max="10" step="2">
</fieldset>
<fieldset>
<label>Color</label><input name="color" type="color" id="color" type="datetime">
</fieldset> Opera renderizza in questo modo i due controlli:
Pubblicitร
