Top Nav

Your how-to site for community journalism

Creating Forms Module: The <form> Tag

Suppose we want to create a basic login form:

Login:          
Password:

We’ll need three parts to this form:

  • A text box for users to enter their login name
  • Another text box for their password
  • A “submit” button to send their information off for processing.

To create this form, we’ll start with the <form> and </form> tags. Together, they create a container that marks the beginning and end of the form. All the elements of the form will appear between these two tags.

<form>
</form>

The form tags, by themselves, have no visible effect on a Web page except for a blank line they create above and below the form. Because a form is invisible on a Web page, it’s easy to forget to add the closing </form> tag, or to put multiple sets of <form> and </form> tags where you really only need one. Check for these errors first if you’re ever having trouble with a form you’ve created.

Now, the <form> tag needs several attributes. Let’s go through them:

  • Action: This attribute answers the question, “Where am I going to send this form’s information to be processed?” It lists the Web address of the script or program that will receive and process the information the form collects (the second “runner” in the “relay race.”)For this example, let’s suppose we have a short program, contained in a file named “login.php,” that will check a user’s login name and password against a database of existing user information. It’s sitting in the “scripts” directory on our Web server. In this case, our action attribute would be:action=”http://mysite.com/scripts/login.php”
  • Method: This attribute answers the question, “How will this form’s information be processed?” There are two types of methods: get and post. The get method is faster, and often used for short forms containing information that can be shared and reproduced, like the results of a search. The post method is slower, more secure, and is used for tasks that happen once or contain a lot of information, like submitting a comment or a login name.

Using get is the equivalent of scribbling a quick note on a scrap of paper and handing it off to a friend. Using post is like sitting down to write that friend a formal letter, sealing it in an envelope, and dropping it in the mail. If you’re not sure which method you should be using, you may want to [hire a programmer] to write your forms for you.

Since our form is a login form, we’ll want to keep the information secure and use post as our method. The HTML code for our form thus far should look like this:

<form action="http://mysite.com/scripts/login.php" method="post">
</form>

 

Powered by WordPress. Designed by Woo Themes