CSS Forms
What are CSS Forms?
CSS Forms are HTML form elements styled with CSS to create attractive, user-friendly, and responsive forms. Using CSS, you can customize the appearance of text fields, password boxes, radio buttons, checkboxes, dropdown lists, text areas, and buttons. Well-designed forms improve the user experience and make websites look more professional.
Why Use CSS Forms?
Styling forms with CSS improves their appearance, increases readability, and makes them easier to use. CSS also helps create responsive forms that work well on desktops, tablets, and mobile devices while maintaining a consistent design across the website.
Basic CSS Form Example
<!DOCTYPE html>
<html>
<head>
<style>
input{
width:250px;
padding:10px;
border:2px solid #007BFF;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>Step 1: Style Input Fields
Use CSS to change the width, padding, border, border radius, and font size of input fields. This makes forms easier to read and interact with.
<!DOCTYPE html>
<html>
<head>
<style>
input{
width:280px;
padding:12px;
border:2px solid #007BFF;
border-radius:6px;
font-size:16px;
}
</style>
</head>
<body>
<input type="text" placeholder="Your Name">
</body>
</html>Step 2: Style Buttons
CSS can make buttons more attractive by changing their background color, text color, padding, border, border radius, and hover effects.
<!DOCTYPE html>
<html>
<head>
<style>
button{
background:#007BFF;
color:white;
padding:12px 20px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:16px;
}
button:hover{
background:#0056b3;
}
</style>
</head>
<body>
<button>Submit</button>
</body>
</html>Complete CSS Form Example
The following example styles a complete contact form using CSS. Click Test My Code to see the styled form in the preview window.
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial,sans-serif;
background:#f5f9ff;
}
form{
width:320px;
margin:30px auto;
padding:20px;
border:1px solid #ddd;
border-radius:8px;
background:white;
}
h2{
text-align:center;
color:#0056b3;
}
input,
select,
textarea{
width:100%;
padding:10px;
margin:8px 0 15px;
border:1px solid #999;
border-radius:5px;
box-sizing:border-box;
font-size:15px;
}
textarea{
resize:vertical;
height:90px;
}
button{
width:100%;
padding:12px;
background:#28a745;
color:white;
border:none;
border-radius:5px;
font-size:16px;
cursor:pointer;
}
button:hover{
background:#218838;
}
</style>
</head>
<body>
<form>
<h2>Contact Form</h2>
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email Address">
<select>
<option>Select Country</option>
<option>India</option>
<option>USA</option>
<option>Canada</option>
</select>
<textarea placeholder="Your Message"></textarea>
<button>Send Message</button>
</form>
</body>
</html>Advantages of CSS Forms
Common Mistakes
Beginners often forget to add padding, make input fields too narrow, remove focus styles, use inconsistent spacing, or forget the box-sizing: border-box; property, causing form controls to appear different sizes.
<!DOCTYPE html>
<html>
<head>
<style>
/* Incorrect */
input{
width:300;
}
/* Correct */
input{
width:300px;
}
</style>
</head>
<body>
<input type="text" placeholder="Your Name">
</body>
</html>Best Practices
- Keep forms simple and easy to understand.
- Use enough padding for comfortable typing.
- Provide clear labels or placeholders for every field.
- Use consistent spacing between form controls.
- Add hover and focus styles for better usability.
- Make buttons large enough to click easily.
- Use responsive widths for mobile devices.
- Test forms on different browsers and screen sizes.
Web Resources on CSS Forms
1. MDN Web Docs : Styling web forms
2. Web.dev : Styling forms
3. Dev.to : CSS Forms and Inputs Styling, From Plain to Polished
4. Elementor.com : HTML & CSS Forms, 2026 Guide
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.