Day 5: Forms II & Week 2 Mini-Project

Daily Objective

Implement advanced form controls, utilize browser-native validation, and complete the Week 2 mini-projects.

1. Advanced Form Controls

• <select> and <option>: Dropdown selection menus.
• <textarea>: Multi-line text inputs for messages, bios, and comments.
• <button type="submit">: Triggers form submission.

<div>
  <label for="country">Country:</label>
  <select id="country" name="country" required>
    <option value="">-- Choose Country --</option>
    <option value="us">United States</option>
    <option value="es">Spain</option>
    <option value="mx">Mexico</option>
  </select>
</div>

<div>
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="5" required minlength="10"></textarea>
</div>

<button type="submit">Send Message</button>

2. Native HTML5 Validation

Use built-in attributes to validate user entries without JavaScript:

• required: Field cannot be left empty.
• min / max: Minimum and maximum values for numeric or date inputs.
• minlength / maxlength: Character length bounds.
• pattern: Regular expression pattern for custom formatting.

---

Week 2 Mini-Project: Contact Page & Schedule Table

Project Requirements:

1. Contact Page: A full contact form with name, email, subject dropdown (<select>), inquiry message (<textarea>), and submit button with native validation.
2. Schedule Page: An HTML table showing daily study routines with <thead>, <tbody>, and cell spanning (colspan or rowspan).
3. HTML Validation: Open validator.w3.org and validate your pages until you have 0 errors!