Let’s begin with Lecture 48 of the HTML5 & CSS3 series. Advanced Form Styling & Validation β Make Forms Beautiful and Functional. This lecture is for absolute beginners; even kids can follow along and understand.
π― Objective:
By the end of this lecture, you will:
- Know how to style forms using modern CSS techniques
- Be able to create beautiful input fields , buttons , and form layouts
- Understand how to use HTML5 validation attributes like
required
,minlength
,pattern
- Add custom JavaScript validation for more control
- Build a contact form or login form that looks great and works well on all devices!
ποΈ Why Style and Validate Forms?
Forms are how users interact with your website β whether it’s logging in, sending a message, or signing up.
Think of it like this:
If your website is a playground, then forms are the slides and swings β they need to look safe and fun to use!
A good form should be:
- Visually appealing
- Easy to understand
- Responsive on mobile
- Validated so users donβt make mistakes
π HTML5 Form Validation Attributes
You can add built-in validation using simple attributes:
ATTREBUTE | DESCRIPTION |
---|---|
required | Field must not be empty |
min /max | Minimum and maximum values for numbers or dates |
minlength /maxlength | Control character limits |
pattern | Use regular expressions to validate format (like phone numbers) |
type="email" ,type="url" | Built-in validation for common formats |
Example:
<input type="text" name="username" required minlength="3" maxlength="15">
<input type="email" name="email" required>
<input type="password" name="pass" minlength="6" required>
π¨ Styling Your Form with CSS
Make your form look clean and professional:
input, textarea {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
You can also style based on state:
input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}
input:invalid {
border-color: red;
}
π» Try This: Build a Styled Contact Form with Validation
Letβs build a modern contact form with beautiful styling and real validation.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite
), create a new file named:
styled-contact-form.html
Step 2: Add This Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Styled Contact Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 40px;
}
.form-container {
max-width: 600px;
margin: auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s ease;
}
input:focus, textarea:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
.success-message {
display: none;
margin-top: 20px;
padding: 15px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 4px;
}
.error-message {
display: none;
margin-top: 20px;
padding: 15px;
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Me</h2>
<form id="contactForm" onsubmit="validateForm(event)">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required minlength="2" placeholder="Enter your full name">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required placeholder="you@example.com">
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" required minlength="10"></textarea>
<button type="submit">Send Message</button>
</form>
<div id="formResult" class="success-message">β
Thank you! Your message has been sent.</div>
</div>
<p style="text-align: center; margin-top: 30px;">
<a href="index.html">Back to Home</a>
</p>
<script>
function validateForm(event) {
event.preventDefault(); // Prevent actual submission
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let message = document.getElementById("message").value.trim();
let resultDiv = document.getElementById("formResult");
if (name === "" || email === "" || message === "") {
resultDiv.className = "error-message";
resultDiv.textContent = "β Please fill in all fields.";
resultDiv.style.display = "block";
return false;
}
if (message.length < 10) {
resultDiv.className = "error-message";
resultDiv.textContent = "β Message must be at least 10 characters.";
resultDiv.style.display = "block";
return false;
}
// Show success message
resultDiv.className = "success-message";
resultDiv.textContent = "β
Thank you! Your message has been sent.";
resultDiv.style.display = "block";
// Clear form
document.getElementById("contactForm").reset();
return false;
}
</script>
</body>
</html>
Step 3: Run with Live Server
Right-click the code β Show All Commands β Launch Live Server
π Youβve built a responsive, styled contact form with:
- Beautiful layout and spacing
- Real-time validation messages
- Custom success/error feedback
- Mobile-friendly design

π‘ Bonus: Add a Password Confirmation Field
Add this inside your form:
<label for="password">Password</label>
<input type="password" id="password" name="password" minlength="6" required>
<label for="confirm">Confirm Password</label>
<input type="password" id="confirm" name="confirm" required>
Update your script to check match:
let password = document.getElementById("password").value;
let confirm = document.getElementById("confirm").value;
if (password !== confirm) {
resultDiv.className = "error-message";
resultDiv.textContent = "β Passwords do not match!";
resultDiv.style.display = "block";
return false;
}
Now users can’t submit until passwords match!
π‘ Bonus: Style Inputs Based on State
Use pseudo-classes to show errors or success visually:
input:required {
border-left: 4px solid orange;
}
input:valid {
border-left: 4px solid green;
}
input:invalid {
border-left: 4px solid red;
}
This shows a colored bar on the left of inputs β indicating valid/invalid fields instantly!
π‘ Bonus: Make It Look Like a Modal (Optional)
Wrap your form in a modal overlay for advanced UI:
<style>
.modal {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0,0,0,0.4);
z-index: 999;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
.modal.show {
visibility: visible;
opacity: 1;
}
.modal-content {
background-color: white;
padding: 30px;
border-radius: 10px;
max-width: 600px;
width: 90%;
position: relative;
}
.close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;
}
</style>
<!-- Modal -->
<div class="modal" id="contactModal">
<div class="modal-content">
<span class="close-btn" onclick="hideModal()">Γ</span>
<!-- Put your form here -->
</div>
</div>
<!-- Open Button -->
<button onclick="showModal()" style="margin: 40px auto; display: block;">Open Contact Form</button>
<script>
function showModal() {
document.getElementById("contactModal").classList.add("show");
}
function hideModal() {
document.getElementById("contactModal").classList.remove("show");
}
</script>
Now your form appears in a stylish modal β perfect for popups or login boxes!
π§ͺ Try It Yourself!
- Add a dark mode toggle to your form using JavaScript and CSS variables.
- Style your form to look like a chat bubble or notebook paper
- Add an autocomplete dropdown using
<datalist>
- Use
localStorage
to save form data temporarily
β Summary of What You Learned Today
CONCEPT | DESCRIPTION |
---|---|
Form Styling | Use padding, borders, shadows, transitions |
Input Focus | Improve UX with:focus styles |
Validation | Userequired ,minlength ,pattern , and JavaScript |
Error Messages | Show custom success/failure messages |
Responsive Design | Flexbox + media queries for mobile support |
Visual Feedback | Use:valid ,:invalid , and colored bars |
JavaScript Validation | Add custom logic beyond HTML5 |
π Next Lecture Preview:
In Lecture 49 , weβll learn how to build a complete responsive blog layout using everything we’ve learned β including semantic tags, Grid/Flexbox, media queries, and form handling β so you can start building your own blog, portfolio, or news site!
Stay Updated
If you found this information useful, donβt forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series