<!DOCTYPE html>
<html>
<head>
  <title>Enhanced Form Example</title>
</head>
<body>
  <form action="/submit" method="post">
    <!-- Name Input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required maxlength="20" autofocus><br><br>
    
    <!-- Phone Input -->
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" placeholder="Enter your phone number" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br><br>
    
    <!-- Age Input -->
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="100" placeholder="Enter your age"><br><br>
    
    <!-- Bio Textarea -->
    <label for="bio">Bio:</label>
    <textarea id="bio" name="bio" readonly>This is a read-only text area.</textarea><br><br>
    
    <!-- Agreement Checkbox -->
    <label for="agreement">Agree to terms:</label>
    <input type="checkbox" id="agreement" name="agreement" required><br><br>
    
    <!-- Submit Button -->
    <input type="submit" value="Submit">
  </form>
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.