Spectre Forms es uno de los elementos más importantes de Spectre. Los formularios de Spectre nos ofrecen tantas clases de estilos comunes que diseñar un formulario se vuelve tan fácil. Como crear campos de entrada, área de texto, selección, casillas de verificación, etc. Todos los componentes se mencionan y describen a continuación.
- Entrada de formulario de espectro: este estilo de control se usa para establecer el campo de entrada.
- Spectre Form textarea: este estilo de control se utiliza para configurar el área de texto.
- Selección de forma de espectro: este estilo de control se utiliza para establecer las opciones de selección.
- Radio Spectre Form: este estilo de control solía configurar los botones de radio.
- Interruptor de forma de espectro: este estilo de control se usa para configurar los botones del interruptor.
- Casilla de verificación Spectre Form: este estilo de control se usa para establecer las casillas de verificación.
- Spectre Forms Formularios en línea: este estilo de control se usa para hacer que el formulario esté en línea.
- Spectre Forms Formas horizontales : este estilo de control se usa para hacer que la forma sea horizontal.
- Tamaños de formularios de Spectre : este estilo de control se utiliza para el tamaño del formulario.
- Iconos de formulario de espectro : este estilo de control se utiliza para establecer el icono utilizado en el formulario.
- Tipos de entrada de forma de espectro : este estilo de control se utiliza para establecer los tipos de entrada.
- Grupos de entrada de formulario Spectre: este estilo de control se utiliza para categorizar la entrada en grupos.
- Estilos de validación de formularios de Spectre : estos estilos de control se utilizan para establecer el éxito de la validación de formularios y los mensajes de error.
- Estilos deshabilitados de Spectre Form : este estilo de control se utiliza para deshabilitar el estilo de los componentes del formulario.
Clase de formas de espectro:
- form-group: Esta clase se utiliza para crear un formulario
Nota: Para crear un formulario en el espectro, la clase mencionada anteriormente será un contenedor del componente de formularios.
Sintaxis:
<div class="form-group"> ... </div>
El siguiente ejemplo ilustra las formas de espectro;
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Forms Class</title> <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 Class</strong> <br> </center> <form class="form-horizontal"> <form class="form-horizontal"> <div class="form-group"> <div class="col-3 col-sm-12"> <label class="form-label">Name:</label> </div> <div class="col-9 col-sm-12"> <input class="form-input" type="text" placeholder="Name"> </div> <div class="col-3 col-sm-12"> <label class="form-label">Email Id:</label> </div> <div class="col-9 col-sm-12"> <input type="text col-6" class="form-input is-success" placeholder="Email Id" value="mastermind@gmail.com"> </div> </div> <label class="form-label">Gender:</label> <label class="form-radio"> <input type="radio" name="gender"> <i class="form-icon"></i> Male </label> <label class="form-radio"> <input type="radio" name="gender"> <i class="form-icon"></i> Female </label> <label class="form-label"> Feedback: </label> <div class="col-9 col-sm-12"> <textarea class="form-input" id="input-example-1" rows="3"> </textarea> </div> <br> <button class="btn"> <i class="form-icon icon icon-shutdown"></i> </button> </form> </form> </body> </html>
Producción:
Formas de espectro
Ejemplo 2:
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 </strong> </center> <br> <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> <select class="form-select"> <option>Choose Course</option> <option>Front-End Development</option> <option>Back-End Development</option> <option>Full-stack Development</option> </select> <label class="form-label">Special</label> <label class="form-checkbox form-inline"> <input type="checkbox" name="gender"> <i class="form-icon"></i>JS </label> <label class="form-checkbox form-inline"> <input type="checkbox" name="gender"> <i class="form-icon"></i>Spectre </label> <label class="form-label">Gender</label> <label class="form-radio"> <input type="radio" name="gender" checked> <i class="form-icon"></i> Male </label> <label class="form-radio"> <input type="radio" name="gender"> <i class="form-icon"></i> Female </label> <br> <center> <button class="btn btn-success"> Download <i class="form-icon icon icon-download"></i> </button> <button class="btn btn-error"> Power Off <i class="form-icon icon icon-shutdown"></i> </button> </center> </div> </body> </html>
Producción:
Formas de espectro
Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA