Forms

Forms are used to collect user input, and the user input is normally sent to a server to process data.

Glossary - commonly used form elements

The list below is not comprehensive - it only shows some of the most common elements. You should refer to an HTML form documentation for a more complete guide.

  1. <form>: The container for different types of input elements.
  2. <fieldset>: Is used to group related elements in a form.
  3. <legend>: Is used to define a caption for the <fieldset> element.
  4. <input>: Is the most used form elements, some examples of different types of input elements - text fields, checkboxes, submit buttons, etc.
  5. <label>: Is used to define a text label for a <input>.

All of these elements will be explained in the section below.

Overview

Forms

We've developed 3 different form themes, navigate to Use cases to see individual form themes:

  • .anuform
  • .anuform-inline-tint
  • .anuform-inline-black
 

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>
                                                
First heading

Example form of a fieldset with legend

 

Labels

For each input field, you should use a <label> to describe it. It is useful for screen-reader users, because the screen-reader will read out the label when the user focuses on the input element. Labels also provide a usability improvement to users as the input field will be toggled to when the label text is selected.

Please note: 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:


                        <div class="field">
                            <label class="req" for="requester"><strong>Name</strong></label>
                            <span>
                                <input type="text" class="text tfull" id="requester" name="requester" aria-required="true"
                                required />
                            </span>
                        </div>
                                                

Example form of a binded label and text field

Label widths

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

If you would like more room for your labels, you can append one of the classes below to your <form> tag. E.g. <form class="anuform labelfull">

  • labelwide: give you 40% of the form width for your labels on larger screens.
  • labelfull: give you 100% of the form width for your labels on larger screens.

Example form of .labelfull

 

Required fields

For mandatory input fields, both the label indicator and input field attributes must be used together to clearly convey what is required for uses.

Label indicator

Use <label class="req"> will give the label a red asterisk highlight. This is typically used to indicate required/compulsory fields. When Javascript is off, '(required)' will be displayed instead.

Input fields

Use <input aria-required="true" required>to indicate that this field must be filled out before submitting the form. As not all browsers/assistive technologies support the required attribute, aria-required provides reinforcement.


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

Novalidate: Some browsers will give users error messages if they have not filled out the 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.

 

Available input types

Please view the full list of supported input types in the 'Input type' section

Input types

Below is a list of supported input types & attributes:

Text input and textarea width

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:


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

Instructions

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

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.


                        <div class="field">
                            <label for="sub1name">Something else</label>
                            <span>
                                <input type="text" class="text tfull" id="sub1name" name="sub1name" />
                                <p class="instruction">Some instructions about something. </p>    
                            </span>
                        </div>               
                                                

Some instructions about something.

 

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:


                        <div class="field">
                            <label class="req" for="requester">Name</label>
                            <span>
                                <input type="text" class="text tfull" id="requester" name="requester" placeholder="Your name"/>
                            </span>
                        </div>
                                                
 

Form buttons

We've introduced 3 button styles. You can add either anu-btn, anu-btn-black or anu-btn-white to an <input> tag. View specifications about individual button styles on Buttons page.

 

.anu-btn

 

.anu-btn-black

 

.anu-btn-white

Button size

If you wish to specify a button size, you can use any of the following classes.

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="anu-btn btn-tiny" type="button" value="GO">

 

<input class="anu-btn btn-small" type="button" value="Save">

 

<input class="anu-btn btn-medium" type="button" value="Search">

 

<input class="anu-btn btn-large" type="button" value="Update">

 

<input class="anu-btn 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 accessibility requirements. Each radio button should have a corresponding label. The fieldset legend is used as the overall label for the group of buttons.


                    <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>
                            ...
                       </div>
                    
Some radio buttons
 

Shorter field

Please note: this feature is only available on .anuform-inline-tint and .anuform-inline-black

Sometimes, we don't need one input field to take up the entire row. In this case, we can add the width class .w45 to the div tag of the whole field:


                        <fieldset>
                            <div class="field w45">
                                <label class="req" for="requester-name"><strong>Short 1</strong></label>
                                <span>
                                    <input type="text" class="text tfull" id="requester-name" name="requester-name"
                                    placeholder="Short 1 text" aria-required="true" required="">
                                </span>
                            </div>
                            ...
                        </fieldset>
                                                

Use cases

In the sections below, we included 3 completed form examples, 1 for each form theme.

Example 1: form theme with class .anuform (default style)

First heading
2nd section heading

some instructions about this something

do not include http://

some instructions about this something else

Some radio buttons
Please note that by submitting this form you are agreeing to receive information about ANU related to studying here. View our privacy policy.

 

View code structure for .anuform


                        <form class="anuform" action="#" method="post">
                            <fieldset>
                                <legend>First heading</legend>
                                <div class="field">
                                    <label class="req" for="requester-name"><strong>Name</strong></label>
                                    <span>
                                        <input type="text" class="text tfull" id="requester-name" name="requester-name"
                                            placeholder="Your full name" aria-required="true" required="">
                                    </span>
                                </div>
                                <div class="field">
                                    <label class="req" for="requester-email">Email address</label>
                                    <span>
                                        <input type="text" class="text tfull" id="requester-email" name="requester-email"
                                            placeholder="example@example.com.au" aria-required="true" required="">
                                    </span>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend>2nd section heading</legend>
                                <div class="field">
                                    <label for="sitename">Something</label>
                                    <span>
                                        <input type="text" class="text tfull" id="sitename" name="sitename">
                                        <p class="instruction"> some instructions about this something </p>
                                    </span>
                                </div>
                                <div class="field">
                                    <label for="siteurl">URL</label>
                                    <span>
                                        <input type="text" class="text tfull" id="siteurl" name="siteurl">
                                        <p class="instruction">do not include http://</p>
                                    </span>
                                </div>
                                <div class="field">
                                    <label for="sub1name">Something else</label>
                                    <span>
                                        <input type="text" class="text tfull" id="sub1name" name="sub1name">
                                        <p class="instruction"> some instructions about this <a href="#">something else</a> </p>
                                    </span>
                                </div>
                                <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>
                                <div class="field">
                                    <label for="tareaname">A text area</label>
                                    <textarea class="tfull" id="tareaname" name="tareaname" rows="4"></textarea>
                                </div>
                            </fieldset>
                            <small>
                                Please note that by submitting this form you are agreeing to receive information about ANU related to studying here. View our privacy policy.
                            </small>
                            <p class="text-right">
                                <input type="submit" name="savedraft" value="Save draft" class="anu-btn btn-small"> 
                                <input type="submit" name="submit" value="Submit" class="anu-btn btn-small">
                            </p>
                        </form>    
                                            
 

Example 2: form theme with class .anuform-inline-tint

Form

some instructions about this something

do not include http://

some instructions about this something else

Please note that by submitting this form you are agreeing to receive information about ANU related to studying here. View our privacy policy.

 

 

Example 3: form theme with class .anuform-inline-black

Form

some instructions about this something

do not include http://

some instructions about this something else

Please note that by submitting this form you are agreeing to receive information about ANU related to studying here. View our privacy policy.

 

Form

some instructions about this something

do not include http://

some instructions about this something else

Please note that by submitting this form you are agreeing to receive information about ANU related to studying here. View our privacy policy.

 

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
Error message styles

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

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:


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

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:


    <div class="field">
        <label for="sub1name">Something else</label>
        <span>
            <input type="text" class="text tfull" id="sub1name" name="sub1name" />
        </span>
    </div>
    <div class="field">
        <label for="tareaname">A text area</label>
        <span>
            <textarea class="tfull" id="tareaname" name="tareaname"></textarea>
        </span>
    </div>                       
                            

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 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.


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

Buttons

To use buttons in forms, a the class anu-btn, anu-btn-black and anu-btn-white can be used in an <input> tag, as shown below:

 

<form class="anuform"><input type="button" class="anu-btn" value="GO"></form>

 

<form class="anuform"><input type="button" class="anu-btn-black" value="GO"></form>

 

<form class="anuform"><input type="button" class="anu-btn-white" value="GO"></form>

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.

 

<form class="anuform"><input class="anu-btn btn-tiny" type="button" value="GO"></form>

 

<form class="anuform"><input class="anu-btn btn-small" type="button" value="Save"></form>

 

<form class="anuform"><input class="anu-btn btn-medium" type="button" value="Search"></form>

 

<form class="anuform"><input class="anu-btn btn-large" type="button" value="Update"></form>

 

<form class="anuform"><input class="anu-btn btn-xlarge" type="button" value="Log in"></form>

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.

Shorter field

Sometimes, we don't need one input field to take up the whole row. In this case, we can add the width class w45 to the div tag of the whole field:

Please note, this feature only works for tint and black forms.


    <form class="anuform-inline-black" action="#" method="post">
        <fieldset>
            <div class="field w45">
                <label class="req" for="requester-name"><strong>Short 1</strong></label>
                <span>
                    <input type="text" class="text tfull" id="requester-name" name="requester-name"
                        placeholder="Short 1 text" aria-required="true" required="">
                </span>
            </div>
            <div class="field w45">
                <label class="req" for="requester-email">Short 2</label>
                <span>
                    <input type="text" class="text tfull" id="requester-email" name="requester-email"
                        placeholder="Short 2 text" aria-required="true" required="">
                </span>
            </div>
        </fieldset>
    </form>
                            

In this case, we can get the effect like this:

Completed examples

We offer forms in three different background colours - white, tint and black. To use other colour options, please replace the anuform class with anuform-inline-tint or anuform-inline-black.

Default form

First heading
2nd section heading

some instructions about this something

do not include http://

some instructions about this something else

Some radio buttons
Please note that by submitting this form you are agreeing to receive information about ANU related to studying here. View our privacy policy.


    <form class="anuform" action="#" method="post">
        <fieldset>
            <legend>First heading</legend>
            <div class="field">
                <label class="req" for="requester-name"><strong>Name</strong></label>
                <span>
                    <input type="text" class="text tfull" id="requester-name" name="requester-name"
                        placeholder="Your full name" aria-required="true" required="">
                </span>
            </div>
            <div class="field">
                <label class="req" for="requester-email">Email address</label>
                <span>
                    <input type="text" class="text tfull" id="requester-email" name="requester-email"
                        placeholder="example@example.com.au" aria-required="true" required="">
                </span>
            </div>
        </fieldset>
    
        <fieldset>
            <legend>2nd section heading</legend>
            <div class="field">
                <label for="sitename">Something</label>
                <span>
                    <input type="text" class="text tfull" id="sitename" name="sitename">
                    <p class="instruction"> some instructions about this something </p>
                </span>
            </div>
            <div class="field">
                <label for="siteurl">URL</label>
                <span>
                    <input type="text" class="text tfull" id="siteurl" name="siteurl">
                    <p class="instruction">do not include http://</p>
                </span>
            </div>
            <div class="field">
                <label for="sub1name">Something else</label>
                <span>
                    <input type="text" class="text tfull" id="sub1name" name="sub1name">
                    <p class="instruction"> some instructions about this <a href="#">something else</a> </p>
                </span>
            </div>
            <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>
            <div class="field">
                <label for="tareaname">A text area</label>
                <textarea class="tfull" id="tareaname" name="tareaname" rows="4"></textarea>
            </div>
        </fieldset>
        <small>
            Please note that by submitting this form you are agreeing to receive information about ANU
            related to
            studying
            here. View our privacy policy.
        </small>
        <p class="text-right">
            <input type="submit" name="savedraft" value="Save draft" class="anu-btn btn-small"> 
            <input type="submit" name="submit" value="Submit" class="anu-btn btn-small">
        </p>
    </form>    
                        

Form with tint background

Form

some instructions about this something

do not include http://

some instructions about this something else

Please note that by submitting this form you are agreeing to receive information about ANU related to studying here. View our privacy policy.

 

Form with black background

Form

some instructions about this something

do not include http://

some instructions about this something else

Please note that by submitting this form you are agreeing to receive information about ANU related to studying here. View our privacy policy.