Casilla de verificación de formulario de formularios de Spectre

Los formularios Spectre proporcionan el componente de control más común utilizado en los formularios regulares. En este artículo, discutiremos la casilla de verificación del formulario. La casilla de verificación del formulario es un componente importante que se requiere para obtener las opciones del usuario, como de costumbre, es como un botón de opción, pero puede obtener múltiples valores a la vez.

Clase de casilla de verificación de formulario:

form-checkbox: esta clase le da a la casilla de verificación un aspecto de espectro que se adapta al tema del espectro.
form-icon: Esta clase se utiliza para colocar las opciones del botón de radio.

Sintaxis:

<label class="form-Checkbox"><label>

El siguiente ejemplo ilustra la casilla de verificación del formulario de formularios de Spectre:

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Forms Form Checkbox Class</strong>
        <br>
    </center>
    <div class="form-group">
        <label class="form-label">
            Name
        </label>
        <input class="form-input" 
               placeholder="Please type your name">
        <label class="form-label">
            Mail Id
        </label>
        <input class="form-input" 
               placeholder="Your Mail Id">
        <br>
        <label class="form-label">Gender</label>
            <label class="form-checkbox">
              <input type="checkbox" name="gender">
              <i class="form-icon"></i> Male
            </label>
            <label class="form-checkbox">
              <input type="checkbox" name="gender">
              <i class="form-icon"></i> Female
            </label>
        </label>
        <br>
        <center>
            <button class="btn btn-success">
              LogIn
            </button>
            <button class="btn btn-error">
              Sign Up
            </button>
        </center>
    </div>
      
</body>
  
</html>

Producción:

Spectre Forms Form Checkbox

Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms-checkbox

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta