Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Form Groups se usa para crear los grupos de formularios usando el encabezado y el cuerpo del formulario. Podemos crear el grupo de formularios usando la clase de grupo de formularios . En este artículo, discutiremos los grupos de formularios de Primer CSS.
Primer CSS Formulario Grupos Clases:
- form-group: Esta clase se utiliza para crear el grupo de formularios con algunos elementos.
- form-group-header: esta clase se utiliza para crear el encabezado del grupo de formularios.
- form-group-body: Esta clase se utiliza para crear el cuerpo del grupo de formularios.
Sintaxis:
<form>
<div class="form-group">
<div class="form-group-header">
....
</div>
<div class="form-group-body">
....
</div>
</div>
</form>
Ejemplo 1: El siguiente ejemplo demuestra los grupos de formularios de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Form Groups </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Form Groups </h3> <form> <div class="form-group"> <div class="form-group-header"> <label for="firstname"> First Name </label> </div> <div class="form-group-body"> <input class="form-control" type="text" placeholder="First Name" id="firstname" /> </div> </div> <div class="form-group"> <div class="form-group-header"> <label for="lastname"> Last Name </label> </div> <div class="form-group-body"> <input class="form-control" type="text" placeholder="Last Name" id="lastname" /> </div> </div> <div class="form-group"> <div class="form-group-header"> <label class="c-label" for="gender"> Gender: </label> </div> <div class="form-group-body"> <input id="gender" type="radio" name="gen" > Male <input id="gender" type="radio" name="gen" > Female </div> </div> </form> </div> </body> </html>
Producción:
Primeros grupos de formularios CSS
Ejemplo 2: El siguiente ejemplo demuestra los grupos de formularios de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Form Groups </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Form Groups </h3> <form> <div class="form-group"> <div class="form-group-header"> <label for="address"> Address: </label> </div> <div class="form-group-body ml-6 mr-6"> <textarea class="form-control" id="address"></textarea> </div> </div> <div class="form-group"> <div class="form-group-header"> <label for="firstname"> Choices: </label> </div> <div class="form-group-body"> <label class="c-field c-field--choice"> <input type="checkbox" name="opt"> GFG 1 </label> <label class="c-field c-field--choice"> <input type="checkbox" name="opt"> GFG 2 </label> <label class="c-field c-field--choice"> <input type="checkbox" name="opt"> GFG 3 </label> </div> </div> <div class="form-group"> <div class="form-group-header"> <label for="drop"> Choose any: </label> </div> <div class="form-group-body"> <select class="form-select" id="drop"> <option> Choose any </option> <option> C++ </option> <option> Java </option> <option> Python </option> </select> </div> </div> </form> </div> </body> </html>
Producción:
Primeros grupos de formularios CSS
Referencia: https://primer.style/css/components/forms#form-groups
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA