HTML Forms and Input Elements

1. Introduction #

2. Learning Objectives #

• Build the <form> wrapper and understand its attributes.

• Use various <input> types (text, email, password, radio, checkbox).

• Create multi-line text areas and dropdown menus.

• Apply semantic <label> tags for accessibility.

• Implement basic client-side form validation.

3. The <form> Element #

• action: The URL where the data should be sent.

• method: How the data is sent (GET for searching, POST for sensitive data like passwords).

<!-- Example 1: Basic Form Wrapper -->
<form action="/submit-login" method="POST">
  <!-- Inputs go here -->
</form>

4. The <label> Element #

<!-- Example 2: Labels and Inputs -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

5. Text, Password, and Email Inputs #

• type="text": Standard one-line text field.

• type="password": Masks the characters (dots or asterisks).

• type="email": On mobile, brings up a keyboard with the '@' symbol and requires a valid email format.

<!-- Example 3: Text, Password, Email -->
<form>
  <input type="text" placeholder="Enter your name">
  <input type="email" placeholder="Enter your email">
  <input type="password" placeholder="Enter your password">
</form>

6. Radio Buttons and Checkboxes #

• Radio Buttons (type="radio"): Allow selecting ONLY ONE option from a group. They must share the exact same name attribute.

• Checkboxes (type="checkbox"): Allow selecting ZERO OR MORE options.

<!-- Example 4: Radio Buttons -->
<p>Choose your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<!-- Example 5: Checkboxes -->
<p>Select your skills:</p>
<input type="checkbox" id="html" name="skills" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skills" value="css">
<label for="css">CSS</label>

7. The Dropdown Select Menu #

<!-- Example 6: Dropdown Menu -->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>

8. Multi-line Text Area #

<!-- Example 7: Textarea -->
<label for="message">Leave a message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Type here..."></textarea>

9. Buttons #

• <button type="submit"> triggers the form submission.

• <input type="submit"> does the exact same thing.

<!-- Example 8: Buttons -->
<button type="submit">Register Now</button>
<button type="reset">Clear Form</button>

10. Form Validation Attributes #

• required: The field cannot be left blank.

• minlength & maxlength: Sets character limits.

• min & max: Sets numerical limits.

<!-- Example 9: Basic Validation -->
<input type="text" name="username" required minlength="5">
<input type="number" name="age" min="18" max="99">

11. Best Practices & Common Mistakes #

• ALWAYS use <label> tags with matching for and id attributes.

• Use the correct type (e.g., type="email" instead of type="text") to ensure mobile users get the optimal keyboard layout.

Common Mistakes:

• Forgetting the name attribute on inputs. Without the name attribute, the data will NOT be sent to the server when submitted!

• Grouping Radio buttons with different name attributes, which breaks the "choose only one" logic.

12. Mini Project: Registration Form #

<!-- Example 10: Complete Registration Form -->
<h2>Register for an Account</h2>
<form action="/register" method="POST">
  
  <div>
    <label for="email">Email Address *</label>
    <input type="email" id="email" name="email" required placeholder="you@example.com">
  </div>
  
  <div>
    <label for="password">Password *</label>
    <input type="password" id="password" name="password" required minlength="8">
  </div>
  
  <div>
    <p>Account Type:</p>
    <input type="radio" id="student" name="role" value="student" checked>
    <label for="student">Student</label>
    <input type="radio" id="teacher" name="role" value="teacher">
    <label for="teacher">Teacher</label>
  </div>
  
  <div>
    <input type="checkbox" id="terms" name="terms" required>
    <label for="terms">I agree to the Terms of Service</label>
  </div>
  
  <button type="submit">Create Account</button>
</form>

13. MCQ Quiz #

1. 1. Which input type is used to securely enter a password?

• A) type="hidden"

• B) type="secure"

• C) type="password"

• D) type="text"

1. 2. Which attribute must be shared across radio buttons to group them together?

• A) id

• B) value

• C) class

• D) name

1. 3. What tag is used for a multi-line text input field?

• A) <input type="multiline">

• B) <textfield>

• C) <textarea>

• D) <text>

14. Interview Questions #

Q: Why is the name attribute so important on input fields? A: When the form is submitted, the data is sent to the server as key-value pairs. The name attribute acts as the key. Without it, the server receives no data for that specific input field.

15. Summary #

16. Next Chapter Recommendation #