CSS Forms
As we know that Form is the area where we just take the useful information from the user in some field input. So in
CSS we can give more styling to our form layout.
Let's see some few example here by which we can create a stylish form layout page:-
Styling the input field
Through CSS we can also customize or make changes in our textfield where the user use to feed the information by the width property.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
input{
width:100%;
}
</style>
</head>
<body>
<p> Check the width of input field. </p>
<form>
<label for="main">Username </label>
<input type="text" id="main" name="user"/>
</form>
</body>
</html>
Output of the Program
Check the width of input field.
So this is how we can change the width of the input field.
Styling bordered input field
Through CSS we can also customize or make changes in our textfield border area by border and border-radius property.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
input{
border:4px solid lightblue;
border-radius:5px;
}
</style>
</head>
<body>
<p> Check the border of the input field. </p>
<form>
<label for="main">Username </label>
<input type="text" id="main" name="user"/>
</form>
</body>
</html>
Output of the Program
Check the border of the input field.
<!DOCTYPE html>
<html>
<head>
<style>
input{
background-color:pink;
}
</style>
</head>
<body>
<p> Check the background-color of the input field. </p>
<form>
<label for="main">Username </label>
<input type="text" id="main" name="user"/>
</form>
</body>
</html>
