What is the markup of a form row?

[jeroenransijn]

I would like to start a thread which main job is to figure out what the best approach is to creating a form row. The requirements for a basic form row:

• input field / input group
• validation icons
• notifications

Take a look at Bootstrap I think they did a lot of stuff right.

Example with FontAwesome for validation icons

Don't pay too much attention to the validation icons.

<div class="form-row">
    <div class="validation-icons">
        <span class="fa-stack">
            <i class="fa fa-circle fa-stack-1x fa-inverse validation-icons__icon"></i>
            <i class="fa fa-exclamation-circle fa-stack-1x validation-icons__icon"></i>
        </span>
        <span class="fa-stack">
            <i class="fa fa-circle fa-stack-1x fa-inverse validation-icons__icon"></i>
            <i class="fa fa-check-circle fa-stack-1x is-check-valid validation-icons__icon"></i>
        </span>
    </div>

    <div class="input-group">
        <input type="text" name="name" id="name" required />
    </div>

    <div class="form-row__notifications">
        <div class="input-notification input-notification--point-up" role="alert">
            Your name is not correct
        </div>
    </div>
</div>

What classnames to use

• What needs to decided wether or not the input elements need a class by default. Modifiers are welcome though.
• What class should the input-notification have? Possibly input-group-notification.

A form element is not always necessary

An input might not have to be within a form. So it is not necessary to make the elements a child of of the form (i.e. not form__row, form__input-group).

The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.

Using AngularJS for inline form validation

I want to make an example form which uses AngularJS for the validation. I will probably put this in a separate repo.