Forms

Single line input

Basic input examples without label:

Small input - Uses input--small class on the input element



    <form class="form">
      <label>
        <span class="visuallyhidden">Hidden label</span>
        <input type="text" class="input--small" />
      </label>
    </form>
  

Medium input - Uses input--medium class on the input element



    <form class="form">
      <label>
        <span class="visuallyhidden">Hidden label</span>
        <input type="text" class="input--medium" />
      </label>
    </form>
  

Large input - Uses input--large class on the input element



    <form class="form">
      <label>
        <span class="visuallyhidden">Hidden label</span>
        <input type="text" class="input--large" />
      </label>
    </form>
  

Input example with corresponding label:

Uses form-fields__item--single for any form element and label combination that exists outside of a form group.

The above examples of input--small, input--medium and input--large can be used on the input in this example too.



  <form class="form">
    <div class="form-fields__item--text form-fields__item--single">
      <label>
        <span class="form-fields__label-text">Your name</span>
        <input type="text" />
      </label>
    </div>
  </form>
  

Multi line input

Multi line input example without label:

Uses form-fields__item--single for any form element and label combination that exists outside of a form group.

The above examples of input--small, input--medium and input--large can be used on the textarea in this example too.



  <form class="form">
    <label>
      <span class="visuallyhidden">Hidden label</span>
      <textarea class="input--large"></textarea>
    </label>
  </form>
  

Multi line input example with corresponding label:


  <form class="form">
    <div class="form-fields__item--textarea form-fields__item--single">
      <label>
        <span class="form-fields__label-text">Your comment</span>
        <textarea class="input--medium"></textarea>
      </label>
    </div>
  </form>
  

Drop-down

Dependencies:

The styling requires Uniform.Js in order for it to work cross browser; this also requires Jquery. These are no longer included within our CDN by default, although the Uniform.js code is available in GitHub as well as via a CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Uniform.js/3.0.0/js/jquery.uniform.standalone.js" type="text/javascript"></script>
 

You can call Uniform.Js by running the following on page load:

$('select').uniform();

Alternatively, if you require Uniform.Js for Angular UI, there is a directive and controller available for you to tweak. This will update the element by waiting.

Example controller:

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.reset = function() {
  $scope.test = "";
  $timeout(jQuery.uniform.update, 0);
  };
});
  

Example directive:

app.directive('applyUniform',function($timeout){
  return {
    restrict:'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      element.uniform({useID: false});
        scope.$watch(function() {return ngModel.$modelValue}, function() {
          $timeout(jQuery.uniform.update, 0);
        } );
     }
  };
});
  

Drop-down examples without label:

By default the width of the drop-down will be dependent on the content of option fields. There are no width restrictions on this example:


  <form class="form">
    <div class="form-fields__item-select">
      <label>
        <span class="visuallyhidden">Hidden label</span>
        <select>
          <option value="0">Please select</option>
          <option value="1">Mr</option>
          <option value="2">Ms</option>
          <option value="3">Miss</option>
          <option value="4">Mrs</option>
          <option value="5">Dr</option>
          <option value="6">Prof</option>
          <option value="7">Rev</option>
          <option value="8">HRH</option>
          <option value="9">This is a ridiculously long option to test the width</option>
        </select>
      </label>
    </div>
  </form>
  

Restricted width - Large:

Uses form-fields__item-select and form-fields__item-select--large

Restricted width - Medium:

Uses form-fields__item-select and form-fields__item-select--medium

Restricted width - Small:

Uses form-fields__item-select and form-fields__item-select--small

Large drop-down example with corresponding label:


  <form class="form">
    <div class="form-fields__item-select form-fields__item-select--large form-fields__item--single">
      <label>
        <span class="form-fields__label-text">Title</span>
        <select>
          <option value="0">Please select</option>
          <option value="1">Mr</option>
          <option value="2">Ms</option>
          <option value="3">Miss</option>
          <option value="4">Mrs</option>
        </select>
      </label>
    </div>
  </form>
  

Radio button

Radio button example with label:


  <form class="form">
    <div class="form-fields__item-radio">
        <label><input type="radio" name="radio" /> Praesent id neque suscipit</label>
    </div>
  </form>
  

Checkbox

Checkbox example with label:


  <form class="form">
    <div class="form-fields__item-checkbox">
      <label><input type="checkbox" /> Nullam consequat sapien ut facilisis</label>
    </div>
  </form>
  

Error messages

Error message example with label:

Requires form-fields__item--single on the wrapper when the input and label appear on their own. When the input and label appear in a group (as in the examples section below) no extra class is needed.

Payment details
  • Payment method
    • We need a valid radio button

  <form class="form">
    <div class="form-fields__item--text form-fields__item--single">
      <label class="s-error">
        <span class="form-fields__label-text">Email</span>
        <input type="text" />
        <span class="error-message">We need a valid email address</span>
      </label>
    </div>
  </form>
  

Examples

Below are examples of common forms used across jisc.ac.uk.

Leave your comment
Your details
Payment details
  • Fee level
  • Payment method
  • If you would prefer to pay over the phone with your debit or credit card please call Sarah on 0117 123 4567