Learning Web Design

Exercise 9-1 to 9-4

Forms

Home > Chapter Review and Exercises > Chapter 9 Exercises

Blackstone Bistro | Pizza-on-Demand

Making a Pizza Order Form

Follow the instructions on pages 191, 192, 194, 197, and 205 of the Class Text.
I have already created a folder in your Dropbox called Ch09 with all the necessary files you will need to edit.
You will start by editing the pizza.html file in your Ch09 folder.
If you have lost your pizza.html file, you can download it here.

A slide presentation of Exercise 9

Read pages 177-190 before starting Exercise 9-1.

Exercise 9-1 What you need to know for this exercise

The form element allows forms to be created on websites.
The action attribute provides the location (URL) of the application or script that will be used to process the form .
The method attribute specifies how the information is sent to the server. Its two values are:

1. Post - the information is the form is sent to a program on the server.

2. Get - the information is added to the URL of the form and then sent to the server.

The input element is a single line text-entry field.
The name attribute is used to give a variable name to store the information from the form in.
The type attribute is used in the input element to provide a single-line text field, e.g. <input type="text">
The textarea element provides a multiline text-entry field, e.g. <textarea>…</textarea>
Some of the most common specialized text entry fields are

1. Email address <input type="email">

2. Telephone number <input type="tel">

3. Password <input type="passsword">

4. URL <input type="url">

The <input type="submit"> creates a submit button, and sends the form data to the server.
The <input type="reset"> create a button that when clicked resets the form to its original state.
Make sure your </form> element is at the very end, just above </body>.

Exercise 9-1 Walkthrough

Pages 191-192

Step 1

Navigate in File Explorer to your Dropbox folder. From there go to your Class folder, and then the 1.Class text Exercises folder. Finally, open the Ch09 folder. In that folder is the pizza.html file you will be editing for this exercise. Open the pizza.html file in a text editor (i.e. Sublime)

Step 2

2a. Add the action and method to use for this form. Put the form element right after the intro paragraph, <p>Our 12" wood-fired ...

<h1>Blackstone Bistro | Pizza-on-Demand</h1>

<p>Our 12" wood-fired pizzas are available for delivery. Build your custom pizza and we'll deliver it within an hour.</p>

Your Information

<ul>

<li>Address:</li>

<li>Telephone Number:</li>

<li>Email:</li>

<li>Delivery instructions:</li>

</ul>

2b. And the end of the document, add the closing </form> tag.

<p>Number</p>

<p>How many pizzas:</p>

</form>

</body>

</html>

Step 3

Add four text-entry forms controls for the "Your Information" section.

<h1>Blackstone Bistro | Pizza-on-Demand</h1>

<p>Our 12" wood-fired pizzas are available for delivery. Build your custom pizza and we'll deliver it within an hour.</p>

Your Information

<ul>

<li>Address:<input type="text" name="address"></li>

<li>Telephone Number:<input type="tel" name="telephone"></li>

<li>Email:<input type="email" name="email"></li>

<li>Delivery instructions:</li>

</ul>

Step 4

After “<li>Delivery instructions:” add a line break <br> and a multiline text area that is four rows deep and 60 characters wide.

<h1>Blackstone Bistro | Pizza-on-Demand</h1>

<p>Our 12" wood-fired pizzas are available for delivery. Build your custom pizza and we'll deliver it within an hour.</p>

Your Information

<ul>

<li>Address:<input type="text" name="address" id="form-address"></li>

<li>Telephone Number:<input type="tel" name="telephone" id="form-tel"></li>

<li>Email:<input type="email" name="email" id="form-email"></li>

<li>Delivery instructions:<br>

</textarea></li>

</ul>

Step 5

Add a submit and reset button at the end, just before the </form> closing tag.

<p>Number</p>

<p>How many pizzas:</p>

</form>

</body>

</html>

Step 6

Save pizza.html back into the Ch09 folder, and open it in a browser. Try entering some information and submitting the form. You should get a response like the one shown below.

Step 7

At the completion of Exercise 9-1 the following is what the website should look like.

Read pages 193-194 before starting Exercise 9-2.

Exercise 9-2 What you need to know for this exercise

1. The radio button is used when there are multiple choices, but one choice is permitted to be selected.

2. The syntax of the radio button is <input type="radio" name="variable" value="value">

3. The checkbox is used when multiple choices are allowed.

4. The syntax of the checkbox is <input type="checkbox" name="variable" value="value">

5. When checked, the variable is given the value. The checked attribute preselects the form.

Exercise 9-2 Walkthrough

Page 194

Step 1

In the pizza.html file in the Ch09 folder, the “Design Your Dream Pizza” section, uses radio buttons for the crust options. Each variable name will be "crust" (because only one option will be picked) and the values will match the crust types. Follow this example for the remaining crust options:

<li><input type="radio" name="crust" value="white"> Classic white</li>

<h2>Design Your Dream Pizza:</h2>

<p>Pizza specs</p>

<p>Crust <em>(Choose one)</em>:</p>

<ul>

<li><input type="radio" name="crust" value="white">Classic white</li>

<li><input type="radio" name="crust" value="multigrain"> Multigrain</labelMultigrain</li>

<li><input type="radio" name="crust" value="cheese crust">Cheese-stuffed crust</li>

<li><input type="radio" name="crust" value="gluten free">Gluten-free</li>

</ul>

Step 2

Mark up the Toppings options using checkboxes. This time, the type for each should be checkbox. The variable name for each is toppings[ ], and the “Red sauce” option is preselected (use the checked attribute to preselect it when the forms loads).

<p>Toppings <em>(Choose as many as you want)</em>:</p>

<ul>

<li><input type="checkbox" name="toppings[]" value="red sauce" checked>Red sauce</li>

<li><input type="checkbox" name="toppings[]" value="white sauce">White sauce</li>

<li><input type="checkbox" name="toppings[]" value="mozzarella">Mozzarella Cheese</li>

<li><input type="checkbox" name="toppings[]" value="pepperoni">Pepperoni</li>

<li><input type="checkbox" name="toppings[]" value="mushrooms">Mushrooms</li>

<li><input type="checkbox" name="toppings[]" value="peppers">Peppers</li>

<li><input type="checkbox" name="toppings[]" value="anchovies">Anchovies</li>

</ul>

Step 3

Save pizza.html back into the Ch09 folder, and check your work by opening it in a browser to make sure it looks like the following.

Read pages 195-196 before starting Exercise 9-3.

Exercise 9-3 What you need to know for this exercise

A drop-down or scrolling menus provides a list of choices. These menus use the select element and several option elements.

An example of the select and option elements is:

<p>What is your favorite 80s band?

<option>Cocteau Twins</option>

<option>Tears for Fears</option>

</select>

</p>

Exercise 9-3 Walkthrough

Page 194

Step 1

In the pizza.html file in the Ch09 folder, make a pull-down menu, with values from 1 to 6, for the "How many pizzas" section. Use a select menu element with the option to order between 1 and 6 pizzas. Follow this example for the remaining options:

<p>Number</p>

<p>How many pizzas:

</select>

</p>

Step 2

Add options 2 through 6 to the select menu.

<p>Number</p>

<p>How many pizzas:

</select>

</p>

Step 3

Save pizza.html back into the Ch09 folder, and check your work by opening it in a browser to make sure it looks like the following.

Read pages 197-204 before starting Exercise 9-4.

Exercise 9-4 What you need to know for this exercise

1. Some of the input types are:

The file selection field is used to upload documents from a user's computer, e.g. <input type="file" name="photo">\
The hidden control field sends data when the form is submitted but is not visible to the user.
For date and times, there are the date, time, month, and week input controls.
For numerical inputs there are the number and range input controls.

3. The label, fieldset, and legend form elements improve accessibility by making the form easier to understand.

The label element associates descriptive text with its respective form field.
The fieldset element indicates a logical group of form controls.
The legend element provides a caption for the enclosed fieldsets.
Check out the example of these elements on page 204.

Exercise 9-4 Walkthrough

Page 205

Step 1

Add fieldsets and labels to the pizza form to make it more usable. Wrap the "Your Information" section of the form in a fieldset element. Change the markup of the section title from a paragraph (p) to a legend for the fieldset.

<legend>Your Information</legend>

<ul>

<li>Address:<input type="text" name="address"></li>

<li>Telephone Number:<input type="tel" name="telephone"></li>

<li>Email: <input type="email" name="email"></li>

<li>Delivery instructions:<br>

</ul>

</fieldset>

Step 2

Once you have completed this, the Your Information part of the form will look like this:

Step 3

Group the Crust, Toppings, and Number questions into a big fieldset with the legend “Pizza specs”.

3a. For this step you will change the <p> tags to <legend> tags that surround the text Pizza specs as shown here:

Before:

<h2>Design Your Dream Pizza:</h2>

<p>Pizza specs</p>

After:

<h2>Design Your Dream Pizza:</h2>

<legend>Pizza specs</legend>

3b. Now add the <fieldset> opening tag just above Pizza specs with the <legend> tags:

<h2>Design Your Dream Pizza:</h2>

<legend>Pizza specs</legend>

3c. This large fieldset will enclose the Crust, Toppings, and Number sections of the form, thus the closing fieldset tag goes at the very end as shown here:

</fieldset>

</form>

</body>

</html>

Step 4

Once you have completed this, the Crust, Toppings, and Number questions part of the form will look like this:

Step 5

Create separate fieldsets for the Crust, Toppings, and Number sections. Change all the <p> tags to <legend> tags.

5a. Here is the Crust section:

<h2>Design Your Dream Pizza:</h2>

<legend>Pizza specs</legend>

<legend>Crust <em>(Choose one)</em>:</legend>

<ul>

<li><input type="radio" name="crust" value="white"> Classic white</li>

<li><input type="radio" name="crust" value="multigrain"> Multigrain</li>

<li><input type="radio" name="crust" value="cheese crust"> Cheese-stuffed crust</li>

<li><input type="radio" name="crust" value="gluten free"> Gluten-free</li>

</ul>

</fieldset>

5b. Here is the Toppings section:

<legend>Toppings <em>(Choose as many as you want)</em></legend>

<ul>

<li><input type="checkbox" name="toppings[]" value="red sauce" checked> Red sauce</li>

<li><input type="checkbox" name="toppings[]" value="white sauce"> White sauce</li>

<li><input type="checkbox" name="toppings[]" value="mozzarella"> Mozzarella Cheese</li>

<li><input type="checkbox" name="toppings[]" value="pepperoni"> Pepperoni</li>

<li><input type="checkbox" name="toppings[]" value="mushrooms"> Mushrooms</li>

<li><input type="checkbox" name="toppings[]" value="peppers"> Peppers</li>

<li><input type="checkbox" name="toppings[]" value="anchovies"> Anchovies</li>

</ul>

</fieldset>

5c. Here is the Number section:

<legend>Number</legend>

<p>How many pizzas:

</select>

</p>

</fieldset>

Step 6

Once you have completed this, the Your Information part of the form will look like this:

Step 7

Add labels to the "Your Information" fieldset. Link the label to the text input by using the for/id label method. The descriptions (i.e. Name, Address, etc.) should have label tags around them. The for/id values should be descriptive and they must match. As an example, here is the first one:

Here is the "Your Information" section:

<legend>Your Information</legend>

<ul>

<li><label for="form-address">Address:</label> <input type="text" name="address" id="form-address"></li>

<li><label for="form-tel">Telephone Number:</label> <input type="tel" name="telephone" id="form-tel"></li>

<li><label for="form-email">Email: <input type="email" name="email" id="form-email"></label></li>

<li><label for="form-story">Delivery instructions:</label><br>

</ul>

</fieldset>

Step 8

For the radio and checkbox buttons, wrap the label element around the input and its value label. In this way, the button will be selected when the user clicks or taps anywhere inside the label element. As an example, here is the first one:

<li><label><input type="radio" name="crust" value="white"> Classic White</label></li>

8a. Here is the Crust section:

<legend>Pizza specs</legend>

<legend>Crust <em>(Choose one)</em>:</legend>

<ul>

<li><label><input type="radio" name="crust" value="white"> Classic white</label></li>

<li><label><input type="radio" name="crust" value="multigrain"> Multigrain</label></li>

<li><label><input type="radio" name="crust" value="cheese crust"> Cheese-stuffed crust</label></li>

<li><label><input type="radio" name="crust" value="gluten free"> Gluten-free</label></li>

</ul>

</fieldset>

8b. Here is the Toppings section:

<legend>Toppings <em>(Choose as many as you want)</em></legend>

<ul>

<li><label><input type="checkbox" name="toppings[]" value="red sauce" checked> Red sauce</label></li>

<li><label><input type="checkbox" name="toppings[]" value="white sauce"> White sauce</label></li>

<li><label><input type="checkbox" name="toppings[]" value="mozzarella"> Mozzarella Cheese</label></li>

<li><label><input type="checkbox" name="toppings[]" value="pepperoni"> Pepperoni</label></li>

<li><label><input type="checkbox" name="toppings[]" value="mushrooms"> Mushrooms</label></li>

<li><label><input type="checkbox" name="toppings[]" value="peppers"> Peppers</label></li>

<li><label><input type="checkbox" name="toppings[]" value="anchovies"> Anchovies</label></li>

</ul>

</fieldset>

Step 9

Save pizza.html and check your work by opening it in a browser to make sure it looks like the following.

The final pizza.html document will appear as follows:

<!DOCTYPE html >

<html>

<head>

<title>Blackstone Bistro: Pizza-on-Demand</title>

ol, ul {

list-style-type: none;

}

</style>

</head>

<body>

<h1>Blackstone Bistro | Pizza-on-Demand</h1>

<p>Our 12" wood-fired pizzas are avaiable for delivery. Build your custom pizza and we'll deliver it within an hour.</p>

<legend>Your Information</legend>

<ul>

<li><label for="form-address">Address:</label> <input type="text" name="address" id="form-address"></li>

<li><label for="form-tel">Telephone Number:</label> <input type="tel" name="telephone" id="form-tel"></li>

<li><label for="form-email">Email: <input type="email" name="email" id="form-email"></label></li>

<li>Delivery instructions:<br>

</ul>

</fieldset>

<h2>Design your dream pizza:</h2>

<legend>Pizza specs</legend>

<legend>Crust <em>(Choose one)</em>:</legend>

<ul>

<li><label><input type="radio" name="crust" value="white"> Classic white</label></li>

<li><label><input type="radio" name="crust" value="multigrain"> Multigrain</label></li>

<li><label><input type="radio" name="crust" value="cheese crust"> Cheese-stuffed crust</label></li>

<li><label><input type="radio" name="crust" value="gluten free"> Gluten-free</label></li>

</ul>

</fieldset>

<legend>Toppings <em>(Choose as many as you want)</em></legend>

<ul>

<li><label><input type="checkbox" name="toppings[]" value="red sauce" checked> Red sauce</label></li>

<li><label><input type="checkbox" name="toppings[]" value="white sauce"> White sauce</label></li>

<li><label><input type="checkbox" name="toppings[]" value="mozzarella"> Mozzarella Cheese</label></li>

<li><label><input type="checkbox" name="toppings[]" value="pepperoni"> Pepperoni</label></li>

<li><label><input type="checkbox" name="toppings[]" value="mushrooms"> Mushrooms</label></li>

<li><label><input type="checkbox" name="toppings[]" value="peppers"> Peppers</label></li>

<li><label><input type="checkbox" name="toppings[]" value="anchovies"> Anchovies</label></li>

</ul>

</fieldset>

<legend>Number</legend>

<p>How many pizzas:

</select>

</p>

</fieldset>

</fieldset>

</form>

</body>

</html>

Report abuse