• CORE COMPONENT
  • Added on: v3.0.0 (15/09/17)

Outputs

Some additional elements that can be used in conjunction with form elements.


Output

Represents the results of a calculation based on a number of inputs or to indicate the current mouse pointer/touch location of the user.

<output name="..." for="..."></output>

Note: This element is not currently supported in any version of IE.


Datalist

Specifies a pre-defined list of options for an input element. This can be used to provide "autocomplete" type functionality but be aware of using sensitive customer data.

<input id="..." list="..." />
<datalist id="...">
	<option value="...">...</option>
</datalist>

Note: This currently has limited cross-browser support but can be used to add enhanced support to users.

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.

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team