diff --git a/html-cheat-sheet/Media/pic_trulli.png b/html-cheat-sheet/Media/pic_trulli.png new file mode 100644 index 0000000..727a89c Binary files /dev/null and b/html-cheat-sheet/Media/pic_trulli.png differ diff --git a/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/datalist.html b/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/datalist.html index 88b01b8..950e590 100644 --- a/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/datalist.html +++ b/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/datalist.html @@ -15,19 +15,62 @@
- The <datalist> HTML element contains a set of
- <option>
- elements that represent the
- permissible or recommended
- options available to choose from within other controls.
+ The <datalist> HTML element tag specifies a list of pre-defined options for an <input> element.
+
+ The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users
+ will see a drop-down list of pre-defined options as they input data.
+
+ The <datalist> element's id attribute must be equal to the <input> element's list attribute
+ (this binds them together).
+ Example:
+
+ A datalist with pre-defined options (connected to an <input> element):
+
+
+ <form action="/action_page.php" method="get">
+ <label for="browser">Choose your browser from the list:</label>
+ <input list="browsers" name="browser" id="browser">
+ <datalist id="browsers">
+ <option value="Edge">
+ <option value="Firefox">
+ <option value="Chrome">
+ <option value="Opera">
+ <option value="Safari">
+ </datalist>
+ <input type="submit">
+ </form>
+
+
+
+ Note: The datalist tag is not supported in Safari 12.0 (or earlier).
+ +