Forms

All of the form elements demonstrated below can be used as standalone elements, but also as part of a form. In the second case they should be wrapped in a <form> html tag.

Input fileds

The input fileds should have the following structure. The id property in the <input> tag should be the same as the for property of the <label> tag.

<form>
    <div class="input-field">
        <input type="text" id="occupation">
        <label for="occupation">Your occupation</label>
    </div>
</form>

Select boxes

<form>
    <div class="select-box">
        <select>
            <option>All positions</option>
            <option>UI/UX Designer</option>
            <option>Product Designer</option>
            <option>Web Developer</option>
            <option>Visual Designer</option>
            <option>Stock Broker</option>
        </select>
    </div>
</form>

Checkboxes

A checkbox can be used as standalone, or as part of a list of checkboxes. In the second case they should be wrapped in a <ul class="checkbox-list"> wrapper. The id property in the <input> tag should be the same as the for property of the <label> tag.

<form>
    <ul class="checkbox-list">
        <li>
            <input class="checkbox" id="checkbox-1" type="checkbox" value="value1" checked>
            <label for="checkbox-1">UX Research</label>
        </li>
        <li>
            <input class="checkbox" id="checkbox-2" type="checkbox" value="value2">
            <label for="checkbox-2">UX/UI Design</label>
        </li>
        <li>
            <input class="checkbox" id="checkbox-3" type="checkbox" value="value3">
            <label for="checkbox-3">Frontend Development</label>
        </li>
        <li>
            <input class="checkbox" id="checkbox-4" type="checkbox" value="value3" disabled>
            <label for="checkbox-4">Release (disabled)</label>
        </li>
    </ul>
</form>

Radio buttons

A radio button can be used as standalone, or as part of a list of radio buttons. In the second case they should be wrapped in a <ul class="radio-list"> wrapper. The id property in the <input> tag should be the same as the for property of the <label> tag.

<form>
    <ul class="radio-list">
        <li>
            <input id="radio-1" name="radio" type="radio" checked>
            <label for="radio-1">Web application</label>
        </li>
        <li>
            <input id="radio-2" name="radio" type="radio">
            <label  for="radio-2">Android app</label>
        </li>
        <li>
            <input id="radio-3" name="radio" type="radio">
            <label  for="radio-3">iOS app</label>
        </li>
        <li>
            <input id="radio-4" name="radio" type="radio" disabled>
            <label for="radio-4">All the above (disabled)</label>
        </li>
    </ul>    
</form>