Form

Version 2.x

In version 2 of Hexagon, the user experience and interface are being overhauled to add guidelines and improve the general usability of the library.

Additional classes have been added to provide better form styling, including additions to the structure.

It is recommended that forms be created using the Form Builder to help ensure the format of the form is valid, although it is possible to create a form manually, as seen below.

See Inputs for documentation about the new input classes.

Examples

Horizontal Form

HTML

<p class="hx-header-small">Horizontal Form</p>
<form class="hx-form hx-flag-form hx-flag-button">
  <div class="hx-form-group">
    <label class="hx-form-label">Text</label>
    <input class="hx-input" type="text">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Email</label>
    <input class="hx-input" type="email">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Number</label>
    <input class="hx-input" type="number">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Url</label>
    <input class="hx-input" type="url">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Lots of text</label>
    <textarea class="hx-input-textarea"></textarea>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Radio</label>
    <div class="hx-form-items hx-form-columns-2">
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio1" type="radio" value="One" name="group-1">
        <label class="hx-form-label"for="radio1">One</label>
      </div>
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio2" type="radio" value="Two" name="group-1">
        <label class="hx-form-label"for="radio2">Two</label>
      </div>
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio3" type="radio" value="Three" name="group-1">
        <label class="hx-form-label"for="radio3">Three</label>
      </div>
    </div>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Checkbox</label>
    <div class="hx-form-items">
      <div class="hx-form-item">
        <input class="hx-input-checkbox" id="checkbox1" type="checkbox">
        <label class="hx-form-label for="checkbox1" >Value</label>
      </div>
    </div>
  </div>
  <div class="hx-form-buttons">
    <button type="submit" class="hx-btn">Cancel</button>
    <button type="submit" class="hx-btn hx-primary">Submit</button>
  </div>
</form>

Vertical Form

HTML

<p class="hx-header-small">Vertical Form</p>
<form class="hx-form hx-form-vertical hx-flag-form hx-flag-button">
  <div class="hx-form-group">
    <label class="hx-form-label">Text</label>
    <input class="hx-input" type="text">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Email</label>
    <input class="hx-input" type="email">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Number</label>
    <input class="hx-input" type="number">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Url</label>
    <input class="hx-input" type="url">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Lots of text</label>
    <textarea class="hx-input-textarea"></textarea>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Radio</label>
    <div class="hx-form-items hx-form-columns-2">
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio1" type="radio" value="One" name="group-1">
        <label class="hx-form-label"for="radio1">One</label>
      </div>
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio2" type="radio" value="Two" name="group-1">
        <label class="hx-form-label"for="radio2">Two</label>
      </div>
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio3" type="radio" value="Three" name="group-1">
        <label class="hx-form-label"for="radio3">Three</label>
      </div>
    </div>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Checkbox</label>
    <div class="hx-form-items">
      <div class="hx-form-item">
        <input class="hx-input-checkbox" id="checkbox1" type="checkbox">
        <label class="hx-form-label for="checkbox1" >Value</label>
      </div>
    </div>
  </div>
  <div class="hx-form-buttons">
    <button type="submit" class="hx-btn">Cancel</button>
    <button type="submit" class="hx-btn hx-primary">Submit</button>
  </div>
</form>

Api

Change Log

Functions

hx.validateFormformString / HTMLElementoptionsObjectObject

A helper function for validating forms. By default, it will show a message below the first error in the form but will return an array with all the errors.

An example use of this function could be:

hx.select('#form').select('button').on('click', function (event){
  event.preventDefault(); // Stops the form from submitting natively
  var validObj = hx.validateForm('#form');
  if(validObj.valid){
    // Do something on success
  }
  // Do nothing if the form isn't valid (as the validateForm function will show a message)
});

Arguments

formString / HTMLElement

A css selector that selects the form to validate, or the form element itself to validate

options

The options to use when validating the form

Properties

showMessageBoolean

Whether to show the message when validating. When set to false, the validate function will only return the errors without modifying the form.

Default: true

Returns

Object

Properties

errorsArray[Object]

An array of error objects with a message, node and validity property. The node returned will be the div element containing the error that is directly inside the form element.

validBoolean

Whether or not the form is valid

Classes

hx-form

Give to the form element to style forms

hx-form.hx-flag-form

Display the form using the updated structure. Intended for use with hx-input etc. Inputs and the hx-flag-button class.

<form class="hx-form hx-form-vertical hx-flag-form hx-flag-button">
  <div class="hx-form-group">
    <label class="hx-form-label">Label</label>
    <input class="hx-input" />
  </div>
  <div class="hx-form-group">
    <div class="hx-form-items">
      <div class="hx-form-item">
        <input type="radio" class="hx-input-radio">
        <label class="hx-form-label">Label</label>
      </div>
      <div class="hx-form-item">
        <input type="radio" class="hx-input-radio">
        <label class="hx-form-label">Label</label>
      </div>
      <div class="hx-form-item">
        <input type="radio" class="hx-input-radio">
        <label class="hx-form-label">Label</label>
      </div>
    </div>
  </div>
  <div class="hx-form-buttons">
    <button type="button" class="hx-btn">Cancel</button>
    <button type="button" class="hx-btn hx-primary">Submit</button>
  </div>
</form>

Classes

hx-form-buttons

The container for the form buttons. Should only include hx-btn elements.

hx-form-group

The class to give to the container for each element in a form

Classes

hx-form-items

The class to wrap form items that have multiple elements (e.g. a radio group)

Classes

hx-form-item

The class to wrap an individual form item (e.g. a single radio input + label)

hx-form-label

Styles a label

Extra Classes

hx-form-vertical

Swap the form to a vertical layout.