Using a Form
|
Using a Form |
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. |
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.
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.
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:
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.
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>
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.
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 |
|
|
||
Practical
Learning: Introducing WEb Controls
