Forms

Forms Forms contain form elements to collect information from users

Form Elements

Structure

Users scan pages and screens, rather than read them. To facilitate this behaviour, it is advisable to use a single-column layout. Indeed, single-column forms are faster to complete than multi-column ones. However, it is possible to place short and logically related fields on the same row, such as for the city and zip code.

If your form has several questions, group related ones into logical sections. Provide the right amount of white space between sections to distinguish them visually. Another way to make the form look simpler is to minimize the number of fields visible at one time, breaking long forms into steps.

Inputs

The .form-control is a container that wraps an input and its associated label (input, select, and textarea).

                HTML
                
                    Copy
                
<div class="form-control">
    <label for="form-example-1">Label</label>
    <input type="text" id="form-example-1" />
</div>

Required Indicator

For elements that are required for form submission, show a visual indicator, in addition to a required attribute on the element. This visual indicator is created by adding .is-required to the label (for text inputs), or the fieldset legend (for checkboxes and radio buttons)

                HTML
                
                    Copy
                
            

                
<form>
    <fieldset>
        <legend class="qw-legend-checkbox is-required">Group Label</legend>
        <div class="qw-checkbox">
            <input type="checkbox" name="checkbox-example-1" id="checkbox-example-1" required value="1" />
            <label for="checkbox-example-1">Checkbox 1</label>
        </div>
        <div class="qw-checkbox">
            <input type="checkbox" name="checkbox-example-2" id="checkbox-example-2" required value="1" />
            <label for="checkbox-example-2">Checkbox 2</label>
        </div>
    </fieldset>
    <div class="form-group">
        <label for="input-1" class="is-required">Label</label>
        <input type="text" id="input-1" class="form-control" />
    <div>
    <button type="submit" class="btn btn-primary">Button</button>
</form>
                
            

Form Validation