In this exercise, you’ll create a table booking form for the Little Lemon website. The form will contain four fields; email address, date of booking, number of people and a checkbox to confirm agreement with the cancellation policy. The form will also have a submit button.
Step 1: First add a form element to the main element of the HTML document.
Step 2: Next, add four div elements; one for each input field.
Step 3: In the first div element, add a label element and an input element for the email address. Ensure that you use the correct type attribute to the input element to apply client-side validation.
Step 4: In the second div element, add a label element and an input element for the date of booking. Set the type attribute to date to allow for a date picker to appear when the user interacts with the form. Note that if using Live Preview, the date picker will not appear. However, if you launch the web page in a new web browser tab, it will appear.
Step 5: In the third div element, add a label element and an input element for the number of people. Set the type attribute to number and apply the appropriate attributes so that the minimum value is 1 and the maximum value is 8.
Step 6: In the fourth div element, add a label element. Set the text of the label element to "I agree to the cancellation policy".
Step 7: Add an input element to the label and set its type attribute to checkbox. Apply the required attribute to the element.
Step 8: After the fourth div element, add a button element and set its text to "Book Now". Set its type attribute to submit.
Step 9: For each input element, add a name attribute.
Step 10: Save the HTML document and open it in Live Preview.
Step 11: Click the date of booking field. Note the result.
Step 12: Type the word "hello" into the email address field. Set the date field to today and the number of people to 1.
Note The date picker element is not supported in the Live Preview.
Step 13: Click the checkbox and then click the Book Now button. Note the result.
- Refer to your cheat sheets and glossary from previous lessons.