Book a cruise

Your company has just received an order from fictional Best Cruises Company™! Now it’s your job to build the HTML for a reservation form. Best Cruises - Book A Cruise™ will feature all the best elements that HTML has to offer: date picker, dropdown, number field, email fields and a checkbox! Carefully follow the instructions given and your customer is going to be over the moon!

What you’re going to build

Another absolute stunner of a web site! Someone might say that a little styling and grouping form elements might do wonders but functionality is all that matters, right?

How you’re going to build it

Header Text doesn’t matter. Add some text as h1

From select with id from-selection Dropdown elements should be following:

<option value="Helsinki" id="from-helsinki">Helsinki</option>
<option value="Turku" id="from-turku">Turku</option>
<option value="Vaasa" id="from-vaasa">Vaasa</option>
<option value="Tallinna" id="from-tallinna">Tallinna</option>

To select with id to-selection Dropdown elements should be following:

<option value="Helsinki" id="to-helsinki">Helsinki</option>
<option value="Turku" id="to-turku">Turku</option>
<option value="Vaasa" id="to-vaasa">Vaasa</option>
<option value="Tallinna" id="to-tallinna">Tallinna</option>

Name id customer-name and this field is required.

Email id customer-email and this field is required.

Number of adults id number-of-adults , field is required, min 1 and max 99.

Number of children id number-of-children , field is required, min 0 and max 99.

Departure date id departure-date and this field is required.

Travelling with a vehicle id vehicle .

Submit id submit.

Pay attention to choosing correct field types. It makes no sense for number of adults or departure date fields to accept letters. Before starting the exercise take a look at different input types.

Of course styling your form is not mandatory but you’re free to try out some CSS if you feel like it.

Make sure your document passes W3C validator and has correct ids. Incorrect ids will make automated tests fail and then you won’t get any points for the exercise.

See following links if you need help with this exercise

• https://www.w3schools.com/tags/att_input_required.asp

• https://www.w3schools.com/tags/tag_select.asp

• https://www.w3schools.com/tags/att_input_type_number.asp

• https://www.w3schools.com/tags/att_input_type_email.asp

• https://www.w3schools.com/tags/att_input_type_date.asp

• https://www.w3schools.com/tags/att_input_type_checkbox.asp

A+ presents the exercise submission form here.

Posting submission...