ALF Forms

  • There are three types of forms: without a form class, .std and .simple (see examples below).
  • Additional classes can be added to the form:
    • .inline-errors: used to mark individual rows with errors or warnings. See examples in the tabs below.
    • .full-width-controls: used to make controls use all the available space. This is the default behaviour for phone resolutions, but you can apply it to all resolutions by using this class.
    • .std-controls-phone: by default, at phone resolutions the controls will use all the available space. Use this class to disable this behaviour.
  • To add focus, use HTML5's native autofocus.
  • To disable a field, use the disabled attribute and the .disabled class.

Without a form class, a form has no layout, though it will be styled. This might not be especially useful, unless you want to layout the form yourself from scratch.

class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel
class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Error (class .note.error)
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel
class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel

In .std forms, the labels float on the left. They are responsive, phone-down.

class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel
class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Error (class .note.error)
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel
class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel

In .simple forms, the labels are above the fields. They are responsive by nature.

class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel
class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Error (class .note.error)
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel
class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel
class .note on a span, after the control
class .note on a div, after the control
Warning (class .note.warning)
Error (class .note.error)
class .small on the control

A paragraph.

When the content of a row is anything other than one single control (and an optional span.note or div.note following), wrap the content in a DIV with class .container. This is only necessary in .std forms, but I'd say do it always, in case you decide to change the type of form later on.
Use SPANs with class .item to have controls in a single line (all of them wrapped in a DIV.container).
Class .no-label on the row. In .std forms it will preserve alignment, but without a label. Typically used with checkboxes.
class .inline on the row. Used to break the alignment in .std forms
Error (class .note.error)
Legend here
The radio buttons are in a standard ul with class .radio, wrapped in a DIV with class .container.

Buttons are typically inside a DIV with class .buttons. See the section on buttons for more details, here are a few options:

Last field before the buttons
Cancel

DIV.buttons with class .right

Cancel

DIV.buttons with class .center:

Cancel

DIV.buttons with class .in-bar:

Cancel