<input> elements of type "text" create basic single-line text fields. - MDN
They can also be combined with an .ods-field--hint to provide greater context:
This Boolean attribute prevents the user from interacting with the input. In particular, the click event is not dispatched on disabled controls, and disabled controls aren't submitted with their form. - MDN
This Boolean attribute prevents the user from modifying the value of the input. - MDN
The :optional CSS pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it. [...] This pseudo-class is useful for styling fields that are not required to submit a form. - MDN
Based on our use cases, it's a better affordance to treat :required as our default form behavior and signal :optional forms instead.
The :invalid CSS pseudo-class represents any <input> or other <form> element whose contents fail to validate. - MDN
Because of the current inability to ensure consistent validation behavior across browsers, we're using the [data-invalid] attribute to indicate this state.
Note, when indicating a validation error, please use a .ods-field--error to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.
The HTML <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form. - MDN
<input> elements of type "email" are used to let the user enter and edit an email address, or, if the multiple attribute is specified, a list of email addresses. The input value is automatically validated to ensure that it's either empty or a properly-formatted email address (or list of addresses) before the form can be submitted. The :valid and :invalid CSS pseudo-classes are automatically applied as appropriate. - MDN
<input> elements of type "password" provide a way for the user to securely enter a password. The element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). This character will vary depending on the user agent and OS. - MDN
<input> elements of type "tel" are used to let the user enter and edit a telephone number. Unlike <input type="email"> and <input type="url">, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world. - MDN