×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


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.




So this is how we can change the border of the input field.




Colored input field


Through CSS we can also customize or give background color to our textfield background area , we can do it by background-color property.


Let's understand this by the following program :-



<!DOCTYPE html>

<html>

<head>

<style>

input{

      bacground-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>


Output of the Program



Check the background-color of the input field.




So this is how we can change the background-color of the input field.








CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute