Bulma es un marco CSS gratuito y de código abierto basado en Flexbox . Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva.
Los botones de opción son botones que se excluyen mutuamente, es decir, solo puede seleccionar una opción en un grupo de botones de opción. El elemento Radio es un simple envoltorio alrededor de la entrada de radio. Bulma no diseña los botones de radio para garantizar la compatibilidad entre navegadores. Para asegurarse de que los botones de opción estén agrupados, deben tener el mismo atributo de nombre .
Para deshabilitar un botón de opción, podemos usar el atributo HTML deshabilitado en el elemento de entrada, así como su etiqueta, y para verificar un botón de opción de forma predeterminada, el atributo HTML verificado se puede usar en el elemento de entrada.
Clase de Radio Bulma:
- radio: Esta clase le da al botón de radio un aspecto de tema de Bulma.
Sintaxis:
<label class="radio">
<input type="radio" name="gender">
Yes
</label>
Ejemplo 1: El siguiente ejemplo muestra dos botones de opción simples agrupados.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma | Radio</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.control{
margin-top: 25px;
}
p{
margin-bottom: 10px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma | Radio</b>
<div class="container">
<div class="control">
<p><b>Choose Gender:</b></p>
<label class="radio">
<input type="radio" name="gender">
Male
</label>
<label class="radio">
<input type="radio" name="gender">
Female
</label>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra cómo deshabilitar un botón de radio usando el atributo HTML deshabilitado .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma | Radio</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.control{
margin-top: 25px;
}
p{
margin-bottom: 10px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma | Radio</b>
<div class="container">
<div class="control">
<p><b>Choose a Game:</b></p>
<label class="radio">
<input type="radio" name="game">
Chess
</label>
<label class="radio">
<input type="radio" name="game">
Football
</label>
<label class="radio" disabled>
<input type="radio" name="game" disabled>
Cricket
</label>
</div>
</div>
</body>
</html>
Producción:
bulmaradio
Ejemplo 3: El siguiente ejemplo muestra cómo marcar un botón de opción de forma predeterminada utilizando el atributo marcado de HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma | Radio</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.control{
margin-top: 25px;
}
p{
margin-bottom: 10px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma | Radio</b>
<div class="container">
<div class="control">
<p><b>Choose a Game:</b></p>
<label class="radio">
<input type="radio" name="game" checked>
Chess
</label>
<label class="radio">
<input type="radio" name="game">
Football
</label>
<label class="radio">
<input type="radio" name="game">
Cricket
</label>
</div>
</div>
</body>
</html>
Producción:
bulmaradio
Referencia: https://bulma.io/documentation/form/radio/