Nice work interacting with the extremely common and useful
In this lesson we went over:
- The purpose of a
<form>is to allow users to input information and send it.
actionattribute determines where the form’s information goes.
methodattribute determines how the information is sent and processed.
- To add fields for users to input information we use the
<input>element and set the
typeattribute to a field of our choosing:
"text"creates a single row field for text input.
"password"creates a single row field that censors text input.
"number"creates a single row field for number input.
"range"creates a slider to select from a range of numbers.
"checkbox"creates a single checkbox which can be paired with other checkboxes.
"radio"creates a radio button that can be paired with other radio buttons.
"list"will pair the
<datalist>element if the
idof both are the same.
"submit"creates a submit button.
<select>element is populated with
<option>elements and renders a dropdown list selection.
<datalist>element is populated with
<option>elements and works with an
<input>to search through choices.
<textarea>element is a text input field that has a customizable area.
- When a
<form>is submitted, the
nameof the fields that accept input and the
valueof those fields are sent as
<form> element in conjunction with the other elements listed above allows us to create sites that take into consideration the wants and needs of our users. Take the opportunity to take what you’ve learned, and apply it!
If you want to challenge yourself:
- Create a form with multiple fields that accept user input.
- Add two separate sets of radio buttons or checkboxes.
- Search how to add placeholder (hint hint) to an input field. A placeholder shows ups when the field has no
value, it disappears after the user types or selects something in the field.