Form Items

Text field

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <label for="text-input">Sample text input:</label>
    </div>

    <div class="form-item-input">
        <input type="text" name="text-input" id="text-input">
    </div>

</div>

Password field

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <label for="password">Sample password input:</label>
    </div>

    <div class="form-item-input">
        <input type="password" name="password" id="password">
    </div>

</div>

Textarea

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <label for="textarea-one">Sample textarea:</label>
    </div>

    <div class="form-item-input">
        <textarea id="textarea-one" name="comment" rows="10"></textarea>
    </div>

</div>

Select box

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <label for="select-item-one">Select an option:</label>
    </div>

    <div class="form-item-input">
        <select name="select-item-one" id="select-item-one">
            <option selected="" value="item-1">Item 1</option>
            <option value="item-2">Item 2</option>
            <option value="item-3">Item 3</option>
            <option value="item-4">Item 4</option>
            <option value="item-5">Item 5</option>
            <option value="item-6">Item 6</option>
            <option value="item-7">Item 7</option>
            <option value="item-8">Item 8</option>
        </select>
    </div>

</div>

Checkboxes

Check these out:

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <h4 class="label">Check these out:</h4>
    </div>

    <div class="form-item-input">
        <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
        <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    </div>

</div>

Radio buttons

Choose your favorite:
Show/hide markup
<div class="form-item">

    <fieldset class="bare">
    <legend class="label">Choose your favorite:</legend>

    <div class="form-item-input">
        <input type="radio" name="color" value="Red" id="colorRed"><label for="colorRed">Red</label>
        <input type="radio" name="color" value="Blue" id="colorBlue"><label for="colorBlue">Blue</label>
    </div>
    </fieldset>

</div>

File upload

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
      <label for="file-upload">Upload your file:</label>
    </div>

    <div class="form-item-input">
        <input type="file" name="file-upload" id="file-upload" />
    </div>

</div>