HTML Forms - Part 2

More Form Elements

HTML provides many input types: text, email, password, number, date, checkbox, radio, and more.

Each input type has specific validation and behavior built into the browser.

<!-- Text inputs -->
<input type="text" placeholder="Text">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<input type="number" min="1" max="100">
<input type="date">

<!-- Checkboxes -->
<input type="checkbox" id="agree">
<label for="agree">I agree</label>

<!-- Radio buttons -->
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<!-- Textarea -->
<textarea rows="4" cols="50"></textarea>

<!-- Select dropdown -->
<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>
  • type="text" - Single-line text
  • type="email" - Email with validation
  • type="password" - Hidden text
  • type="checkbox" - Multiple selections
  • type="radio" - Single selection
  • <textarea> - Multi-line text
  • <select> - Dropdown list

Try Different Input Types

<h2>Registration Form</h2>
<form>
  <label>Username:</label><br>
  <input type="text" placeholder="Username"><br><br>
  
  <label>Password:</label><br>
  <input type="password" placeholder="Password"><br><br>
  
  <label>Age:</label><br>
  <input type="number" min="18" max="100"><br><br>
  
  <label>Gender:</label><br>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female<br><br>
  
  <input type="checkbox" id="terms">
  <label for="terms">I agree to terms</label><br><br>
  
  <button type="submit">Register</button>
</form>

Note: Use appropriate input types for better mobile experience and built-in validation.