XHTML
HTML5
CSS2
CSS3
XHTML Forms
HTML5 Forms
Solutions
A Visual Guide of HTML 5 Form's Tags
legend
element
syntax
visual result
number
<input type="number" min="1" max="12" />
range
<input type="range" min="0" max="255" step="8" value="64" />
tel
<input type="tel" />
email
<input type="email" />
search
<input type="search" />
url
<input type="url" />
label
<label for="idt">label</label>
label
list
<input type="text" list="values" name="lang" size="10" id="idt" />
datalist
<datalist id="values"><option value="XHTML">XHTML 1.x strict</option><option value="HTML5">HTML 5</option><option value="CSS3">CSS 3</option></datalist>
XHTML 1.x strict
HTML 5
CSS 3
meter
<meter min="0" max="10" value="7"></meter>
output
<output id="out">output</output>
output
progress
<progress value="25" max="100"></progress>
autofocus
<input type="text" autofocus />
pattern
<input type="text" pattern="[0-7]{3}" size="3" maxlength="3" title="http://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html" />
placeholder
<input type="text" placeholder="language" />
required
<input type="text" required />
autocomplete
<input type="text" autocomplete="off" />
date
<input type="date" style="background-color:#ccc" />
time
<input type="time" style="background-color:#ccc" />
datetime_local
<input type="datetime-local" style="background-color:#ccc" />
month
<input type="month" style="background-color:#ccc" />
week
<input type="week" style="background-color:#ccc" />
color
<input type="color" style="background-color:#ccc" />
reset
<input type="reset" value="Reset" />
submit
<input type="submit" value="Submit" />
