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:
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).

Advanced 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.

HTML - Forms and Input Elements