Los formularios son esenciales en los sitios web para recopilar datos o información para diversos fines. Usando Pure CSS Forms , podemos crear diferentes tipos de formularios.
El tamaño de las entradas de los formularios siempre es importante. Por lo tanto, las entradas son importantes en cualquier formulario de página web. Se utiliza para tomar varias entradas del usuario que son esenciales para recopilar datos o información. Los elementos de entrada tienen tamaños de ancho fluido en una sintaxis similar a Pure Grids. Puede aplicar una clase pure-input-* a estos elementos.
Tamaño de entrada de formulario de CSS puro: para aplicar los diferentes tamaños de campos de entrada, debe obtener conocimientos sobre Pure CSS Grid . Las clases de cuadrícula de CSS puro se utilizan dentro del campo de entrada para definir el tamaño del campo de entrada.
Sintaxis:
<form class="pure-form">
<input type="text" class="pure-button"/>
</form>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous"/>
<meta name="viewport" content=
"width=device-width,initial-scale=1.0" />
<style>
form {
margin: 40px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Pure CSS Forms Input Sizing</strong>
</center>
<form class="pure-form">
<input type="text" class="pure-input-1"
placeholder="Pure-input-1" />
<br><br>
<input type="text" class="pure-input-2-3"
placeholder="Pure-input-2-3" />
<br><br>
<input type="text" class="pure-input-1-2"
placeholder="Pure-input-1-2" />
<br><br>
<input type="text" class="pure-input-1-3"
placeholder="Pure-input-1-3" />
<br><br>
<input type="text" class="pure-input-1-4"
placeholder="Pure-input-1-4" />
</form>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous"/>
<meta name="viewport"
content="width=device-width,initial-scale=1.0" />
<style>
form {
margin: 40px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Pure CSS Forms Input Sizing</strong>
</center>
<form class="pure-form pure-g">
<div class="pure-u-1-4">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1-4" />
</div>
<br><br>
<div class="pure-u-3-4">
<input type="text" class="pure-input-1"
placeholder="Pure-u-3-4" />
</div>
<br><br>
<div class="pure-u-1-2">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1-2" />
</div>
<br><br>
<div class="pure-u-1-2">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1-2" />
</div>
<br><br>
<div class="pure-u-1-8">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1-8" />
</div>
<br><br>
<div class="pure-u-1-8">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1-8" />
</div>
<br><br>
<div class="pure-u-1-4">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1-4" />
</div>
<br><br>
<div class="pure-u-1-2">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1-2" />
</div>
<br><br>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1-5" />
</div>
<br><br>
<div class="pure-u-2-5">
<input type="text" class="pure-input-1"
placeholder="Pure-u-2-5" />
</div>
<br><br>
<div class="pure-u-2-5">
<input type="text" class="pure-input-1"
placeholder="Pure-u-2-5" />
</div>
<br><br>
<div class="pure-u-1">
<input type="text" class="pure-input-1"
placeholder="Pure-u-1" />
</div>
</form>
</body>
</html>
Producción:
Tamaño de entrada de formulario CSS puro
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA