Skip to content

Advanced Form Styling And Validation | Lecture 48

Advanced Form Styling And Validation

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:

ATTREBUTEDESCRIPTION
requiredField must not be empty
min/maxMinimum and maximum values for numbers or dates
minlength/maxlengthControl character limits
patternUse 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
Advanced Form Styling And Validation
A kid typing into a computer screen into a colorful form
πŸ’‘ 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!

  1. Add a dark mode toggle to your form using JavaScript and CSS variables.
  2. Style your form to look like a chat bubble or notebook paper
  3. Add an autocomplete dropdown using <datalist>
  4. Use localStorage to save form data temporarily
βœ… Summary of What You Learned Today
CONCEPTDESCRIPTION
Form StylingUse padding, borders, shadows, transitions
Input FocusImprove UX with:focusstyles
ValidationUserequired,minlength,pattern, and JavaScript
Error MessagesShow custom success/failure messages
Responsive DesignFlexbox + media queries for mobile support
Visual FeedbackUse:valid,:invalid, and colored bars
JavaScript ValidationAdd 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

Najeeb Alam

Najeeb Alam

Technical writer specializes in developer, Blogging and Online Journalism. I have been working in this field for the last 20 years.