New pages: HTML<formelements>Element.value properties (#35641)

* New pages: HTML<x>Element.value properties * Update files/en-us/web/api/htmltextareaelement/value/index.md Co-authored-by: Joshua Chen <[email protected]> * Apply suggestions from code review * Apply suggestions from code review --------- Co-authored-by: Joshua Chen <[email protected]>
mdn · Aug 30, 2024 · 45eeb37 · 45eeb37
1 parent 89d17a6
commit 45eeb37
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 0 deletions.
diff --git a/files/en-us/web/api/htmlbuttonelement/value/index.md b/files/en-us/web/api/htmlbuttonelement/value/index.md
@@ -0,0 +1,36 @@
+---
+title: "HTMLButtonElement: value property"
+short-title: value
+slug: Web/API/HTMLButtonElement/value
+page-type: web-api-instance-property
+browser-compat: api.HTMLButtonElement.value
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`value`** property of the {{DOMxRef("HTMLButtonElement")}} interface represents the value of the {{htmlelement("button")}} element as a string, or the empty string if no value is set. It reflects the element's [`value`](/en-US/docs/Web/HTML/Element/button#value) attribute.
+
+## Value
+
+A string containing the value of the {{htmlelement("button")}} element.
+
+## Examples
+
+```js
+const buttonElement = document.getElementById("givenname");
+console.log(`value: ${buttonElement.value}`);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("button")}}
+- {{DOMXref("HTMLButtonElement.type")}}
+- {{DOMXref("HTMLButtonElement.labels")}}
diff --git a/files/en-us/web/api/htmloptionelement/value/index.md b/files/en-us/web/api/htmloptionelement/value/index.md
@@ -0,0 +1,38 @@
+---
+title: "HTMLOptionElement: value property"
+short-title: value
+slug: Web/API/HTMLOptionElement/value
+page-type: web-api-instance-property
+browser-compat: api.HTMLOptionElement.value
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`value`** property of the {{DOMxRef("HTMLOptionElement")}} interface represents the value of the {{htmlelement("option")}} element as a string, or the empty string if no value is set. It reflects the element's [`value`](/en-US/docs/Web/HTML/Element/option#value) attribute, if present. Otherwise, it returns or sets the contents of the element, similar to the {{domxref("Node.textContent","textContent")}} property.
+
+## Value
+
+A string containing the `value` attribute value, if present, or the contents of the element.
+
+## Examples
+
+```js
+const optionElement = document.querySelector("datalist option:first-of-type");
+const oldValue = optionElement.value;
+optionElement.value = oldValue.toUpperCase();
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("option")}}
+- {{DOMXref("HTMLOptionElement.selected")}}
+- {{DOMXref("HTMLOptionElement.defaultSelected")}}
+- {{DOMXref("HTMLOptionElement.label")}}
diff --git a/files/en-us/web/api/htmloutputelement/value/index.md b/files/en-us/web/api/htmloutputelement/value/index.md
@@ -0,0 +1,40 @@
+---
+title: "HTMLOutputElement: value property"
+short-title: value
+slug: Web/API/HTMLOutputElement/value
+page-type: web-api-instance-property
+browser-compat: api.HTMLOutputElement.value
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`value`** property of the {{DOMxRef("HTMLOutputElement")}} interface represents the value of the {{htmlelement("output")}} element as a string, or the empty string if no value is set. It returns or sets the contents of the element, similar to the {{domxref("Node.textContent","textContent")}} property.
+
+> [!NOTE]
+> When the `value` property of an `<output>` element is set, the element goes into value mode and the default value is accessible only through the {{DOMXref("HTMLOutputElement.defaultValue")}} property.
+
+## Value
+
+A string containing the contents of the {{htmlelement("output")}} element.
+
+## Examples
+
+```js
+const outputElement = document.getElementById("log");
+console.log(`value: ${outputElement.value}`);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("output")}}
+- {{DOMXref("HTMLOutputElement.defaultValue")}}
+- {{DOMXref("HTMLOutputElement.labels")}}
+- {{DOMXref("HTMLOutputElement.htmlFor")}}
diff --git a/files/en-us/web/api/htmltextareaelement/value/index.md b/files/en-us/web/api/htmltextareaelement/value/index.md
@@ -0,0 +1,39 @@
+---
+title: "HTMLTextAreaElement: value property"
+short-title: value
+slug: Web/API/HTMLTextAreaElement/value
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.value
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`value`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface represents the value of the {{htmlelement("textarea")}} element as a string, which is an empty string if the widget contains no content. It returns or sets the raw value contained in the control.
+
+## Value
+
+A string containing the contents of the {{htmlelement("textarea")}} element.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+const oldText = textArea.value;
+textArea.value = oldText.toUpperCase();
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.textLength")}}
+- {{DOMXref("HTMLTextAreaElement.labels")}}
+- {{DOMXref("HTMLTextAreaElement.selectionStart")}}
+- {{DOMXref("HTMLTextAreaElement.selectionEnd")}}