Practice Problems

Create a new HTML file for each problem to apply the concepts from this lesson.

Problem 1: Basic Contact Form

File Name: problem1.html
Create a form that includes:
- A text field for “Name.”
- An email field for “Email.”
- A text area labeled “Message.”
Ensure each field has a corresponding <label> and a submit button.

Problem 2: Feedback Survey

File Name: problem2.html
Build a feedback form with:
- Radio buttons to rate a service (e.g., 1-5).
- A checkbox for “Subscribe to updates.”
- A multiline comment section using <textarea>.
Add required attributes to fields that must be filled in.

Problem 3: Registration Page

File Name: problem3.html
Create a form for user registration with:
- Username and password fields.
- Password confirmation (<input type="password">).
- A “Register” or “Sign Up” <button type="submit">.
Use at least one placeholder and at least one validation attribute (like required).

Assignment Submission

After completing these exercises, call Mike over for feedback on your newly created HTML documents.

Advance Problems

Problem 4: User Login Page

File Name: problem4.html

Instructions:

HTML Structure:
- Set up the standard HTML document structure with <!DOCTYPE html>, <html>, <head>, and <body>.
- Set the <title> to “User Login”.
Form Setup:
- Create a <form> element with appropriate action (a placeholder URL like "/login") and method set to "POST".
Form Fields:
- Email Field:
  - Use an <input> with type="email" for the user's email address.
  - Include a corresponding <label> with the for attribute matching the input’s id.
  - Add the required attribute.
- Password Field:
  - Use an <input> with type="password" for the user's password.
  - Provide a <label> with matching for and id attributes.
  - Add the required attribute.
- Remember Me Checkbox:
  - Include an <input> with type="checkbox" for a “Remember Me” option.
  - Associate it with a <label>.
- Submit Button:
  - Add a <button type="submit"> labeled “Log In”.

Objective:

Design a login form that uses email and password inputs along with a checkbox option for "Remember Me." This exercise reinforces the use of input types, labels, and form validation attributes.

Problem 5: Event RSVP Form

File Name: problem5.html

Instructions:

HTML Structure:
- Begin with the standard HTML document structure.
- Set the <title> to “Event RSVP”.
Form Setup:
- Create a <form> element with an action (e.g., "/rsvp") and method="POST".
Form Fields:
- Name Field:
  - Use an <input type="text"> for the guest’s name.
  - Include a <label> for the field, and mark it as required.
- Email Field:
  - Use an <input type="email"> for the guest’s email address.
  - Include a <label> with the required attribute.
- Number of Attendees:
  - Use an <input type="text"> (or optionally type="number" if you’re comfortable) to capture how many people will attend.
  - Include a corresponding <label>.
- Meal Preference (Radio Buttons):
  - Present a set of radio buttons for meal preference options (e.g., “Vegetarian”, “Non-Vegetarian”, “Vegan”).
  - Use the same name attribute for the radio buttons so only one can be selected.
  - Provide a <label> for each option.
- Special Requests:
  - Add a <textarea> with a matching <label> for guests to include any special requests.
- Submit Button:
  - Include a <button type="submit"> with a label such as “RSVP Now”.

Objective:

Build an RSVP form that collects guest information and preferences. This problem practices using different input types, grouping radio buttons, and implementing a multi-line text area.

Problem 6: Product Feedback Form

File Name: problem6.html

Instructions:

HTML Structure:
- Start with the standard HTML document structure.
- Set the <title> to “Product Feedback”.
Form Setup:
- Create a <form> element with an action (for example, "/feedback") and set the method to "POST".
Form Fields:
- Product Name:
  - Use an <input type="text"> field for the product name.
  - Include a <label> with an appropriate for attribute.
- User Email:
  - Use an <input type="email"> field for collecting the user's email.
  - Include a <label> and add the required attribute.
- Rating (Radio Buttons):
  - Create a set of radio buttons labeled with numbers 1 through 5 to rate the product.
  - Use a single name attribute for all rating inputs so that only one rating can be selected.
  - Provide a <label> for each rating option.
- Additional Comments:
  - Use a <textarea> with a matching <label> to capture any extra feedback.
- Terms Agreement (Checkbox):
  - Include an <input type="checkbox"> for users to agree to terms or privacy policies.
  - Provide a <label> for the checkbox and mark it as required.
- Submit Button:
  - Add a <button type="submit"> labeled “Submit Feedback”.

Objective:

Create a comprehensive feedback form that gathers product information, user ratings, and comments. This exercise integrates text fields, email inputs, radio buttons, checkboxes, text areas, and form submission.

Day 4 - HTML Forms and Input Elements