| 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>
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 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. 
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"> <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. 
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. | 