Radio Button Input: Type radio attribute & value attribute

 HTML FORMS

Checkboxes work well if we want to present users with multiple options and let them choose one or more of the options. However, there are cases where we want to present multiple options and only allow for one selection — like asking users if they agree or disagree with the terms and conditions. Let’s look over the code used to create radio buttons:

<form>
  <p>What is sum of 1 + 1?</p>
  <input type="radio" id="two" name="answer" value="2">
  <label for="two">2</label>
  <br>
  <input type="radio" id="eleven" name="answer" value="11">
  <label for="eleven">11</label>
</form>

Which renders:

rendered form containing radio buttons

Notice from the code snippet, radio buttons (like checkboxes) do not display their value. We have an associated <label> to represent the value of the radio button. To group radio buttons together, we assign them the same name and only one radio button from that group can be selected.

Let’s see this in action by creating our own radio buttons.


Instructions:

1.We can give our users the option to make the burger into a cheeseburger. Let’s use radio buttons for that.

In <section> element with a class of "cheesy" there are two <label>s that don’t have associated <input> elements. Add an <input> element associated with the first <label>.

The created <input> should have:

  • an id set to "yes".
  • a type set to "radio".
  • a name attribute with a value of "cheese".
  • a value of "yes".
  • Hint:
  • Assign the attributes and values inside the <input> tag.
2.Awesome, now add another <input> element to give users another choice. The created <input> should have:
  • an id set to "no".
  • a type set to "radio".
  • a name attribute with a value of "cheese".
  • a value of "no".

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