Forms

Buttons

View the code sample. This demo covers lots of different button types.

Button Button

Code Example 
<p><a class="btn">Button</a>
<a role="button">Button</a>
<button>Button</button>
<input type="submit" value="Button" />
<input type="reset" value="Button" />
<input type="button" value="Button" /></p>

Buttons (disabled)

Code Example 
<p><button disabled="">Button</button>
<input disabled="" type="submit" value="Button" />
<input disabled="" type="reset" value="Button" />
<input disabled="" type="button" value="Button" /></p>

Input

Code Example 
<p><input type="text" placeholder="Text Input" /></p>
<p><input type="email" placeholder="Email Address" /></p>
<p><input type="number" placeholder="Number" /></p>
<p><input type="address" placeholder="Address" /></p>
<p><input type="phonenumber" placeholder="Phone Number" /></p>
<p><input type="url" placeholder="URL" /></p>

Input (disabled)

Code Example 
<p><input disabled="" type="text" placeholder="Text Input" /></p>
<p><input disabled="" type="email" placeholder="Email Address" /></p>
<p><input disabled="" type="number" placeholder="Number" /></p>

Textarea

Code Example 
<textarea></textarea>

Select

Code Example 
<p><select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select></p>

Checkboxes

Code Example 
<p><input type="checkbox" checked="" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" disabled="" /></p>

Radio Boxes

Code Example 
<p><input type="radio" checked="" name="radio-test" />
<input type="radio" name="radio-test" />
<input type="radio" name="radio-test" />
<input type="radio" name="radio-test" />
<input type="radio" disabled="" /></p>

Label

Code Example 
<p><label for="label-test">This is a label</label>
<input type="text" id="label-test" /></p>

Fieldset & Legend

A Legend

A Legend
Code Example 
<fieldset>
	<legend>A Legend</legend>
</fieldset>
<fieldset>
	<legend><h2>A Legend</h2></legend>
</fieldset>

File Upload

Code Example 
<p><input type="file" accepted="image/*" /></p>

File Upload Dropzone

Adds a dropzone effect to the file upload input to show you can drag and drop files.

Code Example 
<p><input type="file" class="dropzone" accepted="image/*" /></p>

Color Picker

Code Example 
<p><input type="color" value="#cc00cc" /></p>