Web Design I Web Enhancement XHTML/CSS Tutorial Nine Form Elements Introduction You have walked through what may seem to be a labyrinth of danger, but if you have succeeded your work has produced a professional quality Web site. You have only one task left to complete this exercise form elements. The sample form that you will write for this project will only offer an appearance of a form without the functionality necessary to make it useful. Making it function as a means of gathering information requires a server-side data store with a Common Gateway Interface (CGI) to make the Web page communicate with the data store. That technology is beyond the scope of this course. This lesson also will put some finishing touches on your work to bring it to completion. Tutorial topics This exercise will cover the following concepts: Form elements Response page Finishing touches Begin by opening the template_01.html file in your text editor. Save it as contact.html in the html folder. Correctly address the external CSS file so the page will have its design. Remove the <div class="footer"> at the bottom of the page. Change the headline color to #006600 (dark green) and change the text to "Contact Us." Add the following code immediately below the <h2> element: <p class="body">we would like to hear from you. Please fill in the following form and send us your comments.<br/> If you prefer, please <a href="mailto:bridges.west@email.net?subject=inquiry&body=this IS NOT A REAL EMAIL ADDRESS. DO NOT SEND MESSAGE." onclick="alert('this email address is for learning purposes only. It is not a real one.')">email Us</a>.</p> <td style="padding-left:132px;"> You may need an explanation of the <a href=""> code. This is a "mailto" link. It calls the browser's default email client application. If one is not specified on Prepared by Paul Roberts Copyright 2010 by Digital Communication Department. All Rights Reserved
Form elements the client's (user's) computer, this link will not work. Mailto links are unreliable for this reason. Let's analyze the link: mailto: Calls the email client bridges.west@email.net Represents any target email address? Initializes a set of name-value pairs subject=inquiry First name-value pair; "subject" refers to the Subject field in the email client; "Inquiry" is the default content of the field & Separates name-value pairs body=this IS NOT MESSAGE. Second name-value pair; "body" refers to the body (message) field; the rest is the default message. This method allows the user to send an email message to the address you specify in the code. The onclick property is a JavaScript event handler. The context of this code means that when the user performs a mouse click on the link, an alert box will pop up with the message that is contained in the parentheses. The alert() is called a method and the content within the parentheses is called the argument. After you type the code, save the file and try it in your browser. It should work like the contact page at this address: http://swc2.hccs.edu/proberts/html/tutorials/html/contact.html Of course, your page will not have the form element yet. However, the above page is what you are trying to accomplish. Now take a look at form elements. Understand that a <form> element serves as the container for a number of child elements. Those child elements must exist within the form element in order for the form to work. You will provide an action that will take the user to a response page. You must have the <form> element for that to work. An HTML form is a feature of a document containing normal content, as you have done thus far. The form contains special elements called controls (checkboxes, radio buttons, menus, text boxes, text areas, for instance), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, checking boxes), before submitting the form to an agent for processing such as a client-side script, an email server or a server-side data store. Here is a partial list of form controls, also known as input types with some explanation: Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 2
Check Boxes checkbox Used by a browser to display checkboxes. <input type="checkbox" name="fieldname" value="default data" Checked />Checkbox Label Value The default information that should be placed into the field. Checked (optional) Specifies that the checkbox is checked by default. Checkbox Label The label that the user sees in the browser. Pop-up Menu/Scrolling List select Used by a browser to display a scrolling list. <select size=rows name="fieldname"> <option value="default data" Selected>Visible Value</option> </select> Rows Number of rows to display in the scrolling list. Value The default information that should be placed into the field. Selected (optional) Specifies that the list item is selected by default. Visible Value The value that the user sees in the browser. Radio Buttons radio Used by a browser to display a radio buttons. <input type="radio" name="fieldname" value="default data" Checked />Radio Button Label Value The default information that should be placed into the field. Checked (optional) Specifies that the checkbox is checked by default. Radio Button Label The label that the user sees in the browser. Reset Button reset Used to reset all other HTML input types on the form to their default values. <input type="reset" value="button Text"> Value Button label text. Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 3
Submit Button submit Used by a browser to create a button that will perform an action. <input type="submit" name="action Tag" value="button Text"> Name Action to perform when the button is pressed. May not always be needed, depending on CGI technology. Value Button label text. Text text Used by a browser to display or collect a single line of text. <input type="text" name="fieldname" value="default data" size="60"> Value The default information that should be placed into the field. Size Specifies the width of the box in terms of characters. Text Area textarea Used by a browser to display multiple lines of text. <textarea name="fieldname" rows=rows cols=columns>default Data </textarea> Rows Number of rows of text to accommodate in the browser. Columns Number of characters to display per row. Default Data The default information that should be placed into the field. If you would like more information on form elements, refer to the W3C Web site, using the following address: http://www.w3.org/tr/rec-html40/interact/forms.html Before working on the form, add the style for the form to the external CSS file. Here is the style definition: p.form { padding-left: 12pt; padding-top: 6pt; font-weight: bold; text-align: right; color: darkgreen; } Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 4
Now let's put the form on the Contact Us page. Nest a table inside the form element. This will add order to the form. Add the code to your present file as indicated: <h2>headline</h2> <p>we would like to hear from you. Please fill in the following form and send us your comments.<br/> If you prefer, please <a href="mailto:bridges.west @email.net?subject=inquiry&body=this IS NOT A REAL EMAIL ADDRESS. DO NOT SEND MESSAGE." onclick="alert('this email address is for learning purposes only. It is not a real one.')">email Us</a>.</p> <form action="response.html"> <table style="width: 70%;" border="0" align="left"> <p class="form">first/last Name: </p> <input type="text" name="firstname" size="20" value=""/> <input type="text" name="lastname" size="20" value=""/> <p class="form">mailing Address: </p> <input type="text" name="address" size="45" value=""/> <p class="form">city/state/zip: </p> <input type="text" name="city" size="22" value=""/>, <input type="text" name="state" size="2" value=""/> <input type="text" name="zip" size="10" value=""/> <p class="form">email Address: </p> <input type="text" name="email" size="45" value=""/> Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 5
<p class="form">your Comments: </p> <textarea cols="45" rows="6"> </textarea> <input type="submit" value="send" /> <input type="reset" value="clear Form"/> </table> </form> </div> </body> </html> Response page Note that the action property in the <form> tag points to a file named response.html. The action tells the browser what to do once the submit button is activated. You need to write that page. Use the template as the basis. Here is the code for the page: <?xml version="1.0" encoding="iso-8859-1" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>bridges of the American West</title> <meta http-equiv="refresh" content="5; url=../index.html"/> <link rel="stylesheet" type="text/css" href="../css/bridges.css"/> <style type="text/css"> h2 { margin-top: 48pt; color: #060; } </style> </head> <body> <div class="base"> <table class="menu" border="0"> Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 6
<a href="#" class="menu">about Bridges</a> <a href="#" class="menu">western Bridges</a> <a href="#" class="menu">resources</a> <a href="html/site_map.html" class="menu">site Map</a> <a href="#" class="menu">contact Us</a> </table> <h2>thank you!</h2> <p style="padding-bottom: 390px;">We appreciate your comments and suggestions. We will use them to help us improve our site.</p> </div> </body> </html> Note that the <meta> element redirects this page back to the home page after three seconds. The only thing the form page accomplishes in this example is thanking the user for the information that goes no place. As explained earlier, you need a CGI and a server-side data store or a client-side script to create a cookie for the input information to be useful. As it is, the data is lost upon clicking Submit button. Now change the navigation bar to exclude the Contact Us page and include the Bridges Home page, as shown in the example. Finishing touches All you need to do to now is put a few finishing touches on the project. Most of this involves the use of named anchors. These function in a fashion similar to other links using the <a> element, except these point to a specific spot on the target page whether the target page is the current page or a different one. Here is how it works. You place an anchor (<a>) at the target location. Instead of using the href property, use the name property. The value can be anything you want. The code would look like this: <a name="anything"></a> From the link that is used to point to that place, the value of the href property begins with the pound sign (#) followed by the name of the target, without spaces if it is on the same page. This calls the named anchor. Here's an example: Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 7
<a href="#anything">link text</a> If the target is on a different page, point to the page first, then call the named anchor on that page. Here's an example: <a href="other_page.html#anything">link text</a> Your task is to go to each of the individual bridge files and tweak the code to include a target to a named anchor. You will need to include the named anchor on the target pages. Follow these steps, using your skills: 1. Open the About Bridges file and insert the following code as indicated: <p>here are a few bridges that represent the development of these engineering marvels across time.</p> <a name="table"></a> <table class="explore" border="0"> 2. Open the Western Bridges file and insert the following code as indicated: <p class="body">here are a few examples of the many bridges one might discover in the American West. Enjoy this brief tour and check out the Resources page for more information.</p> <a name="table"></a> <table class="explore" border="0"> 3. Go to each of the individual bridge files and call the named anchor in the appropriate link. If the bridge is listed on the About Bridges page, point to that page. If it is listed on the Western Bridges page, point to that one. In the case of the Alvord Lake Bridge, don t point to a named anchor only to the page. Here is an example of the Golden Gate Bridge, which is listed on the Western Bridges page. <table class="menu" border="0"> <a href="../index.html" class="menu">bridges Home</a> <a href="about.html" class="menu">about Bridges</a> <a href="western.html#table" class="menu">western Bridges</a> Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 8
<a href="resources.html" class="menu">resources</a> <a href="site_map.html" class="menu">site Map</a> </table> Look at the example site to ensure that your project works correctly. Part of this tweaking is making a link to the Alvord Lake Bridge from the body text of the About Bridges page. http://swc2.hccs.edu/proberts/html/tutorials/tut_09/ Assignment Congratulations Complete the tutorial exercise on your local computer. Upload the files in their appropriate folders to your FTP site then email the URL to the exercise's home page (index.html) to your instructor with the message that you have completed the work. Assuming that you have completed all lessons of this tutorial correctly, congratulations on your effort. You have begun a discipline in careful hand coding that many amateur and even some professional Web authors lack. Keep up the practice of these skills, and your abilities will combine with skills you will acquire in the future to turn you into a Web professional. Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 9