0.46.0
Changelog
Forms

Form Elements

Form elements used within the content-form component.

Inputs

The default form input element and its variations are displayed below. Content-forms should always use the default styling for this component, the small and large size are reserved for use on other layout items or components within the style guide.

.u-input--small
A small form field
.u-input--large
A large form field 
<input class="[modifier class]" name="example" type="text" placeholder="Placeholder text">

Button types

A demonstration of form button types. Form buttons are generally only used in the form "footer" (See form grid example). Buttons can either be an <input> element or <button> element depending on how your forms work. Ideally you should have no more than 2 buttons within the footer zone - 'Submit' and 'Reset'. If your application allows it, you may have a 'Save' button as well.

<input class="c-btn c-content-form__btn" type="reset" value="Reset (input)">
<input class="c-btn c-content-form__btn" type="button" value="Button (input)">
<input class="c-btn c-content-form__btn" type="submit" value="Submit (input)">
<button class="c-btn c-content-form__btn" type="reset">Reset (button)</button>
<button class="c-btn c-content-form__btn" type="button">Button (button)</button>
<button class="c-btn c-content-form__btn" type="submit">Submit (button)</button>

Disabled and readonly

Disabled and read only form input styling for elements that users should not be able to edit.

<input class="is-disabled" type="text" placeholder="disabled" disabled>
<input class="readonly" type="text" placeholder="readonly" readonly>

Input types

Demonstration of different input types.

<input type="text" placeholder="text">
<input type="text" placeholder="disabled" disabled="disabled" disabled>
<input type="text" placeholder="readonly" readonly="readonly" readonly>
<input type="email" placeholder="email">
<input type="search" placeholder="search">
<input type="url" placeholder="url">
<input type="password" placeholder="password">
<textarea cols="30" rows="5" placeholder="Textarea text"></textarea>
<label>
  <input type="radio">
  Radio
</label>
<label>
  <input type="checkbox">
  Checkbox
</label>
<input type="number" placeholder="5">
<input type="date" placeholder="1970-01-01">
<input type="time" placeholder="18:23">
<select>
  <option>Explorer</option>
  <option>Firefox</option>
  <option>Webkit</option>
</select>
<select class="select--multiple" multiple>
  <option>Explorer</option>
  <option>Firefox</option>
  <option>Webkit</option>
</select>
<input type="color" placeholder="#000000">
<input type="range" placeholder="10">
<input type="file" multiple="multiple" size="22">

Word/character limit textarea

The word or characcter limit can be applied by using the markup demo below. HTML data-* attributes are required to determine the type, count and direction.

The following data-* attributes are available (all are required):

data-count-type="words/characters"

data-character-limit="30"

data-count-direction="down/up"

data-strict-max="true/false"

JavaScript class: .js-text-count-limit

<textarea
  class="c-text-count-limit js-text-count-limit"
  data-count-type="words"
  data-character-limit="30"
  data-count-direction="up"
  data-strict-max="true"
  cols="30" rows="5" placeholder="Textarea text"></textarea>

© The University of Adelaide