Assignment 14 — Working with Forms

The assignment for this week introduces forms. Forms allow websites to become interactive.

To create a form, you will use a <form> element. The <form> element contains other form-related elements (such as <select>, <option>, <input> and <textarea)> that define the interactive elements within the form. When you create a form, you will specify the URL address of the script on the server that will process the form, as well as the type of HTTP method (get or post) that you will use to process the information.

<form id="cakeform" action="http://www.vickeylynne.com/processorder.php" method="post">            

Generally, you use post when you are posting information to a web site and get when retrieving information from a website. This course does not cover the back-end processing script for the forms - only the HTML elements required to create a form within your web page.

The following table lists some of the elements that you can embed within a <form> element.

<select name="flavor">
   <option value="chocolate">Chocolate</option>
   <option value="vanilla">Vanilla</option>
   <option value="marble">Marble</option>
   <option value="carrot">Carrot</option>
 </select>

<input type="radio" name="cakesize" value="eight" id="eight" />1/8 sheet
<input type="radio" name="cakesize" value="four" id="four" checked="checked" />1/4 sheet
<input type="radio" name="cakesize" value="two" id="two" />1/2 sheet
<input type="radio" name="cakesize" value="full" id="full"  />Full 

<input type="checkbox" name="extras[]" value="pink" id="pink" />Pink
<input type="checkbox" name="extras[]" value="blue" id="blue" />Blue
<input type="checkbox" name="extras[]" value="green" id="green" />Green

Name: <input type="text" name="name" id="name" value="" />
Phone: <input type="text" name="phone_number" id="phone_number" value="" />

 <input type="submit" value="Order Now" />

<textarea name="comments" id="comments" rows="3" cols="20"></textarea>

<input type="number" min="5" max="25"/>

<input type="range" min="0" max="10" step="2"/>

<input type="color">

You can embed other HTML elements within the <form> element to define the layout of your form. You can also use CSS rules to define the look of your form elements.

For more information about how forms work, see Chapter 14 of the Head First HTML and CSS book.

HTML elements:

Tasks:

1. Read and complete the exercises from Chapter 14 of the Head First HTML and CSS book.
2. Create a folder named Chapter14.
3. In your Chapter14 folder, create your customized versions of the following files.
   • blog.html
   • index.html
   • starbuzz.css
   • images folder that contains the required images
   • form.html
   • form.css

   Duplicate the folder structure described in the book.

4. Ensure that all of your links work correctly and display the appropriate file when clicked.
5. Validate each of the HTML pages at https://validator.w3.org/. Fix any errors that occur.
6. Upload the contents of your Chapter14 folder to your website.
7. Zip your Chapter14 folder and name the file yourName_chapter14.zip.
8. Submit the zipped file through Blackboard. In the comments section in Blackboard, enter a URL to the files on your website.

Your assignment should demonstrate:

• Revising Assignment 12 to include an order form.
• Constructing the form within a <form> element.
• Including the following types of <input> elements:
  • radio button
  • check boxes
  • text fields
  • a submit button
• Including a <selection> element within the form.
• Including a <textarea> element within the form.
• Aligning the fields in the form by using the table display layout format.
• Linking the main page to the order form.
• Validating your HTML and CSS files and correcting any errors.
• Uploading your files to your website.

Example assignment:

Chapter 14 example