CSS Forms -
As forms are already been studied in html
We can enhance the look and feel of form using css
This is a normal html form -
<form action="#>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Mukul"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Agrawal"><br><br>
<input type="submit" value="Submit">
</form>
|
Output -
Now lets see how can we style the form
As the above example a form can have many input field we can select specifically using the following way -
Giving Padding to the input fields -
Output -
WE can border the input fields -
Example-
Output -
Making round border using border-radius property
Example-
Output -
We can also add background color -
Example-
Output -
ADDING ICON IMAGE IN BACKGROUND
Example-
Output -
Adding focus -
Property will change when click of the field -
Example-
Adding Animation in the input field -
Output -
When not on focus -
When on focus -