From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fdatalist.html | 159 +++++++++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 devdocs/html/element%2Fdatalist.html (limited to 'devdocs/html/element%2Fdatalist.html') diff --git a/devdocs/html/element%2Fdatalist.html b/devdocs/html/element%2Fdatalist.html new file mode 100644 index 00000000..fd4fe195 --- /dev/null +++ b/devdocs/html/element%2Fdatalist.html @@ -0,0 +1,159 @@ +

<datalist>: The HTML Data List element

The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

+

Try it

+
+

To bind the <datalist> element to the control, we give it a unique identifier in the id attribute, and then add the list attribute to the <input> element with the same identifier as value. Only certain types of <input> support this behavior, and it can also vary from browser to browser.

Note: The <option> element can store a value as internal content and in the value and label attributes. Which one will be visible in the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the value attribute.

+
+

Attributes

+

This element has no other attributes than the global attributes, common to all elements.

+

Examples

+ +

Textual types

+
+

Recommended values in types text, search, url, tel, email and number, are displayed in a drop-down menu when user clicks or double-clicks on the control. Typically the right side of a control will also have an arrow pointing to the presence of predefined values.

+

html

+
<label for="myBrowser">Choose a browser from this list:</label>
+<input list="browsers" id="myBrowser" name="myBrowser" />
+<datalist id="browsers">
+  <option value="Chrome"></option>
+  <option value="Firefox"></option>
+  <option value="Opera"></option>
+  <option value="Safari"></option>
+  <option value="Microsoft Edge"></option>
+</datalist>
+
+
+
+ + +
+
+

Date and Time types

+
+

The types month, week, date, time and datetime-local can show an interface that allows a convenient selection of a date and time. Predefined values can be shown there, allowing the user to quickly fill the control value.

Note: When type is not supported, text type creating simple text field will be used instead. That field will correctly recognize recommended values and display them to the user in a drop-down menu.

+

html

+
<input type="time" list="popularHours" />
+<datalist id="popularHours">
+  <option value="12:00"></option>
+  <option value="13:00"></option>
+  <option value="14:00"></option>
+</datalist>
+
+
+
+ + +
+
+

Range type

+
+

The recommended values in the range type will be shown as series of hash marks that the user can easily select.

+

html

+
<label for="tick">Tip amount:</label>
+<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
+<datalist id="tickmarks">
+  <option value="0"></option>
+  <option value="10"></option>
+  <option value="20"></option>
+  <option value="30"></option>
+</datalist>
+
+
+
+ + +
+
+

Color type

+
+

The color type can show predefined colors in a browser-provided interface.

+

html

+
<label for="colors">Pick a color (preferably a red tone):</label>
+<input type="color" list="redColors" id="colors" />
+<datalist id="redColors">
+  <option value="#800000"></option>
+  <option value="#8B0000"></option>
+  <option value="#A52A2A"></option>
+  <option value="#DC143C"></option>
+</datalist>
+
+
+
+ + +
+
+

Password type

+
+

The specification allows linking <datalist> with a password type, but no browser supports it for security reasons.

+

html

+
<label for="pwd">Enter a password:</label>
+<input type="password" list="randomPassword" id="pwd" />
+<datalist id="randomPassword">
+  <option value="5Mg[_3DnkgSu@!q#"></option>
+</datalist>
+
+
+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content.
Permitted content Either phrasing content or zero or more <option> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role listbox
Permitted ARIA roles No role permitted
DOM interface HTMLDataListElement
+

Accessibility concerns

+
+

When deciding to use the <datalist> element, here are some accessibility issues to be mindful of:

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-datalist-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
datalist2012
4The <datalist> element will only create a dropdown for textual types, such as text, search, url, tel, email and number. The date, time, range and color types are not supported.
109.512.14.4.333 +
79The dropdown menu containing available options does not appear. See bug 1535985.
4–79		2012.22.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist +

+
-- cgit v1.2.3