HTML Forms Flashcards
What elements help structure and organize forms?
Fieldset and legend. Both are important to screen readers. Particularly useful for radio and checkbox sections.
What is the point of a name attribute in a form input?
Only named inputs will be sent to server; name radio buttons in same group with same name so they behave correctly.
How do you create a textarea and set its height and width?
Use cols and rows attributes in the element, they’re required; use css as well, ideally height=auto, which will correspond to the row attribute.
How can you create an HTML-only input with custom autocomplete terms?
Use an input with type text and a “list” attribute that points to ID of a datalist element. No need for autocomplete=”on”. The datalist contains option elements.
Make a radio button or checkbox selected by default.
use the ‘checked’ attribute, just ‘checked’ no =true or anything like that.
Set minimum, maximum, and increment for inputs of type ‘number’ and ‘range’
min=”0” max=”100” step=”10” // increments between 0 and 100 in steps of 10.
How would you hide a form element and why would you do it?
Set type=”hidden”, and make sure to have a name and a value. Do it to send data to server.
How can you add ticks to a slider type of input?
If the input includes steps attribute, ie and edge will display ticks. Chrome and Safari will display if you use a datalist with the right number of options. FF requires some prefixed styling.
An input field requires that the user types text matching an uppercase letter followed by 3 numbers followed by any number of any character
[input type=”text” required pattern=”[A-Z][0-9]{3}.*”] (note quotes not slashes; it ends in dot (any character) and asterisk (any number of times)
What form attribute must be present to use custom JS validation?
The form element should contain the attribute ‘novalidate’
myInputElement.addEventListener( [what goes here?], function… for listening to changes in the input field?
myInputElement.addEventListener(‘input’, function… or keyup or others…
What attribute makes sure that our custom error message will be presented to everyone?
aria-live
To change styling of difficult-to-style elements such as search fields, use what attributes and values?
appearance, -webkit-appearance, -moz-appearance. Value should be ‘none’ or ‘textfield’ or several others.
To restrict user’s ability to drag textarea fields in all directions, use what property/value?
resize: vertical
Can you style an input that displays a placeholder?
Use input:placeholder-shown.
