6 Forms markup
Basic elements. Covers styles used for forms, such as the <input>
and <select>
elements.
Please check the required details are completed
There was 1 error found in the information you supplied.
<div class="alert alert--danger">
<h2 class="beta">Please check the required details are completed</h2>
<p>There was 1 error found in the information you supplied.</p>
<ul>
<li class="list__item list--numeric">
<a tabindex="3" href="#exampleInputPassword2">Please supply details for 'Password'.</a>
</li>
</ul>
</div>
<form class="form" role="form">
<ul>
<li>
<label for="exampleText1">Textfield</label>
<span class="help-block">Example help text</span>
<input type="text" id="exampleText1" name="exampleText1" />
<span class="field-validation-error">Please provide a value for example field</span>
</li>
<li>
<label for="exampleInputEmail1">Email address</label>
<span class="help-block">Example help text</span>
<input type="email" placeholder="Enter email" title="Example help text" />
<span class="field-validation-error">Please provide a value for example field</span>
</li>
<li>
<label for="exampleInputPassword1">Password</label>
<input type="password" placeholder="Password" id="exampleInputPassword1" />
</li>
<li>
<label for="exampleTextarea1">Text area</label>
<textarea cols="30" rows="4" id="exampleTextarea1"></textarea>
</li>
<li class="row">
<label for="inlineInput1" class="col medium_12">Inline input</label>
<div class="col medium_9">
<input type="text" id="inlineInput1" />
</div>
<div class="col medium_3">
<button class="btn btn--block" class="">Search</button>
</div>
</li>
<li>
<label for="exampleDropdown1">Dropdown</label>
<select id="exampleDropdown1">
<option value="">Please select ...</option>
<option value="Edinburgh">Edinburgh</option>
<option value="Frankfurt">Frankfurt</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Montreal">Montreal</option>
</select>
</li>
<li>
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile" />
<li>
<li>
<fieldset>
<legend>Checkbox</legend>
<label for="exampleCheckbox1">
<input type="checkbox" checked="checked" value="Forms" id="exampleCheckbox1" />
Forms
</label>
<label for="exampleCheckbox2">
<input type="checkbox" value="Pages" id="exampleCheckbox2" />
Pages
</label>
<label for="exampleCheckbox3">
<input type="checkbox" value="Directories" id="exampleCheckbox3" />
Directories
</label>
</fieldset>
</li>
<li>
<fieldset>
<legend>Radio</legend>
<label for="exampleradio1">
<input type="radio" class="checkbox" value="One" id="xforms_Radio_0" />
One
</label>
<label for="exampleradio2">
<input type="radio" class="checkbox" checked="checked" value="Two" id="exampleradio2" />
Two
</label>
<label for="exampleradio3">
<input type="radio" class="checkbox" value="Three" id="exampleradio3" />
Three
</label>
</fieldset>
</li>
<li class="cf">
<button class="btn">Button default style</button>
<button class="btn btn--primary">Button primary style</button>
<button class="btn btn--secondary">Button secondary style</button>
</li>
<li class="cf">
<input class="btn" type="submit" value="Input default style" />
<input class="btn btn--primary" type="submit" value="Input primary style" />
<input class="btn btn--secondary" type="submit" value="Input secondary style" />
</li>
</ul>
</form>
6.1 Horizontal Form
Horizontal form example introduction text to go here
<form class="form" role="form">
<ul>
<li class="row">
<label for="exampleInputEmail5" class="col medium_3">Email address</label>
<div class="col medium_9">
<input type="email" id="exampleInputEmail5" placeholder="Enter email">
</div>
</li>
<li class="row">
<label for="exampleInputPassword5" class="col medium_3">Password</label>
<div class="col medium_9">
<input type="password" id="exampleInputPassword5" placeholder="Password">
</div>
</li>
<li class="row">
<label for="exampleInputFile5" class="col medium_3">File input</label>
<div class="col medium_9">
<input type="file" id="exampleInputFile5">
<p class="gamma">Example block-level help text here.</p>
</div>
</li>
<li class="checkbox push_3">
<label>
<input type="checkbox"> Check me out
</label>
</li>
<button type="submit" class="btn pull-right">Submit</button>
</ul>
</form>