HTML Forms Tutorial - ASP Web Pro
  Active Server Pages Programming by ASP Web Pro

HTML Tutorials

FORMS

Forms are one of the most important tools on a web site because they allow your web users to communicate easily with you. It is also a valuable way for you to obtain information from your web users.

Here is the code for a simple form:

<HTML><HEAD>
<TITLE>ASP Web Pro</TITLE>
</HEAD>
<BODY>

<FORM NAME="YourFormName" METHOD="post" ACTION="confirmationpage.asp">
<TABLE>
<TR><TD>Email: </TD>
<TD><INPUT TYPE="text" NAME="Email" SIZE="50"></TD></TR>
<TR><TD>Namel: </TD>
<TD><INPUT TYPE="text" NAME="Name" SIZE="50"></TD></TR>
</TABLE>

<INPUT TYPE="submit" NAME="Submit" VALUE="Submit Form">

</BODY>
</HTML>

This form would display like this:

Email:
Name:

The <FORM> tags work just like any other HTML tag. Anytime you open a form with <FORM> you must close it with a </FORM>. Notice that <FORM> tag has its own attributes. The NAME attribute is used to assign a name to the form. The METHOD attribute is how the form data will be sent. There are only two types of Methods available, POST or GET. Unless you are a more advanced HTML'er, stick with the POST method. This is what the large majority of web forms use. The ACTION attirbute tells the form which page to go to next after the form is submitted.

Each form field begins with INPUT TYPE which specifies what type of field it is. In this case "text" means it is a basic text field that can hold any kind of data. Notice that each form field also has its own NAME attribute to make each field unique. The SIZE attribute is optional for form field. This specifies the number of characters that can fit in a form field before it begins scrolling over and hiding characters. Finally, the submit button is represented by INPUT TYPE="submit". HTML always recognizes this as a standard submit button. The submit button also has a NAME attribute and has an additional VALUE attribute, which declares what value to display on the submit button.

Ok, you understand how to put together a simple form. Now, you want to add some advanced form elements to it. Like just about everything else in web development, you can customize your forms just about anyway you want. Here are some examples of advanced form elements:

To insert a dropdown list field, you could add this code to your form:
<SELECT NAME="Subject">
<OPTION SELECTED>List Item 1</OPTION>
<OPTION>List Item 2</OPTION>
<OPTION>List Item 3</OPTION>
</SELECT>
 

 

To insert a multi-line memo field, you could add this code to your form:
<TEXTAREA COLS="30" NAME = "Comments">
</TEXTAREA>
 

 

 
<INPUT TYPE="radio" NAME="Button1" VALUE="radiobutton" CHECKED >
<INPUT TYPE="radio" NAME="Button2" VALUE="radiobutton">
 

There you have it. Now, you are ready to start building and customizing your very own tables!

< Back to Tutorials

 

 

Main Menu
Home
ASP Scripts
ASP Tutorials
JavaScripts
Awards
Contact Us

Email This Page

Other Resources
ASP Web Hosting
Search Engine Submission
Programming Help

 

 

 

Other ASP Web Sites

Site Map

 

Last Updated:
28 August 2008

 

© 1997-2008 ASP Web Pro, Inc. | Terms of Use