How to Create Basic Forms in HTML

<!DOCTYPE html>
<html>
<head>
  <title>Forms Example</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
    form { background: #f9fafb; padding: 20px; border-radius: 8px; }
    label { display: block; margin-top: 15px; font-weight: bold; }
    input, select, textarea { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #d1d5db; border-radius: 4px; }
    button { margin-top: 20px; padding: 10px 20px; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; }
    button:hover { background: #1d4ed8; }
    fieldset { margin-top: 20px; padding: 15px; border: 1px solid #d1d5db; border-radius: 4px; }
    legend { font-weight: bold; padding: 0 10px; }
  </style>
</head>
<body>
  <h1>HTML Forms</h1>
  
  <form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required placeholder="Enter your name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required placeholder="you@example.com">
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required minlength="8">
    
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="120">
    
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday">
    
    <label for="color">Favorite Color:</label>
    <input type="color" id="color" name="color">
    
    <label for="website">Website:</label>
    <input type="url" id="website" name="website" placeholder="https://example.com">
    
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
    
    <label for="quantity">Quantity (1-10):</label>
    <input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
    
    <label for="search">Search:</label>
    <input type="search" id="search" name="search" placeholder="Search...">
    
    <label for="file">Upload File:</label>
    <input type="file" id="file" name="file" accept=".pdf,.doc,.docx">
    
    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="">Select...</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="ca">Canada</option>
    </select>
    
    <label for="bio">Bio:</label>
    <textarea id="bio" name="bio" rows="4" placeholder="Tell us about yourself"></textarea>
    
    <fieldset>
      <legend>Preferences</legend>
      <label>
        <input type="checkbox" name="newsletter" value="yes">
        Subscribe to newsletter
      </label>
      <label>
        <input type="checkbox" name="terms" value="yes" required>
        Accept terms and conditions
      </label>
    </fieldset>
    
    <fieldset>
      <legend>Gender</legend>
      <label>
        <input type="radio" name="gender" value="male" required>
        Male
      </label>
      <label>
        <input type="radio" name="gender" value="female">
        Female
      </label>
      <label>
        <input type="radio" name="gender" value="other">
        Other
      </label>
    </fieldset>
    
    <input type="hidden" name="form_id" value="12345">
    
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </form>
</body>
</html>