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 orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece formularios que se utilizan para tomar un conjunto de entradas de los usuarios. Los formularios de entrada de Primer CSS crean un campo de entrada más pequeño, más grande y de ancho completo utilizando algunas clases adicionales.
Primer CSS Clase de formularios de entrada:
- input-sm: esta clase se utiliza para crear pequeños campos de entrada en los formularios CSS de Primer.
- input-lg: esta clase se utiliza para crear grandes campos de entrada en los formularios CSS de Primer.
- bloque de entrada: esta clase se utiliza para crear campos de entrada bloqueados en los formularios CSS de Primer.
Sintaxis:
<form>
<input class="form-control input-sm"
type="..." placeholder="...." />
...
</form>
Ejemplo 1: El siguiente ejemplo demuestra el uso de los formularios de entrada de Primer CSS utilizando la clase input-sm .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Input Forms </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Input Forms-small </h3> <form> <input class="form-control input-sm mt-3" type="text" placeholder="GfG username..." /> <select class="form-select input-sm mt-3"> <option>Choose any course</option> <option>DSA</option> <option>OOP's</option> <option>DBMS</option> <option>OS</option> </select> </form> </center> </body> </html>
Producción:
Primeros formularios de entrada de CSS
Ejemplo 2: El siguiente ejemplo demuestra el uso de los formularios de entrada de Primer CSS utilizando la clase input-lg .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Input Forms </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Input Forms-large </h3> <form> <input class="form-control input-lg mt-3" type="text" placeholder="GfG username..." /> <select class="form-select input-lg mt-3"> <option>Choose any course</option> <option>DSA</option> <option>OOP's</option> <option>DBMS</option> <option>OS</option> </select> </form> </center> </body> </html>
Producción:
Primeros formularios de entrada de CSS
Ejemplo 3: El siguiente ejemplo demuestra el uso de los formularios de entrada de Primer CSS utilizando la clase de bloque de entrada .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Input Forms </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin-inline: 10rem;"> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Input Forms-block </h3> <form> <input class="form-control input-block mt-3" type="text" placeholder="GfG username..." /> <select class="form-select input-block mt-3"> <option>Choose any course</option> <option>DSA</option> <option>OOP's</option> <option>DBMS</option> <option>OS</option> </select> </form> </center> </body> </html>
Producción:
Primeros formularios de entrada de CSS
Referencia: https://primer.style/css/components/forms#inputs