Toggle Buttons: The buttons that can change from one state to another, i.e. which can be toggled from on state to off state or vice-versa are called toggle buttons. For example:
- A particular switch in our house can either be on or off. This is a very good example of a real life toggle switch.
- The WiFi or Bluetooth option in our phone is another example, that can either be on or off.
Radio Button: As the name suggests, it is the concept of the buttons in a radio, where for the first station, we select the first button, for the second station we select the second button and so on. It is like a multiple-choice question where at a time only one button will be active. Here we select from a list of options. For example:
- Buttons in a FM Radio.
- Multiple choice questions in an exam.
Example: Create a radio button using Bootstrap.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Radio Button</ title >
</ head >
< body >
< div class = "radio" >
< div class = "btn-group btn-group-toggle" data-toggle = "buttons" >
< label class = "btn btn-primary" >
< input type = "radio" name = "button" id = "button1" autocomplete = "off" checked> Radio button 1
</ label >
< label class = "btn btn-primary active" >
< input type = "radio" name = "button" id = "button2" autocomplete = "off" >
Radio button 2
</ label >
< label class = "btn btn-primary" >
< input type = "radio" name = "button" id = "button3" autocomplete = "off" >
Radio button 3
</ label >
< label class = "btn btn-primary" >
< input type = "radio" name = "button" id = "button4" autocomplete = "off" >
Radio button 4
</ label >
< label class = "btn btn-primary" >
< input type = "radio" name = "button" id = "button5" autocomplete = "off" >
Radio button 5
</ label >
</ div >
</ div >
</ body >
</ html >
|
Important points:
- We have to add a checked attribute to any one of the radio buttons such that it is pre-selected when the page loads. It is a boolean attribute.
- The same name has to be given to all the set of elements.
Example 2: The following code will help us to understand the difference (in code) to design a toggle and a radio button.
<!DOCTYPE html> < html >
< head >
<!-- Latest compiled and minified CSS -->
< link rel = "stylesheet" href =
<!-- jQuery library -->
< script src =
</ script >
<!-- Popper JS -->
< script src =
</ script >
<!-- Latest compiled JavaScript -->
< script src =
</ script >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" type = "text/css" href = "style.css" >
< link href =
rel = "stylesheet" >
< link href =
"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel = "stylesheet" >
< script src =
type = "text/javascript" >
</ script >
< link href =
rel = "stylesheet" type = "text/css" >
< link rel = "stylesheet" type = "text/css" href = "css/lightbox.min.css" >
< script type = "text/javascript" src =
"js/lightbox-plus-jquery.min.js" >
</ script >
< title >Buttons</ title >
< style >
.toggle,
.radio {
margin: 20px;
}
</ style >
</ head >
< body >
< div class = "toggle" >
< button type = "button" class = "btn btn-warning" data-toggle = "button" autocomplete = "off" >
Toggle Button
</ button >
</ div >
< div class = "radio" >
< div class = "btn-group btn-group-toggle" data-toggle = "buttons" >
< label class = "btn btn-primary" >
< input type = "radio" name = "button" id = "button1" autocomplete = "off"
checked> Radio button 1
</ label >
< label class = "btn btn-primary active" >
< input type = "radio" name = "button" id = "button2" autocomplete = "off" >
Radio button 2
</ label >
< label class = "btn btn-primary" >
< input type = "radio" name = "button" id = "button3" autocomplete = "off" >
Radio button 3
</ label >
< label class = "btn btn-primary" >
< input type = "radio" name = "button" id = "button4" autocomplete = "off" >
Radio button 4
</ label >
< label class = "btn btn-primary" >
< input type = "radio" name = "button" id = "button5" autocomplete = "off" >
Radio button 5
</ label >
</ div >
</ div >
</ body >
</ html >
|
Output: