Forms are essential in websites to collect data or information for various purposes. Using Pure CSS Forms, we can create different types of forms.
The size of the inputs of forms is always important. So inputs are important in any webpage form. It is used to take various inputs from the user which are essential in collecting data or information. Input elements have fluid width sizes in a syntax that is similar to Pure Grids. You can apply a pure-input-* class to these elements.
Pure CSS form input sizing: To apply the different sizes of input fields, you have to get knowledge about Pure CSS Grid. Pure CSS Grid classes are used inside the input field to define the input field size.
Syntax:
<form class="pure-form">
<input type="text" class="pure-button"/>
</form>Example 1:
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
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>
|
Output:
Example 2:
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet"
href=
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>
|
Output:
Pure CSS Form Input Sizing