<!DOCTYPE html>
fieldset>
<legend>Input</legend>
<form>
<div>
<label for="display-name"> Name:
<span class="warning">*(Allows only letters.)</span>
</label>
<input type="text" id="display-name" name="ip-display"
pattern="[A-Za-zs]+"
maxlength="5" minlength="2" value="Aa" required />
<span></span>
</div>
<div>
<label for="readonly-ip">ReadOnly:</label>
<input type="text" id="readonly-ip" name="ip-readonly"
placeholder="I'm read only." readonly />
</div>
<div>
<label for="disabled-ip">Disabled:</label>
<input type="text" name="ip-disabled"
id="disabled-ip"
value="I am disabled"
disabled />
</div>
<div>
<input type="submit" class="submit" value="Submit" />
</div>
</form>
</fieldset>
<fieldset>
<legend>Enter contact email</legend>
<label for="primary">Primary address:</label>
<input type="email" placeholder="drone@globex.com"
pattern=".+@globex.com" size="30" required
title="Must be a globex.com email address" />
<label for="secondary">Secondary addresses:</label>
<input type="email" placeholder="foo@this.com, bar@that.com"
size="35" multiple
title="Zero or more addresses, separated with ','" />
</fieldset>
<fieldset>
<legend>Choose some monster colors</legend>
<div>
<input type="color" id="head" name="color"
value="#e66465" />
<label for="head">Head</label>
</div>
<div>
<input type="color" id="body" name="color"
value="#f6b73c" />
<label for="body">Body</label>
</div>
<div>
<input type="color" id="feet" name="color"
value="#3f87a6" />
<label for="feet">Feet</label>
</div>
</fieldset>