Personal Information

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input
    type="text"
    id="username"
    name="username"
    minlength="4"
    maxlength="20"
    value="52"
  />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="6" />

  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob" />

  <label for="phone">Phone:</label>
  <input
    type="tel"
    id="phone"
    name="phone"
    pattern="[0-9]{10}"
    placeholder="1234567890"
  />

  <!-- Form Controls -->
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Preferences

<form action="/submit" method="POST">
  <label for="volume">Preferred Volume Level:</label>
  <input type="range" id="volume" name="volume" min="0" max="100" value="50" />

  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="" disabled selected>Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
  </select>

  <label>Preferred Contact Method:</label>
  <label
    ><input type="radio" name="contact_method" value="email" /> Email</label
  >
  <label
    ><input type="radio" name="contact_method" value="phone" /> Phone</label
  >

  <label
    ><input type="checkbox" name="newsletter" checked /> Subscribe to
    Newsletter</label
  >

  <!-- Form Controls -->
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Comments

<form action="/submit" method="POST">
  <label for="comments">Additional Information:</label>
  <textarea
    id="comments"
    name="comments"
    rows="4"
    cols="50"
    placeholder="Write here"
  ></textarea>

  <!-- Hidden Input (for backend data) -->
  <input type="hidden" name="session_id" value="123456" />

  <!-- Form Controls -->
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>