radio buttons in HTML

Create a set of radio buttons for your website:

• You can use radio buttons for questions where you want the user to choose only one answer from multiple options given.
• Radio buttons are a type of input.
• The radio buttons are nested in the label element.
• By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.
• All related radio buttons should have the same name attribute to create a radio button group.
• By creating a radio group selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
• Here is an example of a radio button:

<label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label>

• It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element.
• This allows assistive technologies to create a linked relationship between the label and the related input element. For example:

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>

• We can also nest the input elements within the input tags:

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

• The example of the button element code is:

<form action="https://freecatphotoapp.com/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
</form>