A form is an interactive HTML element that collects user inputs on a webpage. For example,
The above example shows the default form without any styles.
Here, the form is styled using different CSS properties.
Create a Form
A form is created using the <form> element, and user
input is collected using <input> element. For example,
<form action="/submit" method="post">
<input type="text" name="name" placeholder="Your name">
<input type="password" name="password" placeholder="Your password">
<input type="submit" value="Submit">
</form>
Browser Output
Here, the default form doesn't look good without any styles.
Selecting Form Element
The form elements can be selected in the following ways:
1. Selecting the form element
Form elements can be selected by referring to their element names. For example,
input: selects all the input fieldstextarea: selects all the text areaslabel: selects all level elements
2. Selecting the form element attribute
Form elements can also be selected by referring to their attributes using element attribute selectors. For example,
-
input[type=text]: selects all input fields havingtypeattribute set totext -
input[type=password]: selects all input fields havingtypeattribute set topassword -
input[type=number]: selects all input fields having typeattributeset tonumber
Styling Input Field
The input field allows us to enter and submit the data in the form. For example,
<input type="text" name="name" id="name" >
Browser Output
Default Input Field
We can add the following styles to the input field,
- Width
- Padding
- Margin
- Border
- Border radius
- Box shadow
- Font
- Colored input
- Focused input
Let's explore each of them in detail.
Adding Width to Input Field
The width property adds width to the input field. For example,
input{
width: 100%;
}
Browser Output
Here, the input field expands to take the full width of the document.
Adding Padding to Input FIeld
The padding property adds space between the input field content
and border. For example,
input{
padding: 12px;
width: 100%;
}
Browser Output
Here, a padding of 12px is added to the input field.
Adding Margin to Input Field
The margin property adds space around an element, creating
space outside of each input field. For example,
input {
margin: 20px 0;
width: 100%;
padding: 10px;
}
Browser Output
In the above example,
margin: 20px 0
adds 20px of vertical margin in the input field.
Adding Border to Input Field
The border property adds a border around the input field. For
example,
input {
border: 4px solid black;
}
Browser Output
In the above example, the border property adds a
solid black border of 4px.
Adding Border Radius to Input Field
The border-radius property adds the border radius to make the
rounded input field corners. For example,
input {
border-radius: 10px;
}
Browser Output
Here, the border-radius property rounds the corners of the
input field with 10px border radius.
Adding Box Shadow to Input FIeld
The box-shadow property adds a shadow to the input field. For
example,
input:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.94);
}
Browser Output
The above example creates a shadow effect around the input field when it is being hovered.
Colored Input
The background-color property adds background color, and the
color property adds text-color to input. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Form Styling</title>
</head>
<body>
<form>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="username" />
</form>
</body>
</html>
input {
background-color: purple;
color: white;
width: 100%;
padding: 10px;
border-radius: 5px;
box-sizing: border-box;
}
Browser Output
In the above example,
-
background-color: purpleadds apurplecolor to input background color:whitesets the text color towhite
Focused Input
The :focus selector is used to change the properties of an
input field when it is in focus. For example,
input:focus {
background-color: yellow;
}
Browser Output
Here, the background color changes to yellow when the input is
focused.
Styling Text Areas
A text area allows us to enter multiple lines of text. For example,
<textarea>Start Writing...</textarea>
Browser Output
The above example shows the default text area without any styles.
We can add different CSS stylings to the text area as,
textarea {
background-color: pink;
width: 100%;
height: 100px;
padding: 10px 0;
box-sizing: border-box;
border-radius: 4px;
color: purple;
}
Browser Output
In the above example,
-
background-color: pinkadds apinkcolor to the background of text-area width: 100%expands text area to its full width-
height: 100pxsets the height of text area to100px -
padding: 10pxadds a padding of10pxin the text area -
box-sizing: border-boxensures padding and borders to height and width of text area -
border-radius: 4pxrounds the corner of text area with4pxradius -
color: purplesets the text color topurple
Styling Drop Down Menus
A drop down menu provides a list of options to the user. For example,
<select>
<option>Select one</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Browser Output
The above example shows a default drop-down menu without any custom styles.
We can add different CSS stylings to the drop-down menu as shown below,
select {
background-color: lightgray;
width: 100%;
padding: 10px;
border-radius: 4px;
}
Browser Output
In the above example,
-
background-color:lightgrayadds a light gray color to background of drop-down -
width:20%expands drop-down menu to 20% of its original width -
padding:10pxadds a padding of10pxin the drop-down menu -
border-radius: 4pxrounds the corner of drop-down menu with4pxradius
Styling Radio Button
A radio button allows us to select only a single option from the list. For example,
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="radioGroup" value="option1" />
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="radioGroup" value="option2" />
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="radioGroup" value="option3" />
Browser Output
The above example represents a default radio button without any CSS styles.
We can add different CSS styles to the radio button as,
input[type="radio"] {
width: 20px;
height: 20px;
margin-right: 10px;
}
Browser Output
In the above example,
-
width: 20pxsets the width of radio button to20px -
height: 20pxsets the height of radio button to20px -
margin-right: 10pxsets the10pxmargin to the right side
Styling Check Box
The check box allows us to select multiple options from the list. For example,
<input type="checkbox" id="option1" name="checkboxGroup" value="option1" />
<label for="option1">Option 1</label>
<input type="checkbox" id="option2" name="checkboxGroup" value="option2" />
<label for="option2">Option 2</label>
<input type="checkbox" id="option3" name="checkboxGroup" value="option3" />
<label for="option3">Option 3</label>
Browser Output
The above example shows a checkbox with default appearance.
We can add different CSS stylings to the checkbox as,
input {
width: 20px;
height: 20px;
margin-right: 10px;
cursor: pointer;
}
Browser Output
In the above example,
-
width: 20pxsets the width of check box to20px -
height: 20pxsets the height of check box to20px -
margin-right: 10pxsets the 10px margin to the right side -
cursor: pointersets the cursor as pointer on hovering checkbox
Styling Submit Button
A submit button triggers the submission of form data. For example,
<input type="submit" value="Submit">
Browser Output
The above example shows a default submit button.
Let's add some CSS stylings to the button,
input[type="submit"] {
background-color: purple;
width: 180px;
display: block;
margin: 0px auto;
border: none;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
margin-top: 30px;
padding: 20px;
text-align: center;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: indigo;
}
Browser Output
Here, the submit button is styled with different CSS properties.