DEV Community

Richard Pascoe
Richard Pascoe

Posted on

Build a Hotel Feedback Form

#community #learning #programming #webdev

After completing the final three theory lessons surrounding working with forms yesterday, this morning had me building a hotel feedback form.

This freeCodeCamp workshop starts as before, with you being given some HTML boilerplate. You can see this code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hotel Feedback Form</title>
  </head>
  <body>

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

As in previous workshops, the first steps have you adding elements such as header, h1, and p. This is built on further with the addition of the main element, which then has you adding your first form. Here is an example of a form element:

<form method="value-goes-here" action="url-goes-here">
  <!-- inputs go inside here -->
</form>
Enter fullscreen mode Exit fullscreen mode

The action attribute specifies where the form data is sent, while the method attribute determines how the data is submitted.

In subsequent lessons, I added input elements within a fieldset and considered the use of captions with the legend element. I then associated label elements with their corresponding inputs, as shown in the following example:

<label for="name">Name:</label>
<input type="text" id="name" name="name">
Enter fullscreen mode Exit fullscreen mode

An explicit association is created when the for attribute of a label matches the id attribute of its corresponding input. The name attribute identifies form data after submission to the server.

At this stage, I was asked to add placeholder text to the input and then repeat the process for the email input field.

Input elements can have a size attribute, which specifies how many characters are visible as the user types. The value must be a positive integer. The following is an example of how to use this attribute:

<label for="lastName">Last Name:</label>
<input id="lastName" name="lastName" type="text" size="10" />
Enter fullscreen mode Exit fullscreen mode

Once the existing inputs had the size attribute added, I was asked to create a label for age, using a number input with min and max values. Below is an example:

<input type="number" id="age" name="age" min="18" max="100">
Enter fullscreen mode Exit fullscreen mode

In the next exercise, I created a new fieldset, and the following lessons introduced radio buttons. Below is an example showing two radio buttons:

<input type="radio" id="yes" name="first-time">
<label for="yes">Yes</label>
<input type="radio" id="no" name="first-time">
<label for="no">No</label>
Enter fullscreen mode Exit fullscreen mode

The radio buttons are grouped by sharing the same name attribute, allowing only one option to be selected at a time.

After completing the radio-related steps, a third fieldset was added to introduce checkboxes. The example below shows how they can be used for food options:

<fieldset>
  <legend>Food Options</legend>
  <input type="checkbox" id="pizza" name="food" value="pizza">
  <label for="pizza">Pizza</label>
  <input type="checkbox" id="burger" name="food" value="burger">
  <label for="burger">Burger</label>
</fieldset>
Enter fullscreen mode Exit fullscreen mode

The value attribute defines the value that will be sent to the server upon form submission.

With the checkbox exercises complete, another fieldset was added to allow users to leave a rating for the hotel. This involved the use of dropdown menus, as shown in the example below:

<label for="city">Choose a City: </label>
<select id="city" name="city">
  <option value="new-york">New York</option>
  <option value="los-angeles">Los Angeles</option>
  <option value="chicago">Chicago</option>
  <option value="miami">Miami</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Adding rating systems for the hotel and food quality were among the final lessons in this workshop, followed by a section for customers to leave any comments. Below is an example of a textarea element, as used in the remaining steps:

<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
Enter fullscreen mode Exit fullscreen mode

The rows attribute defines the visible height of the textarea, while the cols attribute defines its visible width.

The workshop concluded with the final exercise, where a submit button was added, as shown in the completed code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hotel Feedback Form</title>
  </head>
  <body>
    <header>
      <h1>Hotel Feedback Form</h1>
      <p>
        Thank you for staying with us. Please provide feedback on your recent
        stay.
      </p>
    </header>
    <main>
      <form method="POST" action="https://hotel-feedback.freecodecamp.org">
        <fieldset>
          <legend>Personal Information</legend>
          <label for="full-name">Name (required):</label>
          <input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">

          <label for="email">Email address (required):</label>
          <input
            placeholder="example@email.com"
            required
            id="email"
            type="email"
            name="email"
            size="20"
          />
          <label for="age">Age (optional):</label>
          <input type="number" name="age" id="age" min="3" max="100" />
        </fieldset>

        <fieldset>
          <legend>Was this your first time at our hotel?</legend>
          <input id="yes-option" type="radio" name="hotel-stay" />
          <label for="yes-option">Yes</label>
          <input id="no-option" type="radio" name="hotel-stay" />
          <label for="no-option">No</label>
        </fieldset>

        <fieldset>
          <legend>
            Why did you choose to stay at our hotel? (Check all that apply)
          </legend>

          <input type="checkbox" id="ads" name="choice" value="ads" />
          <label for="ads">Social Media Ads</label>

          <input
            type="checkbox"
            id="recommendation"
            name="choice"
            value="recommendation"
          />
          <label for="recommendation">Personal Recommendation</label>

          <input type="checkbox" id="location" name="choice" value="location" />
          <label for="location">Location</label>

          <input
            checked
            type="checkbox"
            id="reputation"
            name="choice"
            value="reputation"
          />
          <label for="reputation">Reputation</label>

          <input type="checkbox" id="price" name="choice" value="price" />
          <label for="price">Price</label>
        </fieldset>

        <fieldset>
          <legend>Ratings</legend>

          <label for="service">How was the service?</label>

          <select name="service" id="service">
            <option value="poor">Poor</option>
            <option value="satisfactory">Satisfactory</option>
            <option value="good">Good</option>
            <option value="very-good">Very Good</option>
            <option selected value="excellent">Excellent</option>
          </select>

          <label for="food">How was the food?</label>

          <select name="food" id="food">
            <option value="poor">Poor</option>
            <option value="satisfactory">Satisfactory</option>
            <option value="good">Good</option>
            <option value="very-good">Very Good</option>
            <option selected value="excellent">Excellent</option>
          </select>
        </fieldset>

        <label for="comments">Other Comments?</label>
        <textarea cols="30" rows="10" name="comments" id="comments"></textarea>

      <button type="submit">Submit</button>        
      </form>
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The next step in the curriculum is a theory lesson on working with tables, leading up to the Build a Final Exams Table workshop. I can't wait to see you there!

Written by a Human logo

Top comments (0)