HTML5 Validation

<h2>HTML5 Form Validation</h2>
<form class="form-container">
  <!-- Required Field -->
  <div class="form-group">
    <label for="name">Full Name (Required):</label>
    <input type="text" id="name" name="name" required>
    <small>Try submitting empty</small>
  </div>
  <!-- Email Validation -->
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <small>Must be valid email format</small>
  </div>
  <!-- Min/Max Length -->
  <div class="form-group">
    <label for="password">Password (8-20 chars):</label>
    <input type="password" id="password" name="password" minlength="8" maxlength="20" required>
    <small>Between 8 and 20 characters</small>
  </div>
  <!-- Min/Max Numbers -->
  <div class="form-group">
    <label for="age">Age (18-100):</label>
    <input type="number" id="age" name="age" min="18" max="100" required>
    <small>Must be between 18 and 100</small>
  </div>
  <!-- URL Validation -->
  <div class="form-group">
    <label for="website">Website URL:</label>
    <input type="url" id="website" name="website">
    <small>Must be valid URL (https://example.com)</small>
  </div>
  <!-- Pattern Validation -->
  <div class="form-group">
    <label for="phone">Phone (XXX-XXX-XXXX):</label>
    <input type="tel" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890">
    <small>Format: 123-456-7890</small>
  </div>
  <button type="submit" class="btn">Submit</button>
</form>