Checkbox Input: type checkbox attribute & value attribute

 HTML FORMS

So far the types of inputs we’ve allowed were all single choices. But, what if we presented multiple options to users and allow them to select any number of options? Sounds like we could use checkboxes! In a <form> we would use the <input> element and set type="checkbox". Examine the code used to create multiple checkboxes:

<form>
  <p>Choose your pizza toppings:</p>
  <label for="cheese">Extra cheese</label>
  <input id="cheese" name="topping" type="checkbox" value="cheese">
  <br>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
  <br>
  <label for="anchovy">Anchovy</label>
  <input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>

Which renders:HTML form asking user to select pizza toppings and three topping selections as checkboxes

Notice in the example provided:

  • there are assigned values to the value attribute of the checkboxes. These values are not visible on the form itself, that’s why it is important that we use an associated <label> to identify the checkbox.
  • each <input> has the same value for the name attribute. Using the same name for each checkbox groups the <input>s together. However, each <input> has a unique id to pair with a <label>.

Alright, time to use checkboxes in our code!


Instructions:

1.Time to add some toppings! In the <section> with class="toppings", there are two <label>s but no associated <input> elements. Add an <input> element associated with the first <label>.

The created <input> should have:

  • an id set to "lettuce".
  • a name attribute with a value of "topping".
  • a type set to "checkbox"
  • a value of "lettuce".
  • Hint:
  • In this case, add the <input> before the <label>, so the text appears to the right of the checkbox. Assign the provided attributes inside the opening tag of the <input>.
2.Add another <input> element and associate it with the second <label>.

The <input> element should have:

  • an id set to "tomato".
  • a type set to "checkbox".
  • a name attribute with a value of "topping".
  • a value of "tomato".
3.Two choices are good, but it would be better to have even more.

Add another <input type="checkbox"> and <label> pair. Assign the name of the <input> to "topping". You’re free to decide the value and id but make sure that your new <label> and <input> are associated.


Hint:

You’ll need to add both a new <input> and an associated <label>.

The type of the <input> must be "checkbox" and the name set to "topping".

You’re free to decide the id, however, the value of the <label>‘s for attribute must match the id of the <input> element. The value of the <input> can be anything you want but it cannot be blank.



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