Home

Using a Form

 

Forms

 

Introduction

In previous lessons, we saw that you could use Response.Write() to display values in a web page. As opposed to simply presenting values, in some cases you may want to request values from the user. This is mostly done by displaying web controls to the user who can click them, type in them, or select values from them. When the user has finished preparing values, he or she can send the value back to you. You can then either store the values submitted by the user, or you can process them in a calculation or a similar operation.

 

Practical Learning: Introducing WEb Controls

  1. Start Microsoft Visual Studio 2005 if necessary and, to create a web site, on the main menu, click File -> New -> Web Site...
  2. Make sure ASP.NET Web Site is selected.
    Make sure the Language combo box is set to Visual C#.
    Click the combo box on the left side of Browse, press End, and press Delete a few times to delete the default name of the web site
  3. Change it to geometry3  
  4. Click OK
  5. In the Solution Explorer, right-click C:\...\geometry\ and click New Folder
  6. Type images as the name of the new folder and press Enter
  7. Copy each of the following pictures to your My Documents folder:
     
  8. On the main menu, click Web Site -> Add Existing Item...
  9. Locate the folder where you saved the pictures, select each and press Enter
  10. In the Solution Explorer, right-click Default.aspx and click Rename
  11. Change the name to index.aspx and press Enter
  12. To create a CSS file, on the main menu, click Web Site -> Add New Item...
  13. In the Templates list, click Style Sheet
  14. Set the name to geometry and press Enter
  15. Enter the following code in the file:
     
    body
    {
    	font-size: 11pt;
    	color: black;
    	font-family: Verdana, Tahoma, Arial, Sans-Serif;
    }
    
    hr { color: #0000ff }
    
    .maintitle
    {
    	color: blue;
    	font-family: 'Times New Roman' , Garamond, Georgia, Serif;
    	text-align: center;
    	font-size: 24pt;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    .parajust
    {
    	font-family: Verdana, Tahoma, Arial, Sans-Serif;
    	font-size: 10pt;
    	font-weight: normal;
    	text-align: justify;
    }
    
    .centeredtext
    {
    	font-family: Verdana, Tahoma, Arial, Sans-Serif;
    	font-size: 10pt;
    	font-weight: normal;
    	text-align: center;
    }
    
    .centered
    {
    	text-align: center;
    }
    
    .formula
    {
    	font-weight: bold;
    	font-size: 10pt;
    	color: blue;
    	font-family: Verdana, Helvetica, Tahoma, Sans-Serif;
    }
    
    a:link       {
      font-family: Verdana, Helvetica, Arial, Sans Serif;
      color: #0000FF;
      font-size: 10pt;
      font-weight: bold;
      text-decoration: none }
    
    a:alink {
      font-family: Verdana, Helvetica, Arial, Sans Serif;
      color: #FF00FF;
      font-size: 10pt;
      font-weight: bold;
      text-decoration: none }
    
    a:visited
    {
    	font-family: Verdana, Helvetica, Arial, Sans Serif;
    	color: Green;
    	font-size: 10pt;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    a:hover
    {
    	font-family: Verdana, Helvetica, Arial, Sans Serif;
    	color: #FF0000;
    	font-size: 10pt;
    	font-weight: Bold;
    	text-decoration: none;
    }
  16. To add a new web page, on the main menu, click Web Site -> Add New Item...
  17. Make sure Web Form is selected.
    Set the Name to rectangle and click Add
  18. Change the file as follows:
     
    <%@ Page Language="C#" 
             AutoEventWireup="true" 
             CodeFile="rectangle.aspx.cs" 
             Inherits="rectangle" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    
    <link rel="Stylesheet" type="text/css" href="geometry.css" />
    <title>Geometry: Rectangle</title>
    
    </head>
    <body>
    
        <form id="frmRectangle" runat="server">
        <div>
    <table border="0" style="width: 660px">
      <tr>
        <td style="width: 100%">
          <p class="maintitle">Geometry: Rectangle</p>
        </td>
      </tr>
    </table>
        
     &nbsp;
     
    <table border="0" width="660">
      <tr>
        <td>
          <p class="parajust">A rectangle is a geometric figure made 
          of 4 sides connected to produce four right angles. The 
          horizontal measurement of the rectangle, the base, is its 
          length. The vertical measurement of the figure is referred 
          to as its height. In geometry, a rectangle can be 
          represented as follows:</p>
            
          <p class="centered">
            <img src="images/rectangle1.gif" alt="Rectangle" />
          </p>        
    
          <p class="parajust">To process a rectangle, you usually 
          must provide, or must be given, the length and the height. 
          You can then calculate the perimeter and the area. To 
          assist you with these calculations, you can use some 
          pre-established formulas. Suppose the values are 
          represented as follows:</p>
        </td>
      </tr>
    </table>
        
    &nbsp;
            
    <table style="width: 660px">
      <tr>
        <td style="width: 660px">
          <strong>L: length</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>H: height</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>P: perimeter</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>A: area</strong>
        </td>
      </tr>
    </table>
                
    &nbsp;
    
    <table border="0" style="width: 660px">
      <tr>
        <td style="width: 100%">
          <p class="parajust">Based on these, the following 
          calculations can be made</p>
        </td>
      </tr>
      <tr>
        <td style="width: 100%">
          <p class="formula">P = (L + H) * 2</p>
        </td>
      </tr>
      <tr>
        <td style="width: 100%">
          <p class="formula">A = L * H</p>
        </td>
      </tr>
    </table>
    
    <hr />
            <table>
                <tr>
                    <td style="width: 100px">
                        <asp:Label ID="Label1"
    			 runat="server"
    			 Text="Length:"></asp:Label></td>
                    <td style="width: 121px">
                        <asp:TextBox ID="txtLength"
    				     runat="server">
    		    </asp:TextBox></td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <asp:Label ID="Label2"
    				   runat="server"
    				   Text="Height:">
    		    </asp:Label></td>
                    <td style="width: 121px">
                        <asp:TextBox ID="txtHeight"
    				     runat="server">
    		    </asp:TextBox></td>
                    <td style="width: 100px">
                        <asp:Button ID="btnCalculate"
    				    runat="server"
    				    Text="Calculate" /></td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <asp:Label ID="Label3"
    				  runat="server"
    				  Text="Perimeter:">
    		    </asp:Label></td>
                    <td style="width: 121px">
                        <asp:TextBox ID="txtPerimeter"
    				     runat="server">
    		    </asp:TextBox></td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <asp:Label ID="Label4"
    				   runat="server" Text="Area:">
    		   </asp:Label></td>
                    <td style="width: 121px">
                        <asp:TextBox ID="txtArea"
    				     runat="server">
    		    </asp:TextBox></td>
                    <td style="width: 100px">
                    </td>
                </tr>
            </table>
    
    <table border="0" width="660">
      <tr>
        <td colspan="2">
          <hr />
          
            &nbsp;</td>
      </tr>
      <tr>
        <td align="center" style="height: 18px">
          <a href="index.aspx">Home</a>
        </td>
        <td align="center" style="height: 18px">
          <p class="centered">Copyright  2007 NetConsulting, Inc.</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr />
        </td>
      </tr>
    </table>
        
        </div>
        </form>
    </body>
    </html>
  19. In the lower-left section of the window, click the Design button and, on the form, double-click the Calculate button
  20. To add a new web page, on the main menu, click Web Site -> Add New Item...
  21. Make sure Web Form is selected.
    Set the Name to square and click Add
  22. Change the file as follows:
     
    <%@ Page Language="C#"
             AutoEventWireup="true" 
             CodeFile="square.aspx.cs" 
             Inherits="square" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    
    <link rel="Stylesheet" type="text/css" href="geometry.css" />
    
    <title>Geometry: Square</title>
    </head>
    <body>
    
        <form id="frmSquare" runat="server">
        <div>
        
    <table border="0" style="width: 660px">
      <tr>
        <td style="width: 100%">
          <p class="maintitle">Geometry: Square</p>
        </td>
      </tr>
    </table>
    
    &nbsp;
    
    <table border="0" width="660">
      <tr>
        <td>
          <p class="parajust">A square is a type of 
          <a href="rectangle.aspx">rectangle</a> 
          for which all 4 sides are equal. This means that the horizontal 
          measurement, the base or length and the height are equal. The 
          length of each side is then called the side of the square. A 
          square can be represented as follows:</p>
                    
          <p class="centered"><img src="images/square1.gif" /></p>
                    
          <p class="parajust">To process a square, you must have the 
          measure of the side. This would allow you to calculate the 
          perimeter and the area. To do this, you can use simple 
          geometric formulas. Consider the following:</p>
          </td>
      </tr>
    </table>
    
    &nbsp;
    
    <table>
      <tr>
        <td style="width: 660px">
          <strong>S: side</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>P: perimeter</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>A: area</strong>
        </td>
      </tr>
    </table>
    
    &nbsp;
    
    <table border="0" style="width: 660px">
      <tr>
        <td style="width: 100%">
          <p class="parajust">To calculate the values of a square, you can 
          use the following formulas:</p></td>
      </tr>
      <tr>
        <td style="width: 100%">
          <p class="formula">P = S * 4</p>
        </td>
      </tr>
      <tr>
        <td style="width: 100%">
          <p class="formula">A = S * S</p>
        </td>
      </tr>
    </table><hr color="#0000ff" /><table>
                <tr>
                    <td style="width: 100px">
                        <asp:Label ID="Label1"
    			           runat="server"
    				   Text="Side:">
    		    </asp:Label></td>
                    <td style="width: 121px">
                        <asp:TextBox ID="txtSide" 
    				     runat="server">
    		    </asp:TextBox></td>
                    <td style="width: 100px">
                        <asp:Button ID="btnCalculate"
    				    runat="server" 
    				    Text="Calculate" /></td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <asp:Label ID="Label2"
    			  	   runat="server"
    				   Text="Perimeter">
    		    </asp:Label></td>
                    <td style="width: 121px">
                        <asp:TextBox ID="txtPerimeter"
    				     runat="server">
    		   </asp:TextBox></td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <asp:Label ID="Label3"
    				   runat="server"
    				   Text="Area:">
    		    </asp:Label></td>
                    <td style="width: 121px">
                        <asp:TextBox ID="txtArea"
    				     runat="server">
    		   </asp:TextBox></td>
                    <td style="width: 100px">
                    </td>
                </tr>
            </table>
    </div>
    </form>
    
    <table border="0" width="660">
      <tr>
        <td colspan="2">
          <hr color="#0000ff" />
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="index.aspx">
            <strong><span style="font-size: 10pt">Home</span></strong>
          </a>
        </td>
        <td align="center">
          <p class="centered">Copyright  2007 NetConsulting, Inc.</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr color="#0000ff" />
        </td>
      </tr>
    </table>
    
    </body>
    </html>
  23. In the lower-left section of the window, click the Design button and, on the form, double-click the Calculate button
  24. Save the files

A Review of Form Design

To create a web page that can present controls to the user, HTML provides the <form> tag. Based on this, to create a form, you start its section with <form> and closes it with <form>. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<style>

body {
    font-family: Verdana, Helvetica, Arial, 'Sans Serif';
    color: #000000;	
    font-size: 10pt;
    background-color: #FFFFFF }

hr { color=#000080 }

.toptitle {
  color: #000080;
  font-family: 'Times New Roman', Garamond, Georgia, Serif;
  text-align: center;
  font-size: 24pt;
  font-weight: bold;
  text-decoration: none }

.housetitle {
  color: #0000FF;
  font-family: Georgia, Times New Roman, Courier New;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none }

.copyright {
  font-family: Verdana, Tahoma, 'Sans Serif';
  color:       #0000FF;
  font-size:   10pt;
  text-align:  center }

</style>

<title>Grier Summer Camp</title>
</head>
<body>

<p class='toptitle'>Grier Summer Camp</p>

<p class='housetitle'>Registration</p>

<p>Please use this form to register.</p>

<form></form>

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%">
      <hr color="#FF0000">
    </td>
  </tr>
  <tr>
    <td width="100%" align="center"
	style="font-family: Verdana; font-size: 10pt">
		Copyright  2007 Grier Summer Camp
    </td>
  </tr>
</table>

</body>
</html>

Between the <form> and the </form> tags, you can create a form as necessary and as appealing as you want. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<style>

body {
    font-family: Verdana, Helvetica, Arial, 'Sans Serif';
    color: #000000;	
    font-size: 10pt;
    background-color: #FFFFFF }

hr { color=#000080 }

.toptitle {
  color: #000080;
  font-family: 'Times New Roman', Garamond, Georgia, Serif;
  text-align: center;
  font-size: 24pt;
  font-weight: bold;
  text-decoration: none }

.housetitle {
  color: #0000FF;
  font-family: Georgia, Times New Roman, Courier New;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none }

.names {
  font-family: Verdana;
  font-size: 10pt }

</style>

<title>Grier Summer Camp</title>
</head>
<body>

<p class='toptitle'>Grier Summer Camp</p>

<p class='housetitle'>Registration</p>

<p>Please use this form to register.</p>

<form>
  <table border="0" width="320">
    <tr>
      <td width="80" class="names">First Name:</td>
      <td><input type="text" name="txtFirstName" size="10"></td>
    </tr>
    <tr>
      <td width="80" class="names">Last Name:</td>
      <td><input type="text" name="txtLastName" size="10">
      </td>
    </tr>
    <tr>
      <td width="80" class="names">Full Name</td>
      <td><input type="text"
		 name="txtFullName"
		 size="21">
	  <input type="submit" value="Submit it">
      </td>
    </tr>
  </table>
</form>

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%">
      <hr color="#FF0000">
    </td>
  </tr>
  <tr>
    <td width="100%"
        align="center"
        style="font-family: Verdana; font-size: 10pt">
		Copyright  2007 Grier Summer Camp
    </td>
  </tr>
</table>

</body>
</html>

This would produce:

Notice that the form on this page is equipped with a button. This also indicates that the user is supposed to provide some information and click this button.

The Method Used to Send Data

 

Introduction

When the user clicks the final button (the button used to collect information from the form and send it), it is assumed that the information on the form is sent to you (actually to the server, but you are in charge of it). HTML allows you to specify how this information would be sent. To support this,  the <form> tag is equipped with an attribute called method. This attribute can be assigned one of two values: get or post.

Getting the Data

GET: If you assign it the get (or GET, this is not case-sensitive) value, the information that is being sent would display in the address bar, starting with a question mark. This would be done as:
<form method="get">
Here is an example:
 

 
If you use GET as the method to send data, the information being carried should not exceed 2048 characters (if we consider that each character uses a byte).

Practical Learning: Getting the Data

  1. Click the rectangle.aspx tab and click the Source button.
    Locate the <form> tag and add the method="get" attribute to it:
     
    <form id="frmRectangle" runat="server" method="get">
  2. Save the file

Posting the Data

POST: An alternative is to assign post (or POST) to the method attribute. In this case, the information is sent directly to the server through a protocol (in this case, HTTP) and would not appear in the address bar of the browser.
If you use POST as the method to send data, the information being carried can be as large as the user/visitor's computer memory (RAM) can afford.

Practical Learning: Modifying a Form's Code

  1. Click the square.aspx tab and click the Source button.
    Locate the < form> tag and add the method="post" attribute to it:
     
    <form id="frmSquare" runat="server" method="post">
  2. Save the file

Taking Action

Once the information from a form reaches the server, it must be processed. In other words, you must specify how this information would be dealt with. This is usually done by specifying the file that includes the code used to process the information that was sent. A regular file in this case would have the .aspx extension. In reality, this doesn't have to be a separate file: you can use the same web page that collects information from the user, include the code used to process that information, and let the page deal with its own code.

To specify the file used to process information from a form, the <form> tag is equipped with an attribute called action. You can assign the name of the file to this attribute, as a string. This can be done as follows:

<form action="FileName" method="post">

As mentioned already, the FileName factor can be the same name as the web page. Here is an example:

<html>
<head>
<title>ASP.NET Tutorials - Lesson 3: Simple Data Input/Output</title>
</head>
<body>

<h1>Lesson 3: Simple Data Input/Output</h1>
<p>The purpose of this lesson is to introduce various means of 
interacting with a visitor using either simple text or visual objects 
referred to as controls (or web controls, as opposed to Windows 
Controls).</p>

<form action="exercise3.aspx" method="post">
  <table border="0" width="320">
    <tr>
      <td width="80">First Name:</td>
      <td><input type="text" name="txtFirstName" size="10"></td>
    </tr>
    <tr>
      <td width="80">Last Name:</td>
      <td><input type="text" name="txtLastName" size="10">
        <input type="submit" value="Submit it">
      </td>
    </tr>
  </table>
</form>

</body>
</html>

Practical Learning: Taking Action on a Form

  1. Change the < form> tag of the square.aspx file as follows:
     
    <form id="frmSquare" runat="server" method="post" action="square.aspx">
  2. Click the rectangle.aspx tab to access its file
  3. Change the < form> tag as follows:
     
    <form id="frmRectangle" runat="server" method="get" action="rectangle.aspx">
  4. Save the files

Value Request

 

A Request From a Form

As mentioned already, after a user has finished preparing values in a form, he or she can send them to you. To allow you to get values from the user, the ASP.NET library is equipped with an object called Request (actually, this object is part of IIS' own library). When a form is created on a web page, that form becomes a property of the Request object.

The objects that are part of the form constitute a collection and each object of the form becomes a member of this collection. To access an object of this collection, you can use Request.Form() (this can be referred to as an indexed property because each object can be accessed using its index). For example, you can enter the name of a control between double-quotes in the parentheses of Request.Form(). If you use Request.Form() to access a control, the information should be collected using the POST value of the METHOD attribute of the form. Based on this, to access any control on the form, you would type:

Request.Form(Object).OptionalIndex.Count

The object you need to access can be enter as Object part. For example, you can enter the name of a form's control as "Object". This can be done as follows:

Request.Form("txtFirstName")

In future lessons, when we formally learn about arrays and collections, we will review what roles the OptionalIndex factor and the Count value play. For now, we will ignore them.

A String Request

Besides, or as opposed to, collecting values using the controls on a form, you can request a string. To support this, the Request object is equipped with QueryString, which also is a collection. This allows you to get values either from a control or directly from the address bar of the browser. Remember, we mentioned that the GET value of the METHOD attribute of a form caused its information to be displayed in the address bar of the browser when that information is being sent:

Notice that the section on the right side of the question mark includes parts using the formula Name=Value. This indicates that the section on the right side of the question mark is in fact a collection of strings. Each string in this collection can be produced to you by Request.QueryString.

The syntax of Request.QueryString is:

Request.QueryString(Variable).OptionalIndex.Count

The Variable parameter is the name of the string that you want to retrieve. It can be the name of a control passed as argument. Here is an example:

Request.QueryString("txtFirstName")

It can also be the name of a variable (we will study or review variables in the next lesson). In future lessons, when we formally learn about arrays and collections, we will review what roles the OptionalIndex factor and the Count value play.

This also means that, as opposed to the Request.Form collection that uses the POST value of the method attribute of a form, when using the Request.QueryString property, you should send values using GET.

 

Using Different Files

If you are creating a processing intensive web application, you may have to spread the work or form processing on different files. This would allow you to divide tasks among appropriate objects. One of the ways you can do this consists of calling one page from another. For example, when the user has finished filling out a form, you may not need to display the results right away. You may want to hold or store the values on the server. In some other cases, you may want one file to analyze or evaluate the values of a form and, if they are valid, you can call another page to display the result.

When introducing the <form> tag above, we saw that you could use its ACTION attribute to specify where the results of a form would go. If you want these results to be processed by a file other than the current one, you can use this attribute to provide the name of that other file.

 

Previous Copyright 2005-2007 FunctionX, Inc. Next