HPUCSS Framework

Default Form Style

The default form behavior. The label floats on top of each field.

Name

Textarea 1

Select 1

HTML


<form class="hpu-form" data-hpu="form">
    <div class="input-group">
        <label for="input1">Name</label>

        <input type="text" id="input1" value="John Doe">
    </div>

    <div class="input-group">
        <label for="textarea1">Textarea 1</label>

        <textarea id="textarea1""></textarea>
    </div>

    <div class="input-group">
        <label for="select1">Select 1</label>

        <select id="select1">
            <option value="1"">Option 1</option>
            <option value="2"">Option 2</option>
            <option value="3"">Option 3</option>
        </select>
    </div>
</form>

Programmatic Form

Forms can be activated programmatically with options available to customize their behavior. When using this approach, simply add the id attribute to the <form> parent element, then call that id into your script.

Name

Textarea 1

Select 1

HTML


<form class="hpu-form" id="formDemo">
    ...
</form>

JS


let formDemo = new HPU.Form('#formDemo');

// Manually enable the defined form
formDemo.floatLabels();

Form Options

Form options to change the floating behavior of each field:

JS


let form = new HPU.Form('#formId', {options});

// Manually enable the defined form
form.floatLabels();

Form options are as follows:

Options	Type	Description	Value(s)	Default
style	Integer	Choose the style between 0, 1 and 2. This is used to create the floating label style and behavior.	0, 1, 2	1

How the different styles look like:

TIP: Try changing the values inside of each input field to see the floating label behavior for each style.

JS


let form2a = new HPU.Form('#form2a', {
    style : 0
});

// Manually enable the defined form
form2a.floatLabels();

JS


let form2b = new HPU.Form('#form2b', {
    style : 1
});

// Manually enable the defined form
form2b.floatLabels();

JS


let form2c = new HPU.Form('#form2c', {
    style : 2
});

// Manually enable the defined form
form2c.floatLabels();

Forms with Background Colors

Apply contrasting color against the background color for better visibility. For each of the .input-group, add the matching color used on the background by adding the class .bg-{color}. For example, if the background color used is .hpu-bg-1st, then the .input-group must have the class .bg-1st to give the input field contrast. See HPUCSS Colors for color usage guides.

JS


let form3a = new HPU.Form('#form3a', {
    style : 0
});

// Manually enable the defined form
form3a.floatLabels();

HTML


<div class="hpu-bg-1st">
    <form id="form3a">
        <div class="input-group bg-1st">
            <label for="input3a">Name</label>

            <input type="text" id="input3a">
        </div>
    </form>
</div>

JS


let form3b = new HPU.Form('#form3b', {
    style : 1
});

// Manually enable the defined form
form3b.floatLabels();

HTML


<div class="hpu-bg-5th">
    <form id="form3b">
        <div class="input-group bg-5th">
            <label for="input3b">Name</label>

            <input type="text" id="input3b">
        </div>
    </form>
</div>

JS


let form3c = new HPU.Form('#form3c', {
    style : 2
});

// Manually enable the defined form
form3c.floatLabels();

HTML


<div class="hpu-bg-6th">
    <form id="form3c">
        <div class="input-group bg-6th">
            <label for="input3c">Name</label>

            <input type="text" id="input3c">
        </div>
    </form>
</div>

Form Validation

Form feedback to show users if the input is meeting the required pattern or not.

TIP: To use floating style validation, apply the novalidate attribute in the form opening tag to avoid the default HTML validation.

Also, .helper-text class can also be set. For each of the .input-group underneath the input, select, or textarea, provide a span with .helper-text class to show validation messages whether error or success messages.

Lastly, add either the .valid or .invalid class to the label, input|select|textarea, and the .helper-text to show the validation feedback styles.

First Name Looks Good!

Last Name Looks Good!

Email Invalid Email

City City not found!

State Please select a state

Zip Invalid Zip!

HTML


<form class="hpu-form" data-hpu="form" novalidate>
    <div class="hpu-row">
        <div class="col-lg-3 input-group">
            <label for="form4Fname" class="valid">First Name</label>
            <input type="text id="form4Fname" class="valid" value="John" required>
            <span class="helper-text valid">Looks Good!</span>
        </div>

        <div class="col-lg-3 input-group">
            <label for="form4Lname" class="valid">Last Name</label>
            <input type="text id="form4Lname" class="valid" value="From HPU" required>
            <span class="helper-text valid">Looks Good!</span>
        </div>

        <div class="col-lg-6 input-group">
            <label for="form4Email" class="invalid">First Name</label>
            <input type="text id="form4Email" class="invalid" value="aa bb .cc" required>
            <span class="helper-text invalid">Invalid Email</span>
        </div>
    </div>

    <div class="hpu-row">
        <div class="col-lg-5 input-group">
            <label for="form4City" class="invalid">City</label>
            <input type="text id="form4City" class="invalid" value="Can't Find City" required>
            <span class="helper-text invalid">City not found!</span>
        </div>

        <div class="col-lg-4 input-group">
            <label for="form4State" class="invalid">State</label>
            <select type="text id="form4State" class="invalid" required>
                <option value="...">...</option>
                ...
            </select>

            <span class="helper-text invalid">Please select a state</span>
        </div>

        <div class="col-lg-3 input-group">
            <label for="form4Zip" class="invalid">Zip</label>
            <input type="text id="form4Zip" class="invalid" value="1234567" required>
            <span class="helper-text invalid">Invalid Zip!</span>
        </div>
    </div>
</form>