ElementalCSS

Forms

Buttons

Button Button
<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" />
<button disabled>Button</button>
<input disabled type="submit" value="Button" />
<input disabled type="reset" value="Button" />
<input disabled type="button" value="Button" />

Input

<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>

<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

<textarea></textarea>

Select

<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>

Radio

<input type="radio" />

Checkbox

<input type="checkbox" />

Label

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

Fieldset & Legend

A Legend

A Legend

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