Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P38 potx

Workshop Workshop In this lesson, you learned about cascading style sheets, the wonderful supplement to HTML that makes formatting your pages less painful. Throughout the rest of this book, I'll be using cascading style sheets where appropriate, so please review this workshop material before continuing. Q&A Q My CSS isn't working like I'd expect. What should I do? A CSS probably doesn't seem that clear in the first place, and things can only get messier when you actually start applying styles to your pages. You should be sure to test your pages in every browser you can find, and don't be afraid to experiment. Just because something seems like it should work doesn't mean it will. The W3C also provides a CSS Validator ( http://jigsaw.w3.org/css-validator/) that you can use to make sure that your CSS syntax is correct. You should probably use it all the time, but even if you don't, it can still help out if you get stuck. Q Are there naming rules for classes and IDs? A Yes, there are. A name must start with a letter, and can contain only letters, numbers, or dashes (-). Some browsers may not enforce these rules, but to be safe, you should adhere to them. Q What are the relevant CSS standards? A There are two CSS recommendations from the W3C: CSS1 and CSS2. Most modern browsers support a large part of CSS1 and some of CSS2, specifically the sections on positioning elements that I discussed today. You can find out more at http://www.w3. org/Style/CSS/. If you're curious about how well your browser supports CSS or the effect that properties have in real browsers, you can check out the CSS test suites at http://www.w3.org/Style/CSS/Test/. Quiz 1. Why can't absolute units be used reliably in CSS? file:///G|/1/0672328860/ch09lev1sec11.html (1 von 3) [19.12.2006 13:49:14] Workshop 2. True or False: Including style sheets on your page requires features provided by a web server. 3. How do the absolute and relative positioning schemes differ? 4. Is the margin or padding of an element inside the border? 5. How do you lay out your page so that elements positioned statically appear above elements that are positioned absolutely? Quiz Answers 1. Absolute units have problems in CSS because there's no way to know exactly what sort of display medium the user has. An inch on one monitor may be completely different than an inch on another. 2. The answer is false; you can use the <link> tag to load external style sheets without involving the web server in any way. 3. The relative positioning scheme places elements relative to the previous element on the page, whereas the absolute positioning scheme places the element exactly where you tell it to on the page. 4. The padding of an element is inside the border of an element, and the margin is outside. 5. This is a trick question. You cannot put statically positioned elements above absolutely positioned elements. However, if you change the statically positioned elements so that they use the relative positioning scheme, you can alter their stacking layer using the z- index property. Exercises file:///G|/1/0672328860/ch09lev1sec11.html (2 von 3) [19.12.2006 13:49:14] Workshop 1. If you've already created some web pages, go back and try to figure out how you could apply CSS to them. 2. Take a look at some of your favorite websites and think about how the webmasters could achieve the effects on their sites using CSS. 3. Adapt today's sample page so that it has three columns of content instead of two. file:///G|/1/0672328860/ch09lev1sec11.html (3 von 3) [19.12.2006 13:49:14] Lesson 10. Designing Forms Lesson 10. Designing Forms Up to this point, you've learned almost everything you need to know to create functional, attractive, and somewhat interactive web pages. If you think about it, however, the pages you've created thus far have a one-way information flow. Your HTML documents, images, sounds, and video have been traveling to web browsers with no return ticket. Today's lesson is about creating HTML forms to collect information from people visiting your website. Forms enable you to gather just about any kind of information for immediate processing by a server- side script or for later analysis using other applications. If you've spent much time browsing the Web, you've undoubtedly run across forms of various flavors. Many forms exist: simple forms that perform searches, forms that log you in to websites, forms that enable you to order products online, online polls, and so on. They all share one thing in common: accepting input from a web page visitor. If you're one to worry about compatibility, you can set your mind at ease. HTML forms have been around since the beginning of the HTML language and are supported by every web browser in common use. I'll make sure to point out any possible compatibility problems along the way. In this Lesson Don't be intimidated by forms! Although they might look complex, they're actually very easy to code. The hardest part is formatting them. Today's lesson covers the following topics, which enable you to create any type of form possible with HTML: ● Discovering how HTML forms interact with server-side scripts to provide interactivity ● Creating simple forms to get the hang of it ● Learning all the types of form controls you can use to create radio buttons, check boxes, and more ● Using more advanced form controls to amaze your friends and co-workers ● Planning forms so that your data matches any server-side scripts you use file:///G|/1/0672328860/ch10.html [19.12.2006 13:49:14] Understanding Form and Function Understanding Form and Function Right off the bat, you need to understand a few things about forms. First, a form is part of a web page that you create using HTML elements. Each form contains a form element that has special controls, such as buttons, text fields, check boxes, Submit buttons, and menus. These controls make up the user interface for the form (that is, the pieces of the form users see on the web page). When people fill out forms, they're interacting with the controls of the forms. In addition, you can use many other HTML elements within forms to create labels, provide additional information, add structure, and so on. These elements aren't part of the form itself, but they can enhance your form's look and improve its usability. When someone fills out an HTML form, he enters information or makes choices using the form controls. When the user submits the form, the browser collects all the data from the form and sends it to the URL specified as the form's action. It's up to the program residing at that URL to process the form input and create a response for the user. It's very important that you understand the implications of this final step. The data is what you want, after all! This is the reason you've chosen to create a form in the first place. After a user clicks the Submit button, the process ceases to be one of pure HTML and becomes reliant on applications that reside on the web server. In other words, for your form to work, you must already have a program on the server that will store or manipulate the data in some manner. There are some cases in which forms aren't necessarily submitted to programs. Using JavaScript and dynamic HTML, you can take action based on form input. For example, you can open a new window when a user clicks on a form button. You can also submit forms via email, which is okay for testing, but isn't reliable enough for real applications. Task: Exercise 10.1. Creating a Simple Form That Accepts a Name and a Password Okay, let's get right to it and create a simple form that illustrates the concepts just presented. It's a web page that prompts the user to enter a name and a password to continue. Start by opening your favorite HTML editor and creating a web page template. Enter the standard HTML header information, include the body element, and then close the body and html elements to form a template from which to work. If you already have a template similar to this, just load it into your HTML editor: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Page Title</title> </head> <body> </body> </html> file:///G|/1/0672328860/ch10lev1sec1.html (1 von 6) [19.12.2006 13:49:15] Understanding Form and Function Note I tend to use Transitional HTML and note it in the <!doctype> declaration. This gives me the flexibility of adding deprecated HTML elements if I choose, without worrying about validation errors. Next, add your title so that people will understand the purpose of the web page: <title>Please Log In</title> Within the body of the web page, add a form element. I've added both the opening and closing tags, with an empty line between them, so that I don't forget to close the form when I'm finished: <form action="http://www.example.com/cgi-bin/entrance.cgi" method="post"> </form> Before continuing, you need to know more about the form element and the attributes you see within the opening tag. Obviously, form begins the element and indicates that you're creating an HTML form. The action attribute specifies the URL to the server-side script (including the filename) that will process the form when it's submitted. It's very important that the script with the name you've entered is present on your web server at the location the URL specifies. In this example, I use the full URL for the script, but you can just as easily use a relative URL if it makes more sense. Note Prior to going live with forms, you should contact your web hosting provider and ask whether you can use the ISP's scripts or add your own. You must also determine the URL that points to the directory on the server that contains the scripts. Some ISPs rigidly control scripts for security purposes and won't allow you to create or add scripts to the server. If that's the case, and you really need to implement forms on your web pages, you should consider searching for a new ISP. The next attribute is method, which can accept one of two possible values: post or get. These values define how form data is submitted to your web server. The post method includes the form data in the body of the form and sends it to the web server. The get method appends the data to the URL specified in the action attribute and most often is used in searches. I chose the post method here because I don't want to send the user's password back in plain sight as part of the URL. Now add some form controls and information to make it easy for a visitor to understand how to fill out the form. Within the form element, begin by adding a helpful description of the data to be entered by the user, and then add a text form control. This prompts the user to enter her name in a text-entry field. Don't worry about positioning just yet because you'll put all the form controls into a file:///G|/1/0672328860/ch10lev1sec1.html (2 von 6) [19.12.2006 13:49:15] Understanding Form and Function table later: <form action="http://www.example.com/cgi-bin/entrance.cgi" method=post> Username: <input type="text" name="username" /> </form> Next, add another bit of helpful text and a password control: <form action="http://www.example.com/cgi-bin/entrance.cgi" method="post"> Username: <input type="text" name="username" /> Password: <input type="password" name="password" /> </form> Notice that both these form controls are created using the input element. The type attribute defines which type of control will be created. In this case, you have a text control and a password control. Each type of control has a distinct appearance, accepts a different type of user input, and is suitable for different purposes. Each control is also assigned a name that distinguishes it and its data from the other form controls. Finally, add a Submit button so that the user can send the information she entered into the form. Here's the form so far: Input <form action="http://www.example.com/cgi-bin/entrance.cgi" method="post"> Username: <input type="text" name="username" /><br /> Password: <input type="password" name="password" /><br /> <input type="submit" value="Log In" /> </form> The Submit button is another type of input field. The value attribute is used as the label for the Submit button. If you leave it out, the default label will be displayed by the browser. Tip When you're naming form controls and labeling buttons, you should strive for clarity and meaning. If a form is frustrating or hard to figure out, visitors will leave your site for greener pastures! Figure 10.1 contains a screenshot of the form with all the form elements in place. Output Figure 10.1. The form with all the input elements in place. file:///G|/1/0672328860/ch10lev1sec1.html (3 von 6) [19.12.2006 13:49:15] Understanding Form and Function At this point, you've created the form and it's ready to rumble. However, if you load it into your web browser, you'll see that it doesn't look all that appealing. Placing the form controls in the table should clean things up a bit. You can put the <table> tags inside your form. The table should be two columns wide, with the labels in the left column and the input fields in the right column. The Submit button will be in the left column on the third row. Here's the code: form action="http://www.example.com/cgi-bin/entrance.cgi" method="post"> <table border="0"> <tr> <td align="right">Username:</td> <td><input type="text" name="username" /></td> </tr> <tr> <td align="right">Password:</td> <td><input type="password" name="password" /></td> </tr> <tr> <td align="center"> <input type="submit" value="Log In" style="margin-top: 20px"/> </td> <td><br /></td> </tr> </table> </form> Notice that we added 20 pixels of white space above the Submit button using the margin- top property in the style attribute of the <input> tag. We also aligned the two labels to the right and the button to the center, just to spiff things up a bit more. A few final notes are warranted: First, we used the margin property to center the table. Second, we included an <h1> element on the page to give the user some idea what to do. Here's the full code for the page: Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> file:///G|/1/0672328860/ch10lev1sec1.html (4 von 6) [19.12.2006 13:49:15] Understanding Form and Function <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Please Log In</title> </head> <body> <h1 style="text-align: center">Please Log In</h1> <form action="http://www.example.com/cgi-bin/entrance.cgi" method="get"> <table border="0" style="margin: auto"> <tr> <td align="right">Username:</td> <td><input type="text" name="username" /></td> </tr> <tr> <td align="right">Password:</td> <td><input type="password" name="password" /></td> </tr> <tr> <td align="center"> <input type="submi" value="Log In" style="margin-top: 20px" /> </td> <td><br /></td> </tr> </table> </form> </body> </html> That took a little work, but I think the final page shown in Figure 10.2 looks good. Output Figure 10.2. A simple form. file:///G|/1/0672328860/ch10lev1sec1.html (5 von 6) [19.12.2006 13:49:15] Understanding Form and Function To complete the exercise, let's test the form to see whether the form produces the data we expect. Here's what the data that's sent to the server looks like: username=someone&password=somepassword It's pretty measly, but you can see that the names assigned to each field are tied to the values entered in those fields. You can then use a program to use this data to process the user's request. file:///G|/1/0672328860/ch10lev1sec1.html (6 von 6) [19.12.2006 13:49:15] . attractive, and somewhat interactive web pages. If you think about it, however, the pages you've created thus far have a one- way information flow. Your HTML documents, images, sounds, and. testing, but isn't reliable enough for real applications. Task: Exercise 10.1. Creating a Simple Form That Accepts a Name and a Password Okay, let's get right to it and create a simple. They all share one thing in common: accepting input from a web page visitor. If you're one to worry about compatibility, you can set your mind at ease. HTML forms have been around since