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.

Table of Contents

🎯 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

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!

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	Use`required`,`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

Advanced Form Styling And Validation | Lecture 48

🎯 Objective:

🖋️ Why Style and Validate Forms?

📐 HTML5 Form Validation Attributes

🎨 Styling Your Form with CSS

💻 Try This: Build a Styled Contact Form with Validation

Step 1: Create a New File

Step 2: Add This Code

Step 3: Run with Live Server

💡 Bonus: Add a Password Confirmation Field

💡 Bonus: Style Inputs Based on State

💡 Bonus: Make It Look Like a Modal (Optional)

🧪 Try It Yourself!

✅ Summary of What You Learned Today

Najeeb Alam

Advanced Form Styling And Validation | Lecture 48

🎯 Objective:

🖋️ Why Style and Validate Forms?

📐 HTML5 Form Validation Attributes

🎨 Styling Your Form with CSS

💻 Try This: Build a Styled Contact Form with Validation

Step 1: Create a New File

Step 2: Add This Code

Step 3: Run with Live Server

💡 Bonus: Add a Password Confirmation Field

💡 Bonus: Style Inputs Based on State

💡 Bonus: Make It Look Like a Modal (Optional)

🧪 Try It Yourself!

✅ Summary of What You Learned Today

Najeeb Alam

Related Posts

Advanced Analytics with Window Functions

Lecture 49: Organizing Complex Queries with CTEsv

Lecture 48: Working with Dates and Times