Patterns

A responsive system to support designers, developers and teams to begin the build of products, apps and services based on a core collection of flexible consistent elements.

 

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.

  • Example help text Please provide a value for example field
  • Example help text Please provide a value for example field
  • Checkbox
  • Radio
<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

  • Example block-level help text 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>