form.md

📝 HTML Form Exercise

🎯 Learning Outcomes

By completing this exercise, students will be able to:

• Understand basic form elements: <form>, <input>, <textarea>, <select>, <button>
• Set name, type, placeholder, and value attributes correctly
• Use form submission with the action and method attributes
• Group fields using <fieldset> and <legend>

---

🧩 Part A – Create a Simple Contact Form

Instructions:

1. Create an HTML file named contact-form.html.
2. Create a form that includes the following inputs:

• Full Name – Text input
• Email Address – Email input
• Message – Textarea with 5 rows
• Submit – Button

3. Set the action="#" and method="post" attributes in the <form> tag.
4. Add appropriate placeholders and labels.

---

📦 Part B – Add More Input Types

Instructions: Create another form section that includes:

• Date of Birth – type="date"
• Gender – Radio buttons (Male, Female, Other)
• Subscribe to Newsletter – Checkbox
• Password – type="password"
• Confirm Password – type="password"

---

🎛️ Part C – Use a Select Dropdown

Instructions: Add a dropdown (<select>) for selecting your Country, with the following options:

• Cambodia
• Thailand
• Vietnam
• Laos

Label this field properly and make it required.

---

📚 Part D – Group Your Form with <fieldset>

Instructions: Group related fields using <fieldset> and <legend>. For example:

• Contact Info
• Account Info

---

🧠 Challenge Task – Create a Registration Form

Design a full registration form including:

• Name

• Email

• Phone Number

• Country (dropdown)

• Gender (radio)

• Newsletter (checkbox)

• Password and Confirm Password

• Use placeholders, labels, and required fields

• Include a Reset button

• Use CSS to style the form nicely (optional)

---

🧪 Optional Bonus

Add validation rules:

• Email should be in email format
• Password and Confirm Password must match
• All required fields must be filled

---

📚 Reference:

• W3Schools - HTML Forms
• MDN - <form> element