Boilerform

Use cases

Login form code:

<p>
    <label>
        <span class="input-label">Username</span>
        <input type="text" placeholder="Insert username" class="input-default input-block" />
    </label>
</p>
<p>
    <label>
        <span class="input-label">Password</span>
        <input type="password" placeholder="Insert password" class="input-default input-block input-error" />
        <span class="input-help">Wrong password, try again</span>
    </label>
</p>
<p>
    <label>
        <input type="checkbox" class="input-default">
        <span class="input-label">Remember password</span>
    </label>
</p>
<p>
    <button class="button button-secondary">Cancel</button>
    <button class="button button-success">Login</button>
</p>

Register form code:

<p>
    <label>
        <span class="input-label">Username</span>
        <input type="text" placeholder="Insert username" class="input-default input-block" />
    </label>
</p>
<p>
    <label>
        <span class="input-label">E-mail</span>
        <input type="email" placeholder="Insert e-mail" class="input-default input-block" />
    </label>
</p>
<p>Select gender</p>
<p>
    <label>
        <input type="radio" name="gender" class="input-default" />
        <span class="input-label">Masculine</span>
    </label>
</p>
<p>
    <label>
        <input type="radio" name="gender" class="input-default" />
        <span class="input-label">Feminine</span>
    </label>
</p>
<p>
    <label>
        <input type="radio" name="gender" class="input-default" />
        <span class="input-label">Other</span>
    </label>
</p>
<p>
    <label>
        <span class="input-label">Birthday</span>
        <br />
        <input type="date" class="input-default" placeholder="dd/mm/aaaa" />
    </label>
</p>
<p>
    <label>
        <span class="input-label">Select country</span>
        <select class="input-default input-block">
            <option disabled selected>Select country</option>
            <option>Brazil</option>
            <option>Trinidad Tobago</option>
        </select>
    </label>
</p>
<p>
    <label>
        <span class="input-label">Password</span>
        <input type="password" placeholder="Insert password" class="input-default input-block" />
    </label>
</p>
<p>
    <label>
        <span class="input-label">Suggestion</span>
        <textarea class="input-default input-block" rows="10" placeholder="Insert suggestion (Optional)"></textarea>
    </label>
</p>
<p>
    <label>
        <input type="checkbox" class="input-default input-error">
        <span class="input-label">I agree with <a href="">terms of use</a></span>
        <span class="input-help">Obligatory field</span>
    </label>
</p>
<p>
    <button class="button button-secondary">Cancel</button>
    <button class="button button-primary">Register</button>
</p>