Memorable date textbox
Taxonomic name: A-TEXTBOX-FORMAT
v.4.7.0 - Updated 01/03/19. Archives
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.
- 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
- 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
- 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
Date of birth
Notes for developers
Line-breaks are automatically removed from the input value
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
a-textbox--x-character modifier should include the same character count (so, for the same example as previously,
pattern attribute must be set on the text input eg. for DD/MM/YYYY the attibute should have a value of
data-format refers to the number of characters in each block; supported formats are:
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.
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.
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
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
<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>
The following table gives you a quick overview of the CSS classes that can be applied.
||Styling for the text input||Yes||
||Modifier for restricting the textbox length for 3 characters||
||Modifier for restricting the textbox length for 7 characters||
||Modifier for restricting the textbox length for 8 characters||
||Modifier for restricting the textbox length for 10 characters||