Form Elements

<form action="#" title="formtips">
    <fieldset>
        <legend>form typs</legend>
        <div class="row">
            <label for="input"><span>Input Box (Active):</span></label>
            <div class="input-holder"><input type="text" placeholder="Text Field with Active Box" class="active" id="input"></div>
        </div>
        <div class="row">
            <label for="input1"><span>Input Box (INActive):</span></label>
            <div class="input-holder"><input type="text" placeholder="Text Field with Inactive Box" id="input1"></div>
        </div>
        <div class="row">
            <label for="input2"><span>Text Area:</span></label>
            <div class="input-holder">
                <textarea placeholder="Text goes here" id="input2"></textarea>
            </div>
        </div>
        <div class="row">
            <strong class="title-label"><span>Checkbox:</span></strong>
            <div class="checkbox-holder">
                <input type="checkbox" id="1">
                <label class="label" for="1">1</label>
                <input type="checkbox" id="2">
                <label class="label" for="2">2</label>
                <input type="checkbox" id="3">
                <label class="label" for="3">3</label>
            </div>
        </div>
        <div class="row">
            <strong class="title-label"><span>Radio box:</span></strong>
            <div class="radio-buttons">
                <div class="radio-holder">
                    <input type="radio" id="option1" name="option">
                    <label class="label" for="option1">Option 1 (Enabled)</label>
                </div>
                <div class="radio-holder">
                    <input type="radio" id="option2" name="option">
                    <label class="label" for="option2">Option 2 (Disabled)</label>
                </div>
            </div>
        </div>
        <div class="row">
            <label for="dropdown"><span>DROPDOWN:</span></label>
            <div class="select-holder">
                <select data-jcf='{"wrapNative": false}' id="dropdown">
                    <option>Community</option>
                    <option>Community</option>
                    <option>Community</option>
                </select>
            </div>
        </div>
        <div class="row">
            <strong class="title-label"><span>Select Box:</span></strong>
            <div class="select-block">
                <div class="jcf-scrollable">
                    <div class="select-box">
                        <ul class="select-list">
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <strong class="title-label"><span>Tags/Filter:</span></strong>
            <div class="tag-holder">
                <a href="#" class="tag">tag/filter reg<span class="ico"></span></a>
                <a href="#" class="tag">tag/filter ovr<span class="ico"></span></a>
            </div>
        </div>
        <div class="row">
            <div class="btn-holder">
                <input type="submit" class="btn" value="SUBMIT">
                <input type="submit" class="btn success" value="SUCCESS">
                <input type="submit" class="btn info" value="INFO">
                <input type="submit" class="btn warning" value="WARNING">
                <input type="submit" class="btn danger" value="DANGER">
                <input type="submit" class="btn clear" value="CLEAR">
            </div>
        </div>
    </fieldset>
</form>