Los formularios Spectre proporcionan el componente de control más común utilizado en los formularios regulares. En este artículo, discutiremos el cambio de formulario. El interruptor de formulario es un componente importante que se requiere para obtener el valor de activación o el valor de encendido/apagado del usuario como de costumbre.
Clase de cambio de formulario de formularios:
- form-switch: esta clase le da al botón de cambio 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-switch"><label>
El siguiente ejemplo ilustra el interruptor de formulario de Spectre Forms:
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 Switch 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-switch"> <input type="radio" name="gender"> <i class="form-icon"></i> Male </label> <label class="form-switch"> <input type="radio" 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:
Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms-switch
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA