Input purpose

When I originally started creating these guidance pages, I skipped over this one because I didn't know enough about it. I still don't know as much as I should, so it might be time to learn. Maybe we can learn together.

Input purposes for user interface components

You might want to refer to the W3 information on this, but I'm going to summarise it as best I can.

When you fill in an online form, there are often fields to fill in personal information, things like:

• Your name
• Your address
• Your phone number
• Your email address
• Your date of birth
• Your gender.

These form fields have to be coded in such a way that assistive software can interpret them and present the information in a useful way to the user. For example, somebody with cognitive impairments might have software that puts an icon next to these fields to help them understand what is needed. It also means that users can start typing their answer and the form field will detect previously used answers and offer to autofill the field for them.

How to code input purposes

This is all about the autocomplete attribute. It is only needed when collecting information about the user, not filling in information about somebody else.

So let's create a little form. It won't do anything or go anywhere. It's just to show the coding.

Here is the code for these form fields. Take note of the autocomplete attributes. These are all defined by W3 and should not be changed or customised.

<form>
	<div>
		<label for="fname">First Name</label>
		<input id="fname" type="text" autocomplete="given-name">
	</div>
	<div>
		<label for="lname">Last Name Name</label>
		<input id="lname" type="text" autocomplete="family-name">
	</div>
	<div>
		<label for="email">Email address</label>
		<input id="email" type="text" autocomplete="email">
	</div>
</form>