Forms and Inputs Flashcards
What are forms?
Forms are containers that hold a set of inputs.
What are inputs?
Inputs are individual components that a user interacts with - typically corresponding to a single data point.
HTML provides numerous input types (text, email, number, password, etc.), and input types differ in how they are rendered. Inputs also vary in how they are validated.
What doest the <form> element do?
The
<form> element wraps all our inputs and labels.
</form>
What is the action attribute?
The action attribute is the URL of the server endpoint that submitted form data should be sent to.
What is the method attribute?
The method attribute is the request method that the browser should use when sending the data to the server.
Usually you’ll want method=”post”, but method=”get” is also possible.
What is the fieldset element?
Used to group together related inputs and labels.
The main reason to use fieldsets is that they help web crawlers and screen readers understand how inputs are grouped together (even if this is not revealed visually to sighted users).
What is the legend element?
It is like the title for the fieldset.
For screen readers, it adds extra context to the inputs in the fieldset.
What do labels do?
Labels tell human users, web crawlers, and screen readers what an input is for -using the for attribute.
What is the for attribute?
It goes on a label and its value should be set to the ID of the input it is for.
What is the placeholder attribute?
Input attribute.
Used to set text that initially displays before the user has input any data.
Because they are meant to offer examples of desired input, they should not be used in place of labels.
What is the required attribute?
Input attribute.
Used to indicate that an input must be filled out.
When the user submits the form, if there are any required child inputs on the form, the browser will display a message telling the user where they need to supply data.
What is the pattern attribute?
Input attribute.
Used to supply regular expression patterns that the user’s input must match in order to be valid.
What is the type attribute?
Input attribute.
This attribute determines how the element looks and how its validation works.
Input types also provide some accessibility by dictating the kind of keyboard a smartphone will display for a user.
What are the select and option elements?
The element is used to let users choose from a list of options. tags wrap a set of one or more options, and you can pre-select an individual
by adding the selected attribute.
What is the button element?
Can use elements to allow users to submit and reset the form.
This is done by setting the type attribute.
What is the accessibility tree?
The accessibility information for forms, and all other DOM elements, is stored in the accessibility tree.
ARIA uses this tree to send information to and receive information from assistive devices such as screen readers.
This tree stores the roles of the form elements, the elements’ accessible names (determined by their labels), the state the form elements are in (if a radio is selected or unselected), and how to interact with those elements.
All of this information will be relayed by a screen reader when the user arrives at a given element, and it will be updated and relayed again when a user does something to change it.
