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>


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.


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:


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


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.


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:


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


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:


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.

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net