In this CSS tutorial, we will be learning how to use CSS styling to make a Form looks good on a web page.
CSS Forms
Web-Pages uses forms to collect static data from the users, and a form without styling looks very unordered and pale on the web browser. The CSS enhances the
form
experience and styling, and attract user to engage with it.
Style Form Input Fields
A form is a collection of different input Fields so it becomes very essential to style it first. We can either use the input selector to select an input element or we can use the attribute selector to select a specific input field with a specific type.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/*styling input fields*/
input {
width: 100%;
}
</style>
</head>
<body>
<form>
<label for="fname">UserName</label>
<input type="text" id="uname" name="uname">
<label for="fname">Password</label>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
<Note>:
We could also use
input[type="text"]
, or
input[type="password"]
to define different styling for the username and password fields.
Add padding and Margin in input fields
Like other textual content elements, we can define padding and margin property for an input element. The
margin
and
padding
properties will be applied to the text or content filled by the user in the input form. By specifying the margin and padding properties the text inside the input field look clearer and more readable.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/*styling input fields*/
input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<label for="fname">UserName</label>
<input type="text" id="uname" name="uname">
<label for="fname">Password</label>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
Note: the box-sizing:border-box property make sure that the padding and borders included in the total width and height of the element.
Input fields borders
The input fields border styling can be changed using border property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/*styling input fields*/
input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 4px solid blue;
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<label for="fname">UserName</label>
<input type="text" id="uname" name="uname">
<label for="fname">Password</label>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
Note: The border-radius:10px property will create rounded corners.
Input colour
Using the
color
and
background-colour
we can change the text and background colour of the input field.
Example
<!DOCTYPE html>
<html>
<head>
<style>
input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
color: white;
background-color: red;
}
</style>
</head>
<body>
<form>
<label for="fname">UserName</label>
<input type="text" id="uname" name="uname">
<label for="fname">Password</label>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
Input focus
When the user clicks on the input box the box gets focused, and using the
:focus
pseudo-class we can define a different styling for the form input when the user click it.
Example
<!DOCTYPE html>
<html>
<head>
<style>
input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/*When the user click on the form*/
input:focus{
background-color: lightblue;
color:black;
border-color: red;
border-radius: 10px
}
</style>
</head>
<body>
<form>
<label for="fname">UserName</label>
<input type="text" id="uname" name="uname">
<label for="fname">Password</label>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
Animated Search Input
In CSS we have the transition property which provides animation to the static HTML element. Using this property, we can create an animated search input.
Example
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
padding: auto;
transition: width 0.4s ease-in-out;
}
input[name="search"]:focus {
width: 100%;
}
</style>
</head>
<body>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Resize Textures
The
<textarea>
element is used in the form when we want multiple line feedback or data from the user. And using the multiple CSS properties we can resize and style the default
<textarea>
box.
Example
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
background-color: lightblue;
font-size: 16px;
resize: none;
}
</style>
</head>
<body>
<form>
<textarea>Comment....</textarea>
</form>
</body>
</html>
Summary
- The <form> element represent the complete form structure including all of its child elements.
- When we style a form its very important to style its individual child element.
- We can either use the element name or attribute name to select the input element.
- By using attribute selector we can style specific input elements.