Blog-Archiv

Donnerstag, 21. Juli 2022

HTML Radio Buttons and their Groups

Radio buttons do not make much sense when they are alone, because they signalize a single selection among several options. That means, only one of the options is selected, and when another one gets selected by the user, the former one will be de-selected by the browser. Radio buttons are the simplest case of cross-field-logics, i.e. one field depends on the state of others. But how do they manage their single selection?

How Implement Radio Buttons

<html>
<body>

    <p>Web language:</p>
    
    <input type="radio" id="html" name="language" value="HTML5" checked>
    <label for="html">HTML</label>
    <br>
    <input type="radio" id="css" name="language" value="CSS3">
    <label for="css">CSS</label>
    <br>
    <input type="radio" id="javascript" name="language" value="ES6">
    <label for="javascript">JavaScript</label>

</body>
</html>

This renders as (border was added by me):

Web language:



If you click one item, the formerly selected item will be de-selected. How do the items know each other? Their common link is the name attribute, in this case name="language". The browser knows that all radio buttons that have the same name belong together, and it manages what we call a radio-group.

  • type="radio"
    tells the browser to render this as radio button
  • id="html"
    is the DOM-ID of the radio button
  • name="language"
    tells that "language" is the name of the radio-group the browser will generate
  • value="HTML5"
    the property-name for the value will be "HTML5" in the form-submit data
  • checked
    the presence of this attribute marks the pre-selected radio button

It does not matter where the radio buttons are, and how deep you nest them into the HTML element structure, the name attribute will bind them together. Following may not be intended, but you can select just one "language" here: 

    <p>Web language:</p>
    
    <div>
      <input type="radio" id="html" name="language" value="HTML5">
      <label for="html">HTML</label>
      <br>
      <input type="radio" id="css" name="language" value="CSS3">
      <label for="css">CSS</label>
      <br>
      <input type="radio" id="javascript" name="language" value="ES6">
      <label for="javascript">JavaScript</label>
    </div>

    <p>Programming language:</p>
    
    <div>
      <input type="radio" id="java" name="language" value="Java11">
      <label for="html">Java</label>
      <br>
      <input type="radio" id="python" name="language" value="Python3">
      <label for="css">Python</label>
    </div>

Web language:



Programming language:


Distinguish Radio Groups

So let's allow the user to choose both Web language and programming language, although just one of each: 

    <p>Web language:</p>
    
    <div>
      <input type="radio" id="html" name="web-language" value="HTML5">
      <label for="html">HTML</label>
      <br>
      <input type="radio" id="css" name="web-language" value="CSS3">
      <label for="css">CSS</label>
      <br>
      <input type="radio" id="javascript" name="web-language" value="ES6">
      <label for="javascript">JavaScript</label>
    </div>

    <p>Programming language:</p>
    
    <div>
      <input type="radio" id="java" name="programming-language" value="Java11">
      <label for="html">Java</label>
      <br>
      <input type="radio" id="python" name="programming-language" value="Python3">
      <label for="css">Python</label>
    </div>

Web language:



Programming language:


Here you can select one from both languages. The difference is that the radio-groups have different name attributes.

Limit Name Attribute Uniqueness

Thus the name attribute does not depend on the HTML structure. Is this correct? There is one element that makes it possible to have the same radio-group name for different radio button groups: the form. 

    <p>Web language:</p>
    
    <form>
      <input type="radio" id="html" name="language" value="HTML5">
      <label for="html">HTML</label>
      <br>
      <input type="radio" id="css" name="language" value="CSS3">
      <label for="css">CSS</label>
      <br>
      <input type="radio" id="javascript" name="language" value="ES6">
      <label for="javascript">JavaScript</label>
    </form>

    <p>Programming language:</p>
    
    <form>
      <input type="radio" id="java" name="language" value="Java11">
      <label for="html">Java</label>
      <br>
      <input type="radio" id="python" name="language" value="Python3">
      <label for="css">Python</label>
    </form>

These two groups have the same name attribute, but are wrapped into form elements. Try it out here:

Web language:



Programming language:


You can select one item of each group, although the groups have the same name attribute!

Conclusion

The examples here do not state that you can not have knowledge about HTML, CSS, JavaScript, ... at the same time. Thus they are not realistic, except in the technical way.

I hope I could help to understand radio buttons a little better!




Keine Kommentare:

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)