Forms

Error message styles

Styles are available for error and success messages, as well as warning and information boxes.

HTML forms can be styled using anu-forms.css which is delivered with the standard ANU headers.

The styles are not applied automatically, you need to enable them by:

  1. Adding the class anuform to your form: <form class="anuform"...
  2. Using fieldsets in your form
  3. Add the class text to any text inputs: <input type="text" class="text wide" id="sitename" name="sitename" />
  4. Adding classes to inputs and labels.
  5. Adding classes and fieldsets to radio buttons

You can also add instructions to the form and style them using the instruction class.

Fieldsets

Fieldsets divide a form into sections, with an optional heading for each section using <legend>. The form styling adds a box around each fieldset, and makes the fieldset heading match the heading colours on the rest of your site. As an example, your form may have the following layout:

<fieldset>
  <legend>First heading</legend>
  ...Some inputs and buttons...
</fieldset>

<fieldset>
  <legend>Second heading</legend>
  ...Some inputs and buttons...
</fieldset>

Required fields

When a form field is required, a label indicator and input field attributes must be used together to clearly convey what is required of users.

Label indicator

Using class="req" on a label will give it a red asterisk highlight. This is typically used to indicate required or compulsory fields. When Javascript is off, '(required)' will be displayed instead.

Input fields

On the input fields, add aria-required="true" required to specify that a field must be filled out before the form can be submitted. As not all browsers or assistive technologies support the required attribute, aria-required provides reinforcement.

Novalidate

Note that some browsers will give users error messages if they have not filled out required fields. If you would like to disable this (e.g. you are performing your own form validation), you can use the novalidate attribute in the <form> tag.

Labels

For each input field, you should use a <label> to describe it. This applies the correct styles to the label text, and also makes it easier for screen readers to match the label text with the input box. Labels also provide a usability improvement users as the input field will be toggled to when the label text is selected. Additionally, the for attribute of the <label> should be equal to the id attribute of the related input field to bind them together.

The label and input should be grouped together in a <p> tag. For added emphasis, you can add a <strong> tag to the label, but this is optional. For example:

<p>
  <label class="req" for="requester"><strong>Name</strong></label>
  <input type="text" class="text wide" id="requester" name="requester" aria-required="true" required />
</p>
 

Label widths

The default label width is 20 per cent of the form area for larger screens and 100 per cent for smaller screens.

If you would like more room for your labels, you can add either a labelwide or labelfull class to your form. This will give you 40 per cent or 100 per cent of the form width for your labels on larger screens.

Note that the labelwide or labelfull class is used on the form element, not on each label in the form.

See Text input and textarea widths for input widths.

Wide labels

<form class="anuform labelwide" action="#" method="post">
  <fieldset>
  ...
  </fieldset>
</form>
 

Full width labels

<form class="anuform labelfull" action="#" method="post">
  <fieldset>
  ...
  </fieldset>
</form>
 

Text input and textarea widths

The old way to set the width of a text input or textarea was to use something like size="40" or cols="45". This was problematic, as it ended up with a different width on different browsers, and it would not work on a responsive layout.

If you are using the ANU styled form, you can add the class tfull to your text input or textareas - this will automatically set the width to a sensible value, based on the size of the form, labels and screen size. For example, the following form code has a text input and a textarea, both with the tfull class applied:

<p>
<label for="sub1name">Something else</label>
<input type="text" class="text tfull" id="sub1name" name="sub1name" />
</p>

<p>
<label for="tareaname">A text area</label>
<textarea class="tfull" id="tareaname" name="tareaname"></textarea>
    </p>

Instructions

To help users fill in the form, you can add instructional text below each input box with the class instruction:

<p class="instruction">some instructions about this</p>

Generally you will want to put the instruction below the corresponding field, but you can use the instruction class on paragraphs anywhere in the form.

Input hints

You can add a hint to the input field to help visitors to fill it out. For example, 'Search ANU' in the Explore Bar search. To ensure that the hint is properly styled and that it clears when the visitor starts to enter text, please use the placeholder attribute. For example:

<p>
  <label class="req" for="requester">Name</label>
  <input type="text" class="text wide" id="requester" name="requester" placeholder="Your name" aria-required="true" required />
</p>

Buttons

Unstyled buttons in forms will look like the following by default:

If you would like to use differently styled buttons, however, the class btn-uni-grad or btn-black-grad can be used in an <input> tag, as shown below.

<input class="btn-uni-grad" type="button" value="GO">
 
<input class="btn-black-grad" type="button" value="GO">
 

Button size

Buttons can be used without specifying a size, as in the examples above. However, if you wish to specify a button size, you can use class btn-tiny, btn-small, btn-medium, btn-large or btn-xlarge as shown below.

<input class="btn-uni-grad btn-tiny" type="button" value="GO">
 
<input class="btn-uni-grad btn-small" type="button" value="Save">
 
<input class="btn-uni-grad btn-medium" type="button" value="Search">
 
<input class="btn-uni-grad btn-large" type="button" value="Update">
 
<input class="btn-uni-grad btn-xlarge" type="button" value="Log in">
 

Radio buttons

If your form has radio buttons, they need to be grouped in a fieldset, even if your form is already in a fieldset, due to acccessibility requirements. Each radio button should have a corresponding label. The fieldset legend is used as the overall label for the group of buttons.

There are two classes to help style radio buttons in an ANU form:

  • radiofield for the fieldset that groups the buttons; and
  • radiobox for the div containing all the radio buttons, so they layout properly.

An example of radio button code is shown in the completed example at the end of the page.

Completed example

The following form is generated by the code below it.

You must fill in the items marked with an asterisk (*).

First heading

2nd section heading

some instructions about this something

do not include http://

some instructions about this something else

Some radio buttons

 


<p class="small">You must fill in the items marked with an asterisk (*).</p>

<form class="anuform" action="#" method="post">

    <fieldset>
    <legend>First heading</legend>
   
    <p>
    <strong><label for="requester-name" class="req">Name</label></strong>
    <input type="text" class="text tfull" id="requester-name" name="requester-name" placeholder="Your full name" aria-required="true" required/>
    </p>
    <p>
    <label class="req" for="requester-email">Email address</label>
    <input type="text" class="text tfull" id="requester-email" name="requester-email" placeholder="example@example.com.au" aria-required="true" required/>
    </p>
    </fieldset>
   
    <fieldset>
    <legend>2nd section heading</legend>
   
    <p>
    <label for="sitename">Something</label>
    <input type="text" class="text tfull" id="sitename" name="sitename" />
    </p>
    <p class="instruction">
    some instructions about this something
    </p>
   
    <p>
    <label for="siteurl">URL</label>
    <input type="text" class="text tfull" id="siteurl" name="siteurl" />
    </p>
    <p class="instruction">
    do not include http://
    </p>
   
    <p>
    <label for="sub1name">Something else</label>
    <input type="text" class="text tfull" id="sub1name" name="sub1name" />
    </p>
    <p class="instruction">
    some instructions about this <a href="#">something else</a>
    </p>
   
   
    <fieldset class="radiofield">
    <legend>Some radio buttons</legend>
   
    <div class="radiobox">
    <input type="radio" id="bob" name="rad" value="bob"><label for="bob">Bob this is a long title</label>
    <input type="radio" id="bill" name="rad" value="bill"><label for="bill">Bill</label>
    <input type="radio" id="jan" name="rad" value="jan"><label for="jan">Jan</label>
    <input type="radio" id="jill" name="rad" value="jill"><label for="jill">Jill</label>
    </div>
    </fieldset>
   
    <p>
    <label for="tareaname">A text area</label>
    <textarea class="tfull" id="tareaname" name="tareaname" rows="4"></textarea>
    </p>
   
    </fieldset>
   
    <p class="text-right">
    <input type="submit" name="savedraft" value="Save draft" class="btn-uni-grad btn-medium"/>&nbsp;<input type="submit" name="submit" value="Submit" class="btn-uni-grad btn-medium"/>
    </p>
</form>
 

Updated:  9 November 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle