Fundación - Casillas de verificación y botones de opción

Descripción

Las casillas de verificación se pueden usar para seleccionar múltiples opciones de una lista; El botón de radio se puede utilizar para seleccionar solo una opción.
Incluya un conjunto de casillas de verificación y botones de opción en un elemento de conjunto de campos y proporcióneles un texto común mediante el elemento de leyenda .
Cada control individual en el elemento fieldset debe tener una etiqueta separada, que se puede crear usando una etiqueta de etiqueta.

Ejemplo

El siguiente ejemplo demuestra el uso de casillas de verificación y botones de opción en Foundation.

<html>
   <head>
      <title>Checkboxes and Radio Buttons</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <form>
         <div class = "row">
            <fieldset class = "medium-12 columns">
               <legend>Select your vehicle</legend>

               <input type = "radio" name = "vehicle" value = "XUV" id = "vehicleXUV" required>
               <label for = "vehicleXUV">XUV</label>

               <input type = "radio" name = "vehicle" value = "XYLO" id = "vehicleXYLO">
               <label for = "vehicleXYLO">XYLO</label>

               <input type = "radio" name = "vehicle" value = "SCORPIO" id = "vehicleSCORPIO">
               <label for = "vehicleSCORPIO">SCORPIO</label>
            </fieldset>
         </div>

         <div class = "row">
            <fieldset class = "medium-12 columns">
               <legend>Choose your favourite company</legend>

               <input id = "audi" type = "checkbox">
               <label for = "audi">Audi</label>

               <input id = "mahindra" type = "checkbox">
               <label for = "mahindra">Mahindra</label>

               <input id = "benz" type = "checkbox">
               <label for = "benz">Benz</label>
            </fieldset>
         </div>

      </form>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html dado anteriormente forms_check_radio.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page