# Form - Patterns
{% tabs %}
{% tab title="Overview" %}
### Overview
Over here, you can easily find common patterns to start building your site.
We provide baseline patterns that you can easily tweak to suit your products and services.
To bring you greater convenience, these patterns also have basic accessibility features built-in, e.g. autocomplete attributes for form fields.
For more information on WCAG standards , you can visit the [WCAG page](https://www.w3.org/WAI/standards-guidelines/wcag/).
{% endtab %}
{% tab title="Address" %}
### Address
Use this pattern when you require users to key in their Singapore-based address.
Note: Give your users the option to either key in their postal code to look up their address, or enter their full address manually.
```
Address Details
```
### Guidelines
#### For your Address Lookup
* Make it clear to users that this will only work with Singapore addresses.
* Use the address lookup only if you are asking for a Singapore address. Otherwise, use multiple text inputs or a text area when asking for addresses outside of Singapore.
#### For Manually-entered Addresses
* The fields should always have the autocomplete attribute to help your users complete it quickly.
* You will need to include the autocomplete attribute to meet [WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html) for production.
{% endtab %}
{% tab title="Date" %}
### Date Input
Use this pattern when you want to ask users for a specific date, e.g their date of birth or when something was issued to them.
Note: If you need users to select from a few specific dates, we recommend that you use the radio button component to allow them to choose easily.
### Usage
Below you will find a General Date Format you can use, along with the code needed to build this element.
### DD MM YYYY
### MM YYYY
### Guidelines
#### When you require users to fill in dates for your services
* State clearly how the data should be filled (e.g. Day Month Year)
* Give an example of how the date should be filled in (e.g. 01 01 2020 vs 1 1 2020)
#### When you request users to fill in memorable dates
* For example, asking for Date-Of-Birth means you should always have the autocomplete attribute for these 3 fields, bday-day, bday-month and bday-year to bring convenience to users.
* You will need to include the autocomplete attribute to meet [WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html) for production.
{% endtab %}
{% tab title="Email Address" %}
### Email address input
Use this pattern when you need to ask users for their email address.
Note: State clearly what their email address will be used for.
### Usage
Below you will find a General Email Address you can use, along with the code needed to build this element.
```
```
### Guidelines
#### Explain the rationale of requesting for users’ email address
This allows users to:
* Feel assured that their email address will not be misappropriated
* Choose which email address they prefer to use
Make sure it works for all users
* Your field text should accommodate the maximum length of email addresses (256 characters long, including punctuation)
#### Guide users to enter their email address
Make it easier for users by:
* Allowing them to copy and paste their email address
* Setting the type attribute to email so that the correct keyboard is displayed
* Setting the spellcheck attribute to false so that their email addresses are not spell checked by the browser or device
* Setting the autocomplete attribute so that browsers can fill in their email address if they have entered it previously
* You will need to include the autocomplete attribute to meet [WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html) for production.
{% endtab %}
{% tab title="Names" %}
### Collecting Names
Use this pattern when you need to ask users for their names.
### Types
#### General name field
You should follow this pattern when you need to ask for a user’s name. You should only ask for names if you need it for a service.
