If you are conducting business with the Government of Saskatchewan by mail, please be advised that delivery may be delayed due to rotating postal strikes. Various measures are in place to ensure service to Saskatchewan residents and businesses during postal strike action.

Google Translate Disclaimer

A number of pages on the Government of Saskatchewan`s web site have been professionally translated in French. These translations are identified by a yellow text box that resembles the link below and can be found in the right hand rail of the page. The home page for French-language content on this site can be found here:

Renseignements en Français

Where an official translation is not available, Google™ Translate can be used. Google™ Translate is a free online language translation service that can translate text and web pages into different languages. Translations are made available to increase access to Government of Saskatchewan content for populations whose first language is not English.

The results of software-based translation do not approach the fluency of a native speaker or possess the skill of a professional translator. The translation should not be considered exact, and may include incorrect or offensive language Government of Saskatchewan does not warrant the accuracy, reliability or timeliness of any information translated by this system. Some files or items cannot be translated, including graphs, photos, and other file formats such as portable document formats (PDFs).

Any person or entities that rely on information obtained from the system does so at his or her own risk. Government of Saskatchewan is not responsible for any damage or issues that may possibly result from using translated website content. If you have any questions about Google™ Translate, please visit: Google™ Translate FAQs.

Form Labels

Labels

  • All form fields must be given labels
  • Labels must align above the field
  • Do not place colons at the end of labels
  • Label should be associated with a form field using the for attribute


<div class="form-group">
<label for="exampleName">Last Name</label>
<input type="text" class="form-control" id="exampleName" />
</div>

Optional and required fields

  • A field should not appear on a form unless it is required
  • Do not mark require field with asterisks or "required"
  • Mark fields as optional by using the placeholder attribute

This will reduce the amount of redundant or repetitive information on a form and reduce the cognitive load for the user. As forms will generally including at least one or two optional fields, this will signal to the user that the remaining fields are required.


<div class="form-group">
<label for="exampleMiddle1">Middle Name</label>
<input type="text" class="form-control" id="exampleMiddle1" placeholder="Optional" />
</div>

Focus State

The form field should show an active state when the cursor is active inside the field. All elements use the green focus as a highlight.

Click on the label or inside the form field to show the focus state.


<div class="form-group">
<label for="email1">Email</label>
<input type="email" class="form-control" id="email1" placeholder="Optional" />
</div>

Hint text

  • Do not use hint text as placeholder text in form fields, as this will disappear once content in entered into the form field
  • Hint text should sit below a form field
It'll be on the top corner of your application form.

<div class="form-group">
<label for="referencenumber">Reference Number</label>
<input type="text" id="referencenumber" class="form-control" />
<span class="help-block">It'll be on the top corner of your application form.</span>
</div>

Spacing

Ensure there is sufficient spacing between form elements.

  • Padding of 0.7em for all elements.

<div class="form-group">
<label for="exampleFirst1">First Name</label>
<input type="text" id="exampleFirst1" class="form-control" />
</div>

<div class="form-group">
<label for="exampleName1">Last Name</label>
<input type="text" class="form-control" id="exampleName1" />
</div>

Grouping/Sub-titles

  • Group related form elements using a fieldset and legend.
  • The first element in the fieldset must be a legend element which describes the group.
  • Visually the legend with appear at the top of the grouping.
Contact Information

<div class="grey-section">
<fieldset>

<legend>Contact Information</legend>

<div class="form-group">
<label for="exampleFirst2">First Name</label>
<input type="text" class="form-control" id="exampleFirst2" />
</div>

<div class="form-group">
<label for="exampleName2">First Name</label>
<input type="text" id="exampleName2" class="form-control" />
</div>

</fieldset>
</div>

We need your feedback to improve saskatchewan.ca. Help us improve