CSS - Forms
Forms are required, when you want to collect some data from
the site visitor. They have input fields for users to enter
information, labels to identify the input fields, and buttons to
submit the form or perform an action.
We can style HTML forms by changing the appearance of form
elements, such as text fields, checkboxes, radio buttons, select
menus, and submit buttons.
This is a simple form that accept First and Last name with the
desired tutorial you wants to learn. Submit button will auto
redirect you to our courses page.
Use Containers: Containers can be used to wrap all the form
elements like text input, radio buttons, submit buttons in a
single container and apply common style to it.
For Text Input: For text input you can add padding, margin
and background color according to your color theme. Also
you can use focus pseudo-class to style selected state of an
input element.
Hover Effect: By using pseudo-class :hover, you can style
mouse over the element state of elements like submit
button. This gives user a dynamic experience.
Responsive Design: By using Media Queries you can adjust
form style for different screen widths
Transition Effect Further more you can use transition effect
for smooth interaction with input tags and buttons
These are the most commonly used styling for HTML form. This
principle allow you to create a well styled and user-friendly
form.
As mentioned above, we can style input tag by
adding padding, margin and background-color. Apart from that
we can also alter border, border-radius, text color and focus
states.
Example
In this code we applied all the mentioned stylings for text input
fields.
Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* CSS styles for input fields */
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 2px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
color: #333;
font-size: 16px;
box-sizing: border-box;
}
input:focus {
border-color: #66afe9;
outline: none;
box-shadow:
0 0 5px rgba(102, 175, 233, 0.5);
background-color: #fff;
}
</style>
</head>
<body>
<h3>Styled Input Tags</h3>
Name:
<input type="text">
Email:
<input type="email">
Password:
<input type="password">
</body>
</html>
Input Field with Icons Inside
We can add icons or images inside text input elements as
placeholder to make our form dynamic. These are generally
used to add lens icon inside search element.
Example
In this example we use background-image property to specify
link of icon and render it inside input field. There are several
websites like [Link], that give link to icons for free.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-image:
url('[Link]
at=png&color=000000');
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
background-size: 40px 40px;
}
</style>
</head>
<body>
<h2>Input field with an icon inside</h2>
<input type="text" placeholder="Search..">
</body>
</html>
Animated Input Field
We can use css transition property to make animated text input
field.
input {
transition: all 0.3s ease;
}
The transition property is applied to input, specifying that all
CSS properties (all) should transition over 0.3 seconds with an
ease timing function.
Example
In this example we used transition property for text input, and
added style when focused.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<style>
/* Basic styling for input */
input {
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 20px;
transition: all 0.9s ease;
}
/* Styling when input is focused */
input:focus {
border-color: dodgerblue;
width: 70%;
box-shadow:
0 0 8px 0 rgba(0, 0, 255, 0.2);
}
</style>
</head>
<body>
<h2>Animated Input Field</h2>
<input type="text"
placeholder="Enter your text...">
</body>
</html>
Styling Textareas
Textarea tag allows users to enter longer texts in single input
field.
Example
Here is an example of a styled textarea that allows users to
enter address.
Open Compiler
<html>
<head>
<style>
textarea {
width: 100%;
height: 100px;
font-size: 16px;
color: #938b8b;
padding: 15px;
border: 2px solid;
}
textarea:focus {
box-shadow:
0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
Enter Address
<form>
<textarea>
Address
</textarea>
</form>
</body>
</html>
In CSS, we can alter text style, color, margin, padding, border
and shadow effect for dropdown list. Check out following
example.
Example
In this example we demonstrate how to style a select tag.
Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
height: 150px;
padding: 20px;
}
label {
font-size: 16px;
}
#styled-select {
width: 200px;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
}
#styled-select:focus {
border-color: #007BFF;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
outline: none;
}
</style>
</head>
<body>
<label> Choose an option: </label>
<select id="styled-select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</body>
</html>
You can use following selectors to select and style checkbox and
radio buttons.
input[type="checkbox"] {
property: value;
}
input[type="radio"]{
property: value;
}
Example
Following example demonstrates this:
Open Compiler
<html>
<head>
<style>
form {
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
max-width: 300px;
margin: 0 auto;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
vertical-align: middle;
}
/* '+' is Adjacent Sibling Selectors */
input[type="radio"] + label,
input[type="checkbox"] + label {
display: inline-block;
margin-right: 10px;
}
/* Change color of checked option */
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
color: #007BFF;
}
</style>
</head>
<body>
<form>
<label>Radio Buttons: </label>
<input type="radio"
name="gender" value="male">
<label for="male">Male</label>
<input type="radio"
name="gender" value="female">
<label for="female">Female</label>
<br>
<label>Checkboxes:</label>
<input type="checkbox"
name="lang" value="html">
<label for="html">HTML</label>
<input type="checkbox"
name="lang" value="css">
<label for="css">CSS</label>
<input type="checkbox"
name="lang" value="bootstrap">
<label for="html">bootstrap</label>
</form>
</body>
</html>
CSS can be used to modify appearance of buttons in HTML
page. Commonly padding, background-color, text color, border
and hover effect of buttons are altered using CSS.
Example
In this example we demonstrate how to style a button tag.
Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #f0f0f0;
padding: 40px;
height: 150px;
}
.styled-button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s;
}
.styled-button:hover {
background-color: #0056b3;
}
.styled-button:active {
transform: scale(0.5);
}
.styled-button:focus {
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
</style>
</head>
<body>
<button class="styled-button">
Click Me
</button>
</body>
</html>
The <fieldset> tag is used to group several controls and labels
within a web form, it adds a rectangular box around form
elements.
The <legend> tag is used to specify the caption
of <fieldset> element.
Example
The following example demonstrates how to
style <fieldset> and <legend> elements.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
padding: 10px;
}
legend {
font-weight: bold;
color: #0F8D0F;
margin-bottom: 10px;
}
input {
width: calc(100% - 20px);
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Login</legend>
<label for="username">
Username:
</label>
<input type="text"
id="username" name="username">
<label for="password">
Password:
</label>
<input type="password"
id="password" name="password">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Here is an example of a simple responsive form layout. Check
this form on different devices to see the responsiveness.−
Example
Open Compiler
<html>
<head>
<style>
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #c5e08e;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #34892b;
}
label {
display: block;
font-weight: bold;
font-size: 15px;
margin-bottom: 5px;
color: #070707;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 15px;
margin-bottom: 15px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #eff5f5;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #216e2a;
color: #fff;
border: none;
font-size: 20px;
border-radius: 4px;
cursor: pointer;
}
textarea {
width: 100%;
height: 100px;
padding: 15px;
margin-bottom: 15px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #eff5f5;
}
input[type="radio"] {
margin-right: 5px;
vertical-align: middle;
margin-bottom: 10px;
}
input[type="submit"]:hover {
background-color: #44d115;
color: #000000;
}
</style>
</head>
<body>
<div class="container">
<h1>Registration Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"
placeholder="Enter Name..." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="Enter Email Id..." required>
<label for="email">Address:</label>
<textarea>Address...</textarea>
<label>Gender: </label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female">
Female
<label for="gender">Langauges:</label>
<select id="gender" name="gender">
<option value="lang" disabled selected>Select
Gender</option>
<option value="male">Hindi</option>
<option value="female">Marathi</option>
<option value="other">English</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>