Form Input

<form class="form">
    <fieldset>
        <legend class="h3">Input Type Examples</legend>
        <ul class="u-list-unstyled">
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="text-sample">Text</label>
                    <input type="text" name="text-sample">
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="email-sample">Email</label>
                    <input type="email" name="email-sample">
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="phone-sample">Phone</label>
                    <input type="tel" name="phone-sample">
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="number-sample">Number</label>
                    <input type="number" name="number-sample">
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <input type="submit" class="btn" value="Submit">
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
        </ul>
    </fieldset>
    <fieldset>
        <legend class="h3">Input State Examples (FPO)</legend>
        <ul class="u-list-unstyled">
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="hover-sample">Hover State</label>
                    <input type="text" class="hovered" name="hover-sample">
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="focus-sample">Focus State</label>
                    <input type="text" class="focused" name="focus-sample">
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="disabled-sample">Disabled State</label>
                    <input type="text" name="disabled-sample" disabled>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <input type="submit" class="btn" value="Submit" disabled>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper has-error">
                    <label for="error-sample">Error State</label>
                    <input type="text" name="error-sample">
                    <p class="input__error-message">This is a sample error message.</p>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
        </ul>
    </fieldset>
</form>
<!-- /.form -->