New pages: seven HTMLInputElement reflective properties (mdn#35848)

* New pages: six HTMLInputElement reflective properties

* New pages: six HTMLInputElement reflective properties

* New pages: seven HTMLInputElement reflective properties

* grammar nit

* update attribute/prop confusion

files/en-us/web/api/htmlinputelement/accept/index.md

@@ -0,0 +1,40 @@
+---
+title: "HTMLInputElement: accept property"
+short-title: accept
+slug: Web/API/HTMLInputElement/accept
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.accept
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`accept`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`accept`](/en-US/docs/Web/HTML/Element/input#accept) attribute, generally a comma-separated list of unique file type specifiers providing a hint for the expected file type for an [`<input>` of type `file`](/en-US/docs/Web/HTML/Element/input/file). If the attribute is not explicitly set, the `accept` property is an empty string.
+
+## Value
+
+A string representing the element's `accept` value or an empty string if no `accept` is explicitly set.
+
+## Example
+
+```js
+const inputElement = document.querySelector("#time");
+console.log(inputElement.accept); // the current value of the accept attribute
+inputElement.accept = ".doc,.docx,.xml,application/msword"; // sets the accept value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLInputElement.type")}}
+- {{domxref("HTMLInputElement.multiple")}}
+- {{domxref("HTMLInputElement.capture")}}
+- [File type specifiers](/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
+- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
+- [File API](/en-US/docs/Web/API/File_API)

files/en-us/web/api/htmlinputelement/autocomplete/index.md

@@ -0,0 +1,38 @@
+---
+title: "HTMLInputElement: autocomplete property"
+short-title: autocomplete
+slug: Web/API/HTMLInputElement/autocomplete
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.autocomplete
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`autocomplete`** property of the {{DOMxRef("HTMLInputElement")}} interface indicates whether the value of the control can be automatically completed by the browser. It reflects the {{htmlelement("input")}} element's [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.
+
+## Value
+
+A string; the value of the `autocomplete` attribute (`"on"`, `"off"`, a [`<token-list>`](/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens)), or the empty string `""` if unspecified.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("name");
+console.log(inputElement.autocomplete);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMxRef("HTMLInputElement.value")}}
+- HTML [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute
+- ARIA [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) attribute
+- [Turning off autocompletion](/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion)

files/en-us/web/api/htmlinputelement/capture/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLInputElement: capture property"
+short-title: capture
+slug: Web/API/HTMLInputElement/capture
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.capture
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`capture`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`capture`](/en-US/docs/Web/HTML/Attributes/capture) attribute. Only relevant to the [`<input>` of type `file`](/en-US/docs/Web/HTML/Element/input/file), the property and attribute specify whether, a new file should be captured from a user-facing (`user`) or outward facing (`environment`) camera or microphone. The type of file is defined the [`accept`](/en-US/docs/Web/HTML/Attributes/accept) attribute. If the attribute is not explicitly set, the `capture` property is an empty string.
+
+## Value
+
+A string; Generally either `user` or `environment`, or an empty string (`""`).
+
+## Example
+
+```js
+const inputElement = document.querySelector("avatar");
+console.log(inputElement.capture); // the current value of the capture attribute
+inputElement.capture = "user"; // sets the capture value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLInputElement.type")}}
+- {{domxref("HTMLInputElement.multiple")}}
+- {{domxref("HTMLInputElement.accept")}}
+- {{domxref("HTMLInputElement.files")}}
+- [File type specifiers](/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
+- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
+- [File API](/en-US/docs/Web/API/File_API)

files/en-us/web/api/htmlinputelement/pattern/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLInputElement: pattern property"
+short-title: pattern
+slug: Web/API/HTMLInputElement/pattern
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.pattern
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`pattern`** property of the {{DOMxRef("HTMLInputElement")}} interface represents a [regular expression](/en-US/docs/Web/JavaScript/Guide/Regular_expressions) a non-null {{HTMLElement("input")}} value should match. It reflects the {{htmlelement("input")}} element's [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute.
+
+Valid for `text`, `search`, `url`, `tel`, `email`, and `password` types, the `pattern` attribute defines a regular expression that the input's {{DOMxRef("HTMLInputElement.value", "value")}} must match in order for the value to pass [constraint validation](/en-US/docs/Web/HTML/Constraint_validation).
+
+If a non-`null` value doesn't conform to the constraints set by the `pattern` value, the {{domxref('ValidityState')}} object's read-only {{domxref('ValidityState.patternMismatch','patternMismatch')}} property will be true.
+
+## Value
+
+A string.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("year");
+console.log(input.pattern);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMXref("HTMLInputElement.value")}}
+- [Client-side validation](/en-US/docs/Web/HTML/Element/input#client-side_validation)
+- {{CSSXref(":valid")}} and {{CSSXref(":invalid")}} pseudo-classes

files/en-us/web/api/htmlinputelement/placeholder/index.md

@@ -0,0 +1,37 @@
+---
+title: "HTMLInputElement: placeholder property"
+short-title: placeholder
+slug: Web/API/HTMLInputElement/placeholder
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.placeholder
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`placeholder`** property of the {{DOMxRef("HTMLInputElement")}} interface represents a hint to the user of what can be entered in the control. It reflects the {{htmlelement("input")}} element's [`placeholder`](/en-US/docs/Web/HTML/Element/input#placeholder) attribute.
+
+## Value
+
+A string.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("phone");
+console.log(input.placeholder);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMXref("HTMLInputElement.value")}}
+- {{cssxref("::placeholder")}} pseudo-element
+- {{CSSXref(":placeholder-shown")}} pseudo-class

files/en-us/web/api/htmlinputelement/readonly/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLInputElement: readOnly property"
+short-title: readOnly
+slug: Web/API/HTMLInputElement/readOnly
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.readOnly
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`readOnly`** property of the {{DOMxRef("HTMLInputElement")}} interface indicates that the user cannot modify the value of the {{htmlelement("input")}}. It reflects the {{htmlelement("input")}} element's [`readonly`](/en-US/docs/Web/HTML/Element/input#readonly) boolean attribute; returning `true` if the attribute is present and `false` when omitted.
+
+Unlike a form control with a true {{domxref("HTMLInputElement.disabled", "disabled")}} property, a true `readOnly` property value does not prevent the user from clicking or selecting in the control.
+
+While the HTML `readonly` attribute is ignored if the type is `hidden`, `range`, `color`, `checkbox`, `radio`, `file`, `submit`, `reset`, `button`, and `image`, the `readOnly` property is `true` for these input types if the attribute is present, `false` otherwise.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("total");
+console.log(inputElement.readOnly);
+inputElement.readOnly = true;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMXref("HTMLInputElement.disabled")}}
+- {{cssxref(":read-only")}} pseudo-class

files/en-us/web/api/htmlinputelement/required/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLInputElement: required property"
+short-title: required
+slug: Web/API/HTMLInputElement/required
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.required
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`required`** property of the {{DOMxRef("HTMLInputElement")}} interface specifies that the user must fill in a value before submitting a form. It reflects the {{htmlelement("input")}} element's [`required`](/en-US/docs/Web/HTML/Element/input#required) attribute.
+
+While the HTML boolean `required` attribute is ignored if the type is `hidden`, `range`, `color`, `submit`, `reset`, `button`, and `image`, the `required` property is `true` for these input types if the attribute is present, `false` otherwise.
+
+If a required input doesn't have a value, the {{domxref('ValidityState')}} object's read-only {{domxref('ValidityState.valueMissing','valueMissing')}} property will be true.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("name");
+console.log(inputElement.required);
+inputElement.required = true;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMXref("HTMLInputElement.validity")}}
+- {{cssxref(":required")}} pseudo-class