Forms and inputs Flashcards
(31 cards)
What method is used for a login and why?
POST methods are used for logins.
They do not get cached on request and do not remain in browser history. In contrast, GET method body data goes in the URL.
What is the point of a form element?
Form elements exist to facilitate collecting user input - one of the pain points of the web!
How do form elements work with the inputs within them?
What is a controlled vs uncontrolled component? What are the pros and cons?
A controlled component uses React state to manage form data, rather than managing the form data through the DOM itself using refs.
Controlled components offer more flexibility over form data and its synchronisation with the UI. It allows validation to be performed as the user types since the data is readily available in component state. However, in-built reset functions don’t work on them.
Uncontrolled components work seamlessly with in-built reset functions and are simpler to implement since they use the DOM itself. However, validation must usually be done after submission and in React you must use Refs to retrieve it from the doc.
What kinds of input elements are there?
Text fields, checkboxes, radio buttons, submit buttons, reset buttons.
These are defined by the type attribute.
How do we add labels to input elements?
We can add labels to input elements by using their for attribute and matching it with an input’s id attribute.
What are the advantages of using labels?
- for screen readers - when a user focuses on the input it will read out the label.
- for clicking small inputs easier - clicking the user will focus or select the input
What is the default width of an input element?
20 characters.
When would you use a checkbox and when would you use a radio button?
Radio inputs should be used with the same name attribute for inputs that accept a single choice of many.
Checkboxes are used for questions where zero or multiple options are available.
How is the submit button written and how does it work?
Written as an input element with type submit and a value that denotes the text on the button. It runs the function specified by the form’s action attribute.
What is the target attribute on a form for?
The target attribute (e.g. “_blank”) determines where the response to your form action will open. The default value is “_self”.
What method does the form action use by default and how do you change it?
By default forms use the GET method, which is dangerous for sensitive info because it appends the form data to the URL in name/value pairs, and the length of a URL is limited (2048 max).
To change it, just edit the method attribute on a form to “post” or whatever method you need.
What are pros and cons of the GET method?
Appending the form data on submission helps for creating bookmarkable search pages but on the downside it can put sensitive data in the search bar.
Thus it is good for non-secure data. POST is required for sending large amounts of data.
When must you NEVER use the GET method?
When using sensitive data.
How do you turn on or off autofill?
The autocomplete =”on” / “off” attribute determines whether the browser can autofill values.
What are some of the elements that can be used in html forms and what do they do?
Hint: inp, lab, sel/op, tex, fie/leg, datlis.
The input element: for text, radios, checkboxes.
The label element: for helping screen-readers and clicking on small input elements.
The select / option drop down list (which always has something pre-selected).
The textarea element gives a multi-line input with multiple columns/rows (attributes).
The fieldset element and legend element is used for breaking up different parts of the form.
The data list element is for making a input element have (non-binding) suggestions. The binds are done through input’s list attribute and datalists id.
How does the select / option drop down list work? What is a common complaint about it?
A parent select element contains an option list where the first item is selected. It is a drop down list, which are often seen as hard to style.
The size attribute determines how many items to show at a time.
The multiple attribute allows multiple items to be selected if you hold down Ctrl.
What are some less common input types?
color, date, datetime-local, email, file, hidden (invisible date used to aid in submission requests - visible in DOM), image (as a submit), month, number, range, reset, search, tel, text, time, url, week.
What does the input type=”reset” button do?
Resets all inputs in the form to default values.
What is the default input type?
Text
