HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Chapter Quiz Exercises

Forms & Validation

Forms are how users interact with your website, providing data like logins, searches, and messages.

The `<form>` Element

Acts as a container for input controls. Key attributes: action (where to send data) and method (GET or POST).

Input Types

The <input> tag changes completely based on its type attribute:

type="text": Standard text box.
type="email": Validates that the input contains an "@" symbol.
type="password": Hides characters.
type="radio" / type="checkbox": For multiple choice.
type="submit": A button to submit the form.

Validation

HTML5 provides built-in validation attributes like required, minlength, and pattern to prevent users from submitting bad data before it even reaches the server.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; background: #f0f2f5; display: flex; justify-content: center; padding: 40px; }
    .form-container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
    h2 { margin-top: 0; color: #1877f2; text-align: center; }
    
    .form-group { margin-bottom: 20px; }
    label { display: block; font-weight: bold; margin-bottom: 5px; color: #333; }
    
    /* Styling Inputs */
    input[type="text"], input[type="email"], input[type="password"] {
      width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 16px; transition: border 0.3s;
    }
    input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
      border-color: #1877f2; outline: none; box-shadow: 0 0 5px rgba(24, 119, 242, 0.3);
    }
    
    /* Styling Validation States */
    input:valid { border-left: 4px solid #2ecc71; }
    input:invalid:not(:placeholder-shown) { border-left: 4px solid #e74c3c; }
    
    .submit-btn { width: 100%; padding: 12px; background: #1877f2; color: white; border: none; border-radius: 5px; font-size: 18px; font-weight: bold; cursor: pointer; }
    .submit-btn:hover { background: #166fe5; }
  </style>
</head>
<body>

<div class="form-container">
    <h2>Create Account</h2>
    
    <form action="#" method="post">
      
      <div class="form-group">
        <label for="uname">Username</label>
        <input type="text" id="uname" name="uname" placeholder="Enter username" required minlength="3">
      </div>
      
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" placeholder="john@example.com" required>
      </div>
      
      <div class="form-group">
        <label for="pwd">Password</label>
        <input type="password" id="pwd" name="pwd" placeholder="Create password" required minlength="6">
      </div>
      
      <div class="form-group" style="font-size:0.9em; color:#555;">
        <input type="checkbox" id="terms" required>
        <label for="terms" style="display:inline; font-weight:normal;">I agree to the Terms of Service</label>
      </div>
      
      <button type="submit" class="submit-btn">Sign Up</button>
      
    </form>
    <p style="text-align:center; font-size:0.85em; color:#777; margin-top:20px;">
      Try submitting empty or invalid data to see HTML5 validation in action! Notice the green border when data is valid.
    </p>
  </div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Forms & Validation

Forms & Validation

The <form> Element

Input Types

Validation

Try It Yourself

Topics

The `<form>` Element