Your Store:
Set

Forms Style Guide

Web Form Elements & Validation Examples

Form Elements

Label, Text, Number, Email, Password, Date, Time, URL, Phone, Textarea, Select, Date/Time, Combobox, Checkbox, Radio Button, Rangeslider

Checkbox
Radiobutton
 
HTML Example
                                                <label class="form-label">Label Example</label>
<input class="form-text" type="text" placeholder="" />
<input class="form-number" type="number" placeholder="" />
<input class="form-email" type="email" placeholder="" />
<input class="form-password" type="password" placeholder="Password Input Example" />
<input class="form-date" type="date" placeholder="" />
<input class="form-time" type="time" placeholder="" />
<input class="form-url" type="url" placeholder="" />
<input class="form-tel" type="tel" placeholder="" />
<textarea class="form-textarea"></textarea>
<select class="form-select cv-dropdown">
  <option value="UK">UK</option>
  <option value="Germany">Germany</option>
  <option value="France">France</option>
  <option value="">USA</option>
  <option value="">Canada</option>
</select>
<input class="form-datetime" placeholder="" />
<select class="form-combobox" placeholder="Select size...">
    <option>X-Small</option>
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
    <option>X-Large</option>
    <option>2X-Large</option>
</select>
<fieldset class="form-fieldset">
    <input class="form-checkbox" type="checkbox"> Checkbox
</fieldset>
<fieldset class="form-fieldset">
    <input class="form-radiobutton" type="radio"> Radiobutton
</fieldset>
<div class="range-slider" data-min="1" data-max="100">
    <input value="20" readonly />
    <input value="70" readonly />
</div>
                                            

Form Elements (Read Only)

Label, Text, Number, Email, Password, Date, Time, URL, Phone, Textarea, Select, Date/Time, Combobox, Checkbox, Radio Button, Rangeslider

 

Form Validation

Error, Warning, Info & Success validation styles for form elements.

Checkbox
Radiobutton
 
HTML Example
                                                <div class="validation error">
    <div class="tooltip-top tooltip-rounded tooltip-error" data-tooltip="Error Message Tooltip">
        <input class="form-text" type="text" placeholder="Text Input Example" />
    </div>
</div>