Primer CSS es un framework CSS gratuito y de código abierto. Se basa en los sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Creado con el sistema de diseño de GitHub, es altamente reutilizable y flexible.
Primer CSS Forms proporciona diferentes componentes para entradas como texto, casilla de verificación, radio, selecciones y área de texto. En este artículo, aprenderemos sobre las diferentes entradas que tienen diferentes tipos de personalización.
Tipos y clases de formularios CSS básicos:
- Fregadero de cocina: los formularios de fregadero de cocina se utilizan para crear el formulario con todas las entradas y botones uno al lado del otro para probar el tamaño y alinear los elementos de entrada.
- btn: esta clase se utiliza para crear el botón predeterminado.
- form-control: esta clase se utiliza para crear el campo de entrada del formulario.
- Entradas: El elemento de entrada contiene todos los tipos de entrada como texto, radio, etc. La entrada tiene las siguientes clases:
- Tallaje: Podemos personalizar el tallaje usando las siguientes clases:
- input-sm: Hace que el tamaño de la entrada sea pequeño.
- input-lg: Hace que el tamaño de la entrada sea grande.
- input-block: Hace que el tamaño de la entrada sea de tipo bloque.
- Grupo de entrada: las entradas se pueden agrupar utilizando la clase input-group .
- Tallaje: Podemos personalizar el tallaje usando las siguientes clases:
- Personalización: Las diferentes entradas se pueden personalizar de la siguiente manera:
- input-contrast: La entrada puede tener un fondo claro usando esta clase dando un efecto de contraste.
- disabled: esta opción desactiva la entrada con la clase de control de formulario .
- input-hide-webkit-autofill: esta clase oculta el ícono y/o el menú desplegable para autocompletar.
- Seleccionar: este tipo de entrada se utiliza para seleccionar diferentes opciones de un menú desplegable. En él se utilizan las siguientes clases:
- form-select: esta clase se utiliza para crear un menú de selección.
- select-sm: esta clase hace que la entrada sea de tamaño pequeño.
- Grupos de formularios: los grupos de formularios se utilizan para agrupar los diferentes elementos del formulario y hacer que parezcan estructurados para que el formulario parezca significativo y se adapte a diferentes tamaños de pantalla. Tiene las siguientes clases diferentes.
- form-group: Esto se usa para crear un grupo de formularios.
- form-group-header: Se utiliza para crear un encabezado en el grupo de formularios.
- form-group-body: Contiene los elementos de entrada del grupo de formularios.
- Validación de grupos de formularios: La validación es una tarea necesaria para que el usuario ingrese los datos en el formato y orden correctos. El grupo de formularios utiliza las siguientes clases diferentes:
- Éxito: la clase utilizada tiene éxito y se agrega si la entrada es válida. La clase se agrega al elemento de grupo de formulario.
- Error: la clase utilizada tiene un error y se agrega si la entrada no es válida. La clase se agrega al elemento de grupo de formulario.
- Advertencia: la clase utilizada es advertir y se agrega para advertir al usuario debido a la entrada. La clase se agrega al elemento de grupo de formulario.
- form-actions: esta clase se utiliza para envolver los elementos que realizan algunas acciones, como el botón de guardar o el enlace para alguna validación.
- Casillas de verificación y radios: las casillas de verificación y radios se utilizan para seleccionar algún valor de opción o establecer algo en verdadero/falso. Las diferentes clases son las siguientes:
- form-checkbox: Esto se usa para crear un contenedor para la casilla de verificación que contiene el elemento de la casilla de verificación y la etiqueta.
- input-radio: Esto se usa para crear una entrada de radio.
- Grupo de radio: la clase utilizada es grupo de radio para colocar las entradas de radio dentro de un grupo.
Sintaxis: Cree un elemento de formulario con algunos elementos de entrada de la siguiente manera.
<form>
<label for="name">Name</label>
<input class="form-control" type="text" id="name" />
<label for="email">Email address</label>
<input class="form-control" type="email" id="email" />
<button class="btn" type="submit">...</button>
</form>
Ejemplo 1: En el siguiente ejemplo, tenemos diferentes elementos de entrada con diferentes tamaños y un grupo de entrada.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Primer CSS Forms</strong> <br/> <br/> </center> <form class="input-group"> <label for="name">Name</label> <input class="form-control" type="text" id="name" /> <label for="email">Email address</label> <input class="form-control" type="email" id="email" /> <label for="age">Age</label> <input class="form-control" type="number" id="age" /> <button class="btn" type="submit">Submit</button> </form> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, tenemos diferentes personalizaciones como disabled , input-contrast y input-hide-webkit-autofill sugerencias de información de contacto en los diferentes elementos de entrada.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Primer CSS Forms</strong> <br/> <br/> </center> <form class="input-group"> <label for="name">Name</label> <input class="form-control" type="text" id="name" disabled /> <label for="email">Email address</label> <input class="form-control input-hide-webkit-autofill input-contrast" type="email" id="email"/> <label for="age">Age</label> <input class="form-control" type="number" id="age" /> <button class="btn" type="submit">Submit</button> </form> </div> </body> </html>
Producción:
Ejemplo 3: En el siguiente ejemplo, tenemos el elemento de selección con una personalización diferente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Primer CSS Forms</strong> <br/> <br/> </center> <form class="form-group"> <select class="form-select" aria-label="Topics"> <option>Choose an option</option> <option>Data Structures</option> <option>Algorithms</option> <option>Web Development</option> </select> <select class="form-select select-sm" aria-label="Programming Language"> <option>Choose an Programming Language</option> <option>Java</option> <option>C++</option> <option>Python</option> </select> </form> </div> </body> </html>
Producción:
Ejemplo 4: En el siguiente ejemplo, tenemos el grupo de formas con todas sus diferentes clases.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Primer CSS Forms</strong> <br /> <br /> </center> <form> <div class="form-group"> <div class="form-group-header"> <label for="name">Name</label> </div> <div class="form-group-body"> <input class="form-control" type="text" id="name" placeholder="Enter your name"/> </div> </div> <div class="form-group"> <div class="form-group-header"> <label for="Topics">Select your choices</label> </div> <div class="form-group-body"> <select class="form-select" aria-label="Topics"> <option>Choose an option</option> <option>Data Structures</option> <option>Algorithms</option> <option>Web Development</option> </select> </div> </div> <div class="form-group"> <div class="form-group-header"> <label for="about">Enter about you</label> </div> <div class="form-group-body"> <textarea class="form-control" id="about"></textarea> </div> </div> </form> </div> </body> </html>
Producción:
Ejemplo 5: En el siguiente ejemplo, tenemos diferentes validaciones para las entradas.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Primer CSS Forms</strong> <br/> <br/> </center> <form> <div class="form-group successed"> <div class="form-group-header"> <label for="name">Name</label> </div> <div class="form-group-body"> <input class="form-control" type="text" id="name" placeholder="Enter your name" aria-describedby="name-input-validation"/> </div> <p class="note success" id="about-input-validation"> Your name is valid </p> </div> <div class="form-group warn"> <div class="form-group-header"> <label for="age">Name</label> </div> <div class="form-group-body"> <input class="form-control" type="number" id="age" placeholder="Enter your age" aria-describedby="age-input-validation"/> </div> <p class="note warning" id="age-input-validation"> Your age seems to be incorrect </p> </div> <div class="form-group errored"> <div class="form-group-header"> <label for="about">Enter about you</label> </div> <div class="form-group-body"> <textarea class="form-control" id="about" aria-describedby="about-input-validation"> </textarea> </div> <p class="note error" id="about-input-validation"> Your about text has some error. </p> </div> </form> </div> </body> </html>
Producción:
Ejemplo 6: En el siguiente ejemplo, tenemos una casilla de verificación, una radio y un grupo de radio.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Primer CSS Forms</strong> <br/> <br/> </center> <form> <div class="form-checkbox"> <label> <input type="checkbox" checked="checked" /> Tutorials available </label> </div> <div class="form-group-header"> <label>Choose topic</label> </div> <div class="radio-group"> <input class="radio-input" id="ds" type="radio" name="options" /> <label class="radio-label" for="ds"> Data Structures</label> <input class="radio-input" id="algo" type="radio" name="options" /> <label class="radio-label" for="algo"> Algorithms</label> <input class="radio-input" id="webdev" type="radio" name="options" /> <label class="radio-label" for="webdev"> Web Development</label> </div> </form> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/forms
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA