Los formularios Spectre proporcionan el componente de control más común utilizado en un formulario regular. En este artículo, discutiremos los formularios en línea. Los formularios en línea del formulario son un componente importante que puede convertir cualquier campo de entrada en una sola línea. Al igual que en los artículos anteriores, usamos la radio, la casilla de verificación, etc., se pueden colocar en una sola línea.
Formularios Formulario Formularios en línea Clase:
- form-inline: esta clase se usa para crear una radio y casillas de verificación en una sola línea.
Sintaxis:
<label class="form-radio form-inline">
El siguiente ejemplo ilustra los formularios en línea de Spectre Forms 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 Inline forms Class </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> <label class="form-label">Gender</label> <label class="form-checkbox form-inline"> <input type="checkbox" name="gender"> <i class="form-icon"></i>Male </label> <label class="form-checkbox form-inline"> <input type="checkbox" name="gender"> <i class="form-icon"></i>Female </label> <br> <center> <button class="btn btn-success"> LogIn </button> <button class="btn btn-error"> Sign Up </button> </center> </div> </body> </html>
Producción:
Formularios de espectro Formularios en línea
Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms-inline
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA