Forms

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:

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

    <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 with black background