The HTML tag tells the web browser that this is a web page.
The HEAD tag tells the browser where the header starts. Information in this area will not be shown on the page, but will be used to do things like add the title at the top, provide help for search engines, show who wrote the page, link to style sheets, etc.
The TITLE tag lets the browser know that you are starting the title. Everything between here and the /TITLE tag will be used for the page title. Most browsers will show this in the title bar, plus they will use it as the name of a bookmark.
The /TITLE tag lets the browser know that you are done with the title. See TITLE for more information.
The /HEAD tag tells the browser that you are done with the header. See HEAD for more information.
The BODY tag tells the browser that this is were the contents of the page starts. Things below this make up the visible page.
The H1 tag tells the browser that the following text should be considered the main heading of the page. Most browsers will make this larger, and possible bold compared to the normal text.
The /H1 tag indicates the end of the main heading. For more information, see H1.
The P tag shows the start of a paragraph. Most browsers will insert a blank line before text marked by a P tag.
The /P tag shows the end of the paragraph. This tag is optional, but should be used to make the source easier to read. See the P tag for more information.
The Form tag shows the start of the form. It also shows what should be done with the form once it has been filled in. For now, don't worry about what the method means, just always set it equal to "post" as you see here. The action however is very important. It should always start with /cgi-bin/doform/ but after that you need to put the path to the configuration file. For instance, the configuration file for this form is at www.jmu.edu/computing/tutorials/doform.cfg so you would add everything after the first slash to the path we have so far, giving you what you see here. This is the most complicated part of the whole process, but once you figure it out, it isn't hard.
The BR tag does the same thing for a web page that hitting enter does for a word processor. If you know that you need to start the following text on a new line, just add a BR tag.
The INPUT tag is used to gather information. Becuase the 'type' is set for "text", the tag will create a box that a user can enter a value into. The 'size' property lets the browser know how big the box should be. The 'maxlength' property lets the form know what the longest entry possible is. This is usefull to keep someone from accidentally putting thousands of letters into a box where you only want a four digit phone number. The most important property is the 'name' of the INPUT. You will be refering to this name in the configuration file, so make it something that is easy to remember and makes sense. For instance, here I used 'name' for the name blank, 'dept' for the department blank, and 'email' for the users email address.
The SELECT tag is used to create a drop down list for people to chose from. It is used in conjunction with the OPTION tags below. Its 'name' property is how you will refer to it in the configuration file, so use something that makes sense, and is easy to remember. For instance, here I used "reason" because the list is asking why people are interested in DoForm.
The OPTION tag is used to indicate the start of one of the options for the SELECT drop down list. If you add the property 'selected' then it will be the default choice displayed in the list. It does not need a name property as that is set in the SELECT TAG. It does however have a 'value' property which is used if the person filling out the form picks the option framed by this OPTION tag.
The /OPTION tag is used to indicate the end of the option. For more information please see the OPTION tag.
The /SELECT tag indicates the end of the drop down list. For more information please see the SELECT tag.
This INPUT tag uses the type of "checkbox", so rather then create a box for the user to type in it simply creates a box that the user can check. It still has a 'name' property that will be used in the configuration file, and the value is what it will be set to if the person checks the box.
These two INPUT tags create a "Submit" and a "Reset" button. The do just what their name implies. There really isn't any configuration involved with them, they should simply be used as you see here.
The /FORM tag shows the end of the form. Anything following this is not considered part of the form. For more information see the FORM tag.
The /BODY tag shows that you are done with the body of the page. For more information, see the BODY tag.
The /HTML tag tells the browser that this is the end of the page. For more information, see the HTML tag.
<HTML>
<HEAD>
<TITLE>Example DoForm Page</TITLE>
</HEAD>
<BODY>
<H1>Welcome to the DoForm Sample Page</H1>
<P>Please give us the following information so that we can show you what DoForm does</P>
<FORM action="/cgi-bin/doform/doform.cfg" method="post">
Name: <INPUT type="text" name="name" size="40" maxlength="255"><BR>
Department: <INPUT type="text" name="dept" size="65" maxlength="255"><BR>
Email Address: <INPUT type="text" name="email" size="24" maxlength="255"><BR>
Reason for your interest: <SELECT name="reason">
<OPTION value="project" selected>I have a project that I am working on.</OPTION>
<OPTION value="learn">I just like to learn things.</OPTION>
<OPTION value="job">I want to get a job with IT.</OPTION>
</SELECT><BR>
Please check here if you have tried to use DoForm before <INPUT TYPE="checkbox" NAME="tried" VALUE="tried"><BR>
<INPUT TYPE="submit" NAME="Submit" VALUE="Submit">
<INPUT TYPE="reset" NAME="reset" VALUE="Reset"><BR>
</FORM>
</BODY>
</HTML>