CSS Forms

CSS Forms


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 -