Essential Question: How can I make a form in HTML?
Mastery Objectives:
SWBAT create a form using HTML.
SWBAT create values, names, and types for input elements.
SWBAT use HTML specific attributes in their form.
Requirements:
Text box
Required input
Input of type number with a max and min value
Input of type number with a slider range
Input of type password
Dropdown menu using select
Radio button
Check boxes
Submit button
Create a datalist
Create a datalist that searches the input
Create a textarea with default text
Add values, names, and IDs to your elements
Directions: Create a form that contains all of the following attributes, methods, elements, etc. that can be put into a form. The subject can be anything school appropriate, for example, a form to order food. Your project should look nice and have basic CSS formatting. Use the links next to each item to give you information on how to do the skill.
The purpose of a <form> is to allow users to input information and send it. https://www.w3schools.com/html/html_forms.asp
The <form>‘s action attribute determines where the form’s information goes. https://www.w3schools.com/html/html_forms_attributes.asp
The <form>‘s method attribute determines how the information is sent and processed. https://www.w3schools.com/html/html_forms_attributes.asp
To add fields for users to input information we use the <input> element and set the type attribute to a field of our choosing: https://www.w3schools.com/html/html_form_elements.asp
Setting type to "text" creates a single row field for text input. https://www.w3schools.com/html/html_form_elements.asp https://www.w3schools.com/html/html_form_input_types.asp
Setting type to "password" creates a single row field that censors text input. https://www.w3schools.com/html/html_form_input_types.asp
Setting type to "number" creates a single row field for number input. https://www.w3schools.com/html/html_form_input_types.asp
Setting type to "range" creates a slider to select from a range of numbers. https://www.w3schools.com/html/html_form_input_types.asp
Setting type to "checkbox" creates a single checkbox that can be paired with other checkboxes. https://www.w3schools.com/html/html_form_elements.asp
Setting type to "radio" creates a radio button that can be paired with other radio buttons. https://www.w3schools.com/html/html_form_elements.asp
Setting type to "text" and adding the list attribute will pair the <input> with a <datalist> element if the list of <input> and the id of <datalist> are the same. https://www.w3schools.com/html/html_form_elements.asp
Setting type to "submit" creates a submit button. https://www.w3schools.com/html/html_form_input_types.asp
A <select> element is populated with <option> elements and renders a dropdown list selection. https://www.w3schools.com/html/html_form_elements.asp
A <datalist> element is populated with <option> elements and works with an <input> to search through choices. https://www.w3schools.com/html/html_form_elements.asp
A <textarea> element is a text input field that has a customizable area. https://www.w3schools.com/html/html_form_elements.asp
When a <form> is submitted, the name of the fields that accept input and the value of those fields are sent as name=value pairs. https://www.w3schools.com/html/html_form_attributes.asp
Using the <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. https://www.w3schools.com/html/html_form_attributes_form.asp