MGA Logo

Web Development Tutorials



  
  

Form Design

Forms processing is a very important feature of PHP. It is through the use of forms that users interact with your Web pages and through which you can collect information for personalizing pages for your visitors. In a broader information processing sense, forms provide for data entry into your processing systems. They are the primary mechanism for capturing the data that your scripts process to generate information, to update files and databases, and to respond to user requests for information output.

As you proceed through this tutorial, you will learn about all aspects of forms processing. We will have chances to discuss and demonstrate all of the controls, or data entry mechanisms, that can be coded on forms. You probably have encountered most of these in your meanderings across the Web: text entry fields, clickable buttons, radio buttons, checkboxes, drop-down menus, and the like. We will cover all of these in the following lessons. For now, we will consider a couple of common controls - text entry boxes and forms submission buttons.

An Example Application

This first example of forms processing is a login application. It consists of two pages. The first page, named "login.php," contains a form for submitting an account and password. The visitor enters this information and clicks the "Submit" button to submit the form information for checking.

login.php 
Login Page

Account: 	
Password:

The second page is a site welcome page named "welcome.php". The form information is submitted to this page for account and password checking. If the correct account and password is submitted, then the page is viewable as in the following figure. If either the account or password is incorrect, the visitor is returned to the login.php page.

welcome.php 
Welcome Page

Hi John, Welcome back!

Form Controls

login.php 
<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
</head>
<body>
 <form name="login" action="welcome.php" method="post">
  <fieldset>
   <h3>Login Page</h3>
    <table>
     <tr>
      <td>Account: </td>
      <td><input type="text" name="account" value="John" size="10"></td>
     </tr>
     <tr>
      <td>Password: </td>
      <td><input type="password" name="password" size="10"></td>
     </tr>
     <tr>
      <td></td>
      <td><input type="submit" name="submitButton" value="Submit"></td>
     </tr>
    </table>
  </fieldset>
 </form>
</body>
</html>

HTML form controls are displayed on a web page by coding them within <form>...</form> tags. These tags surround the form controls; however, they do not need to enclose them "tightly." In other words, the <form> tags need not immediately precede the first control nor immediately follow the last control. If your page contains a single form, you can code the opening ")%>")%> tag right after the body> tag and code the closing </form> tag immediately before the closing </body> tag. Then, your controls can appear throughout the body of the document, intermixed with other HTML tags or text.

The <form> tag contains three important attributes for forms processing:

  • The name attribute. All forms should be named. Although this is not a requirement for the current exercise, it still is a good habit to follow. It will become necessary to name a form when you wish to perform browser-side validation of data, a topic we will consider throughout the remainder of this tutorial. Forms are named by coding name="formName" within the tag. You can assign any name you wish to the form. In this example name="logon" is used.
  • The action attribute. The action="url" attribute identifies the location and name of the page to which information from the form is sent for processing. If the page that will process the data is in the same directory as the page containing the form, then the URL in the action parameter is simply the name of that page. Otherwise, it can be a full URL specifying a web address on a different server or in a different directory on the same server. In this example, the account and password entered by the visitor is sent to the welcome.asp page in this same directory: action="welcome.php".
  • The method attribute. The method="GET|POST" attribute specifies the means used to send the form data to the page where they will be processed. There are two methods from which to choose.

GET|POST methods

The GET method is the older-style way of sending data. In this case, the data from the form are appended to the end of the URL for the page to which the data are being sent (the URL in the action attribute). The form data comprises a text string (called Query String) that is concatenated to the URL following a question mark (?). You probably have seen this happening in your browsing of the Web. This method is no longer preferred for submitting form data since there is a limit to the number of characters that can be sent and there is little privacy when the data from the form appear in the URL address box in the browser. We will have occasion to use this method later for other purposes.

The POST method gets around these two objections. It sends the form data to the action page as a separate data stream which does not appear in the browser address box; plus, you can transmit as many characters as are required to send your entire form for processing. Unless you have a good reason for not doing so, always use the POST method. In this example method="POST" is used.

Form Fields

Forms are composed of fields, or form controls, through which the user enters data, makes choices, and submits information. The manner in which the information is collected depends upon the type of form element coded within the top of form tags. Although we will have occasion to review all of the types of form elements throughout this tutorial, for present purposes we will consider only the three types needed for the logon application. This will give you a good understanding of the general method for processing forms without complicating the coding with a full range of form fields.

The account field. The example page requires a text box within which the user enters an account. This is a standard text box created using an <input type="text"> tag with an assigned name and size attribute. 

 <input type="text" name="account" size="10">

The password field. A password field appears as a standard text entry box; however, when characters are typed in the field, they are echoed as asterisks (*) or bullets to maintain privacy of the entered data. A password field is created using an <input type="password"> tag. The field needs to be assigned a name and its size can be changed from the default 20-character width.

   <input type="password" name="password" size="10">

In this example and for all forms that you create you must be sure to assign names to form fields. These names are needed for server processing. In addition, you can control the physical size of the fields by coding size attributes, and you can restrict the maximum number of characters permitted to be typed by coding the maxlength attribute.

The Submit button. A submit button, when clicked, triggers the action specified by the action parameter of the <form>tag to take place. In other words, clicking a submit button transmits the data from the form to the indicated page. A submit button is created by coding an <input type="submit"> tag. In addition, you need to name the button for script reference and assign a value that serves as the label appearing on the button.

   <input type="submit" name="submitButton" value="Submit">

Once the form page is created, it is ready to be activated. Recall that this form submits account and password information to the welcome.php page. There, these values are checked for authorization to view that page. If an incorrect account and/or password is submitted, the user is returned immediately to the login.php page without an opportunity to view the welcome.php page.


TOP | NEXT: Form Handling