Spectre Forms Los formularios horizontales son formularios horizontales si desea crear un formulario horizontal, entonces debe usar la clase form-horizontal en el elemento de formulario. Para cada campo en el formulario, puede usar la clase col-* y col-xs/sm/lg/xl-* para los elementos secundarios para el diseño de filas de formulario receptivo. Aquí, el * se puede reemplazar por 1 a 12, cualquier número que desee según el ancho del campo que desee.
Formas Formas horizontales Clases:
- form-horizontal: esta clase se utiliza para crear formas horizontales.
Sintaxis:
<form class="form-horizontal"> .... </form>
Ejemplo: aquí crearemos un formulario de comentarios simple, recuerde que el botón no es parte del formulario en Spectre, aquí también usaremos el botón en el formulario.
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 Horizontal 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 class="form-input" type="text" placeholder="Email Id"> </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">Submit</button> </form> </form> </body> </html>
Producción:
Formas de espectro Formas horizontales
Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms-horizontal
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA