Forms Flashcards
What are form controls?
A web form’s HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input></input> element, although there are some other elements to learn about too.
Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and visually impaired users.
Explain what the form element is for and what two attributes it should always include
The form element is a container element like the div element - the form element wraps all of the inputs a user will interact with on a form.
The form element accepts two essential attributes:
The first is the action attribute which takes a URL value that tells the form where it should send its data to be processed.
The second is the method attribute which tells the browser which HTTP request method it should use to submit the form. The GET and POST request methods are the 2 that we will find the most.
GET method retrieve data from a server. For example, Google uses a GET request when you search as it gets the search results.
POST is used when we want to change something on the server. For example when a user makes an account or makes a payment on a website.
Explain what form controls are at a high level
Form control elements are the elements that users will interact with on the form, such as text boxes, dropdowns, checkboxes and buttons.
What is the name attribute for?
We need to let the backend, where we send our data, know what each piece of data represents. You can think of it as a variable name for the input. The input should always have a name attribute.
What are the three most common form controls you can use for allowing users to select predefined options?
Select dropdown
Checkboxes
Radio buttons
What are the three types of buttons in HTML?
Submit button:
<button>Submit</button>
Reset button:
<button>Reset</button>
Generic button:
<button>Click to Toggle</button>
What are the two most challenging aspects of styling forms?
1) Default browser styles:
Each browser has its own default styles for form controls, making the forms visually different for users depending on what browser they are using.
-To have a consistent design among all browsers, we have to override these default styles and style them ourselves.
2) Tricky and downright impossible to style form controls:
It is tricky when creating custom styles for radio buttons and checkboxes. Certain aspects of other elements are downright impossible to style, for example, calendar or date pickers.
What does the required validation do?
It makes the field required.
What validations can you use for checking text length?
You can use a minlength attribute with an integer value that represents the minimum number of characters we want to allow in the form control.
To add a maximum length validation, we give the form control a maxlength attribute with an integer value which represents the maximum number of characters we want to allow in the form control.
How can you validate the minimum and maximum of numeric inputs?
Min validation:
We can give the form control a min attribute with an integer value which represent the minimum number we want the form control to accept.
Max validation:
We can give the form control a max attribute with an integer value which represents the maximum number we want the form control to accept.
What can you use the pattern validation for?
When we want to ensure data matches a particular pattern. e.g real world applications would be checking if a credit card number or a zipcode is in the correct format.
To add a pattern validation, we give the form control a pattern attribute with a regular expression as the value.
What pseudo CSS selectors are available for styling valid and invalid inputs?
We can use the :valid and :invalid pseudo-classes to target form controls that have passed or failed validations.
e.g CSS
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
