Review

 HTML FORMS

Nice work interacting with the extremely common and useful <form> element!

In this lesson we went over:

  • The purpose of a <form> is to allow users to input information and send it.
  • The <form>‘s action attribute determines where the form’s information goes.
  • The <form>‘s method attribute determines how the information is sent and processed.
  • To add fields for users to input information we use the <input> element and set the type attribute to a field of our choosing:
    • Setting type to "text" creates a single row field for text input.
    • Setting type to "password" creates a single row field that censors text input.
    • Setting type to "number" creates a single row field for number input.
    • Setting type to "range" creates a slider to select from a range of numbers.
    • Setting type to "checkbox" creates a single checkbox that can be paired with other checkboxes.
    • Setting type to "radio" creates a radio button that can be paired with other radio buttons.
    • 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.
    • Setting type to "submit" creates a submit button.
  • A <select> element is populated with <option> elements and renders a dropdown list selection.
  • A <datalist> element is populated with <option> elements and works with an <input> to search through choices.
  • A <textarea> element is a text input field that has a customizable area.
  • 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.

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. Take the opportunity to take what you’ve learned, and apply it!

Comments

Post a Comment

Popular posts from this blog

Password Input: type password attribute and relationship between name and id attribute of input tag

Image
  HTML FORMS Password Input Think about all those times we have to put sensitive information, like a password or PIN, into a  <form> . We wouldn’t want our information to be seen by anyone peeking over our shoulder! Luckily, we have the  type="password"  attribute for  <input> ! An  <input type ="password">  element will replace input text with another character like an asterisk (*) or a dot (•). The code below provides an example of how to create a password field: <form>    <label for = "user-password" > Password: </label>    <input type = "password" id = "user-password" name = "user-password" > </form> After a user types into the field, it would look like: Even though the password field obscures the text of the password, when the form is submitted, the value of the text is sent. In other words, if “hunter2” is typed into the password field, “user-password=hunter2” is sent a...
Read more

Adding a Label: label tag, for attribute and id attribute for input tag.

Image
  HTML FORMS Adding a Label In the previous exercise we created an  <input>  element but we didn’t include anything to explain what the  <input>  is used for. For a user to properly identify an  <input>  we use the appropriately named  <label>  element. The  <label>  element has an opening and closing tag and displays text that is written between the opening and closing tags. To associate a  <label>  and an  <input> , the  <input>  needs an  id  attribute. We then assign the  for  attribute of the  <label>  element with the value of the  id  attribute of  <input> , like so: <form action = "/example.html" method = "POST" >    <label for = "meal" > What do you want to eat? </label>    <br>    <input type = "text" name = "food" id = "meal" > ...
Read more