How To Write HTML Forms

A form is an area that contains various form elements to take user input for processing by a special program. There are various form elements as can be seen in the diagram below. The appearance of these form elements, however, may vary based on the browser you are using. This tutorial assumes you have at least a basic knowledge of HTML.

  1. First, you must indicate the beginning and end of form with the <form> and </form> tags. As I have already mentioned, when user input is submitted, it is processed by a special program. This special program is usually written in a Common Gateway Interface (CGI) language. You will need to obtain or write yourself a program commonly called formmail written in either PHP or PERL. An alternative is to use a service from FormMail that charges a nominal fee (less than $1 a month) for allowing you to use the one stored on its system. I highly recommend that you choose this option, as doing it yourself might be very difficult and time-consuming. Furthermore, some hosting companies do not allow you to use your own CGI programs for fear of security risks. If you are confident that you will be able to set it up yourself, the PERL program can be obtained at ScriptArchive. The instructions for configuring the script will be included in the readme. Once you have prepared a script for your use, you will need to link the form to it. This is done by using the "action" and "method" attributes. The value of the "action" attribute is the location and name of the script while the method is either "get" or "post." If you are using the PERL formmail, the HTML code will resemble the following <form method="POST" action="http://fp1.formmail.com/cgi-bin/fm192">.
  2. The most commonly used form element is the <input> tag. The type of input is specified in the value of the "type" attribute. With the input tag, you can easily create a button, checkbox, radio, reset or submit button, or textbox. Simply indicate the type of form element you want to create in the type attribute of input. For example, to create a text box like the one in the diagram, I would enter <input type="text" />. Three other attributes you will need to know are "value" "checked" and "name." The value of the value attribute varies by the type of input. For buttons and text inputs, the value you enter is what appears by default when a user sees your form. For checkboxes and radio buttons, the value is what it stands for when clicked. This is sent to the script that processes the form. For radio buttons and checkboxes, the checked element is used to indicate whether it should be checked by default. It has no value. The name attribute is required for input elements with the types button, checkbox, text, and radio. An example of a radio button with the attributes I have mentioned is ie: <input type="radio" checked

  Use the elements explained in this tutorial to create your own form.
A Sample Form--To see what this looks like, enter the following in your favorite editor and save it.   <form method="POST" action="http://fp1.formmail.com/cgi-bin/fm192"> Name: <input type="text" > E-Mail : <input type="text" > Yes! Please send me emails every week. <input type="checkbox" checked /> Questions/Comments: <textarea rows="5" cols="25">Enter text here.</textbox> Where did you hear about us? <select><option>Google</option><option>Yahoo</option><option>Other</option></select> <input type="submit" /><input type="reset" /> </form>

 

Share this article!

Follow us!

Find more helpful articles: