From 46bcde62d3767fdba91163dfa30fa4b9fdaac5a6 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Wed, 28 Aug 2024 11:57:19 -0700
Subject: [PATCH] New page: HTMLInputElement.list (#35625)

* New page: HTMLInputElement.list

* Update files/en-us/web/api/htmlinputelement/list/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/htmlinputelement/list/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/htmlinputelement/list/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/htmlinputelement/list/index.md

* Update files/en-us/web/api/htmlinputelement/list/index.md

* Update files/en-us/web/api/htmlinputelement/list/index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 .../web/api/htmlinputelement/list/index.md    | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 files/en-us/web/api/htmlinputelement/list/index.md

diff --git a/files/en-us/web/api/htmlinputelement/list/index.md b/files/en-us/web/api/htmlinputelement/list/index.md
new file mode 100644
index 000000000000000..840e2563c898b18
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/list/index.md
@@ -0,0 +1,58 @@
+---
+title: "HTMLInputElement: list property"
+short-title: list
+slug: Web/API/HTMLInputElement/list
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.list
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`list`** read-only property of the {{domxref("HTMLInputElement")}} interface returns the {{domxref("HTMLDataListElement")}} pointed to by the [`list`](/en-US/docs/Web/HTML/Element/input#list) attribute of the element, or `null` if the `list` attribute is not defined or the `list` attribute's value is not associated with any `<datalist>` in the same tree.
+
+> [!NOTE]
+> This is a read-only property. To associate a `<datalist>` with an element, set the value of the `list` attribute with {{domxref("Element.setAttribute", "setAttribute()")}}.
+
+## Value
+
+An {{domxref("HTMLDataListElement")}} or `null`.
+
+## Example
+
+Given the following HTML:
+
+```html
+<label for="planet">Which planet are you from?</label>
+<input id="planet" type="text" list="superhero" />
+<datalist id="superhero">
+  <option value="Azarath" />
+  <option value="Krypton" />
+  <option value="Tamaran" />
+</datalist>
+```
+
+You can retrieve the `<datalist>` element associated with the `<input>`:
+
+```js
+const inputElement = document.querySelector("#planet");
+console.log(inputElement.list); // returns the superhero HTMLDatalistElement
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLInputElement.value")}}
+- {{domxref("HTMLInputElement.type")}}
+- {{domxref("HTMLDataListElement")}}
+- {{domxref("HTMLOptionElement")}}
+- {{domxref("HTMLCollection")}}
+- {{htmlelement("input")}}
+- {{htmlelement("datalist")}}
+- {{htmlelement("option")}}