Memorable date textbox

Memorable date textboxes are used to aid user input by formatting single fields, for example pin numbers and sort codes.

It is still possible (and permissable) to use standard textbox groups with individual inputs - see the textbox group page for further details.

Structure

• Uses a standard Framework form text field with a text keyboard
• If used for inputting an expiry date, the date can be expressed in the following formats: MM/YY and MM/YYYY
• If used for inputting a date of birth, the date can be expressed in the following formats: DD/MM/YYYY, DD.MM.YYYY, MM,DD,YYYY, YYYY-MM-DD)
• Symbols can be selected if a user tries to when editing a previously entered date; the autoformatting doesn't happen until a user continues to edit the number
• When using the backspace key, any symbols are removed for the customers, they don't have to delete them manually
• Do not use the HTML5 number, phone or date attributes
• Do not use this pattern in conjunction with a date picker to add values

Labels

• Inputting format must always be shown with the form hint text inside the field

Non-JS requirements and considerations

• No automatic formatting happens; the date field is just a textbox

Placement

• Follows existing padding rules and form textbox placement

Use cases and exception scenarios

• Only for inputting dates, eg. date of birth and expiry dates
• Do not use for numeric inputs other than dates

Examples

Expiry date

Date of birth

Notes for developers

Line-breaks are automatically removed from the input value

Use the maxlength attribute to specify the maximum length of the value that can be entered; the value should also include the number of spacers required (eg, DD/MM/YYYY would require maxlength="10"; the a-textbox--x-character modifier should include the same character count (so, for the same example as previously, a-textbox--10-character

The pattern attribute must be set on the text input eg. for DD/MM/YYYY the attibute should have a value of \d{2}\/\d{2}\/\d{4}.

The data-format refers to the number of characters in each block; supported formats are:

• "22"
• "24"
• "222"
• "224"
• "422"

The data-spacer refers to the spacer character inserted between block; supported spacer characters are:

• "/"
• "-"
• "."
• ","
• " "

For more information on sizing the text inputs, please see the textbox page.

Input types

Care should be taken when choosing input field types for various uses, particularly with regard to number entry, as making the wrong selection could prevent users from inputting the required details into a form. For further information, see the form introduction page.

Important messages

To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert" and/or aria-live="assertive".

Using autocomplete

Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors, especially on virtual keyboards and small devices.

Browsers use many methods to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name attribute and the autocomplete attribute on each input element.

Further details can be found in the developer notes on the form introduction page.

Notes for testers

• Ensure that all form fields have a correctly associated label; this not only provides context to each field for assistive technology users but also a larger clickable area to select the field
• Clicking / pressing on a label for a single input field should cause the input to gain focus
• Even though a label might not be visible for some of these fields, it still needs to be present for assistive technologies

Code Examples

<div class="m-form-row [ Modifiers ]">
	<label class="a-label">...</label>
	<div class="m-form-row__content">
		<input type="text" id="..." name="..." placeholder="..." pattern="..." class="a-textbox [ Modifiers ]" maxlength="..." data-module="a-textbox-format" data-format="..." data-spacer="..."  />
	</div>
</div>

<div class="m-form-row [ Modifiers ]">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<input type="text" id="..." name="..." placeholder="..." pattern="..." class="a-textbox [ Modifiers ]" maxlength="..." data-module="a-textbox-format" data-format="..." data-spacer="..."  />
	</div>
</div>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Keyboard operations

TAB

Tabbing to an input field should make the input clearly visually different so that the focus point on the page is obvious to the user.