Home

Introduction to Web Forms and Web Controls

 

Web Forms

 

Introduction

When you open a browser and access a web site, you are presented with a web page. Most web pages are meant to only display text and graphics to a visitor. If you want to create an interactive web page that allows visitors to send values to you, you can add a form to it.

To support forms, HTML provides the <form> tag. To create a form, you start with the <form> start tag and close with the </form> end tag. Here is an example:

<%@ Page Language="VB" %>

<html>
<head>
<title>Exercise</title>
</head>
<body>

<form></form>

</body>
</html>

Between the <form> and the </form> tags, you can create a form as necessary and as appealing as you want.

If you are working in either Microsoft Visual Studio or Microsoft Visual Developer, when you start an application, by default, you get a web page that is equipped with a form.

Practical LearningPractical Learning: Introducing Web Design

  1. Start Microsoft Visual Web Developer 2008 Express Edition 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 Basic.
    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:\...\geometry2\ 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:
     
    Rectangle Square
  8. On the main menu, click Website -> 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 Website -> Add New Item...
  13. In the Templates list, click Style Sheet
  14. Set the name to geometry and click Add
  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 Website -> Add New Item...
  17. Click Web Form
  18. Set the Name to rectangle and click Add
  19. Change the file as follows:
     
    <%@ Page Language="VB" 
             AutoEventWireup="true" 
             CodeFile="rectangle.aspx.vb" 
             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"></td>
        <td style="width: 121px">&nbsp;</td>
        <td style="width: 100px"></td>
      </tr>
      <tr>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 121px">
                    </td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 121px">
                    </td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 121px">
                    </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  2009 C# Key</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr />
        </td>
      </tr>
    </table>
        
        </div>
        </form>
    </body>
    </html>
  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="VB"
             AutoEventWireup="true" 
             CodeFile="square.aspx.vb" 
             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">
                        </td>
                    <td style="width: 121px">
                        &nbsp;</td>
                    <td style="width: 100px">
                        </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        </td>
                    <td style="width: 121px">
                        </td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        </td>
                    <td style="width: 121px">
                        </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  2009 C# Key</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr color="#0000ff" />
        </td>
      </tr>
    </table>
    
    </body>
    </html>
    
  23. In the bottom section of the default page, click the Design button
 

 

 

Web Controls Fundamentals

 

Introduction

The form by itself means nothing. It is made useful by populating it with objects named web controls, or simply, controls. There are many of them, used for different reasons. Web design partly consists of deciding what web control(s) to add to a form. This is based on the job requirements.

You can programmatically add a control using code or visually add it using an application. To programmatically add a control, type its tag between the opening <form> and the closing </form> tags.

To visually add a control, you use the Toolbox.

Using the Toolbox

A web control is a graphical object that allows the user to interact with a web page. Because there are many controls for various purposes, their insertion to an application and their configuration are left to the computer programmer.

The Toolbox is the accessory that provides most of the controls used in an application. The regular controls recognized by HTML are listed in a section labeled HTML:

Toolbox

The controls used on an ASP.NET application are listed in a section labeled Standard:

Toolbox

By default, the Toolbox is positioned on the left side of the IDE. To change that position, you can drag its title bar away and dock it to another side of the IDE. The Toolbox also uses a default width to show the items on it. If the width is too small or too large for you, you can change it. To do this, position the mouse to its right border and drag left or right.

When Microsoft Visual Web Developer 2008 Express Edition is installed, it adds the buttons in a somewhat random order. In the beginning, this can make it difficult to find a particular control when you need it. If you find it more convenient, you can arrange the list of controls in any order of your choice. You have two main options:

  • To change the position of an item in the list, right-click it and click either Move Up or Move Down
  • You can arrange the items in alphabetic order. To do that, right-click anywhere in the HTML or Web Forms section and click Sort Items Alphabetically. Once you have rearranged items alphabetically, the Toolbox forgets the previous arrangement and you cannot restore it. You can then right-click the button of a control and click either Move Up or Move Down.

Visual Control Addition

In order to make a web control available to your visitors, you must add it to your web page. To add a control to your application:

  • You can drag it from the Toolbox and drop it in the desired area on the web form. Once added, the control is positioned where your mouse landed. In the same way, you can add other controls as you judge them necessary for your application. 
  • You can double-click it from the Toolbox and it would be added to the top-left section of the web form.

If you want to add a certain control many many times, before selecting it on the Toolbox, press and hold Ctrl. Then click it in the Toolbox. This permanently selects the control. Every time you draw on the form, the control would be added. Once you have added the desired number of this control, on the Toolbox, click the Pointer button to dismiss the control.

Practical LearningPractical Learning: Using the Toolbox

  1. Click the square.aspx tab to access its file and click the Design button
  2. Click the top-left empty cell of the table under the first blue line
     
    Web Form Design
  3. To use it, position the mouse on the Toolbox word and wait for the Toolbox to expand. Then click the Auto Hide button Auto Hide
  4. In the Toolbox, click the Standard button to display its controls.
    Double-click Label
  5. On the from, click the empty cell under the previously added Label
  6. To add another control, on the Toolbox, double-click Label
  7. Once again, on the from, click the empty cell under the secondly added Label
  8. On the Toolbox, double-click Label
  9. On the Toolbox, click and hold the mouse on TextBox
  10. Drag and drop it on the form in the top-center empty cell of table that contains the previously added labels
  11. From the Toolbox, drag a TextBox and drop it on the form in the middle-center empty cell of table that contains the previously added controls
  12. Once again, from the Toolbox, drag a TextBox and drop it on the form in the bottom-center empty cell of table that contains the previously added controls
  13. On the form, click the top-right empty cell of the table
  14. On the Toolbox, double-click the Button
     
    Web Form Design
  15. Save the file
  16. Click the rectangle.aspx tab to select it and click the Design button
  17. Click the top-left empty cell of the middle table
  18. In the Standard section of the Toolbox, double-click Label
  19. On the form, right-click the newly added label and click Copy
  20. Right-click each of the empty cells under it and click Paste each time
  21. From the Standard section of the Toolbox, drag the TextBox and drop it in the top-center empty cell of the table
  22. On the form, click the newly added TextBox and press Ctrl + C
  23. Click each of the empty cells under it and press Ctrl + V each time
  24. From the Standard section of the Toolbox, drag the Button and drop it in the second empty cell from right column of the table
     
    Web Form Design
  25. Save the file

Processing Web Controls

 

Introduction

You can create HTML, Active Server Pages, or ASP.NET applications. If you create an HTML-only application, you may not need web controls because HTML can only create them but cannot process them. To process web controls, you would need to include a script to your application. Even then, you must use a web server to handle the interaction with your visitors.

Using HTML/ASP Controls

If you create an Active Server Pages application and you add ASP pages to it, you can (should) use the controls of the HTML section of the Toolbox. The HTML controls are defined in the System.Web.UI.HtmlControls namespace of the System.Web.dll assembly. To programmatically add an HTML control, create its HTML tag in the <form></form> section. Here are examples:

<%@ Page Language="VB" %>
<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="100" class="names">First Name:</td>
      <td><input type="text" name="txtFirstName" size="10"></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><input type="text" name="txtLastName" size="10"></td>
    </tr>
    <tr>
      <td width="100" valign="top" 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  2009 Grier Summer Camp
    </td>
  </tr>
</table>

</body>
</html>

This would produce:

Introduction to Web Form Design

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.

Using ASP.NET Controls

If you create an ASP.NET Application, you can (should) use the controls in the Standard section of the Toolbox. The controls you will use in your ASP.NET applications are defined in the System.Web.UI.WebControls namespace of the System.Web.dll assembly.

To programmatically add a control, start a tag with

<asp:  

This is followed by the name of the object. For example, to create a button, you would start the tag with

<asp:Button>

Of course, the tag must be closed as it is traditionally done in HTML:

<asp:Button></asp:Button>.

Client and Server Processing

A control you add to your web page would be configured to help the user interact with your web site. For example, you may want a visitor to place an order on a web page, submit a credit card number, and get a receipt. To process this type of transaction, you would have to validate some values at various levels. Some processing can be done on the computer that the visitor is using. This computer is referred to as a client. Some other processing can/must be performed only after the user has submitted some values. This type of processing is done at the server.

After adding an ASP.NET control to a web page, you must specify where its value(s) would be processed. This is done by using the Runat attribute. It can have one of two values: client or server. Here is an example:

<asp:Button Runat="server"></asp: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 named method. This attribute can be assigned one of two values: get or post.

Getting the Data

In the <form> tag, you can add the method attribute and assign the get (or GET, this is not case-sensitive) value to it. Here is an example:

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

If you do this, the information that is being sent would display in the address bar, starting with a question mark. Here is an example:

Method = GET

Method = GET

Notice that, in the address bar, after the address of the web page, there is a question mark, followed by the name of each control and that name is assigned the value that was given.

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).

Posting the Data

An alternative is to assign post (or POST) to the method attribute. This would be done as follows:

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

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.

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 does not 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 method="post" action="index.aspx">
 <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><input type="text" name="txtFirstName" size="10"></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><input type="text" name="txtLastName" size="10"></td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><input type="text"
	         name="txtFullName"
                      size="21">
            <input type="submit" value="Submit it">
      </td>
    </tr>
  </table>
</form>

As with all HTML attributes, the position of ACTION is not important. That is, it can be positioned before or after another attribute. Here is an example:

<%@ Page Language="VB" %>
<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 action="index.aspx" method="post">
 <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><input type="text" name="txtFirstName" size="10"></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><input type="text" name="txtLastName" size="10"></td>
    </tr>
    <tr>
      <td width="100" valign="top" 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 © 2009 Grier Summer Camp
    </td>
  </tr>
</table>

</body>
</html>

Characteristics of Web Controls

 

The Identifier of a Control

When writing code for your web pages that contain web controls, you always need a way to identify each control so you can refer to it. To support this, in HTML, every tag used to create a control has an attribute named id. To identify a control, assign a string to this attribute. Here are examples:

<form>
  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><input id="txtFirstName"></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><input id="txtLastName"></td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><input id="txtFullName"></td>
    </tr>
  </table>
</form>

For an ASP.NET control, this can be done as follows:

<asp:Button id="button" Runat="server"></asp:Button>

If you add a control from the HTML or the Web Forms section of the Toolbox, it would automatically receive a default identifier. To change it, select the control on the form. In the Properties window, click (ID) and type the desired identifier.

Practical LearningPractical Learning: Identifying the Web Controls

  1. On the form of the rectangle.aspx file, click the TextBox in the top-center cell of the table
  2. In the Properties window, click (ID) and type txtLength
  3. On the form, click the second TextBox and, in the Properties window, change its (ID) to txtHeight
  4. On the form, click the third TextBox and, in the Properties window, change its (ID) to txtPerimeter
  5. On the form, click the fourth TextBox and, in the Properties window, change its (ID) to txtArea
  6. On the form, click the Button and, in the Properties window, change its (ID) to btnCalculate
  7. Click the square.aspx tab to access its code
  8. On the form, click the top TextBox and, in the Properties window, change its (ID) to txtSide
  9. On the form, click the second TextBox and, in the Properties window, change its (ID) to txtPerimeter
  10. On the form, click the second TextBox and, in the Properties window, change its (ID) to txtArea
  11. On the form, click the Button and, in the Properties window, change its (ID) to btnCalculate
  12. Save the files

The Text of a Control

Some controls are text-based. That is, they are meant to display or sometimes request text from the user. For such controls, this text is referred to as caption while it is simply called text for some others. This property is not available for all controls.

If a control displays text, then it has a Text property in the Properties window. After adding such a control to a form, its Text field may hold a string, such as its HTML name; that's the case for a Button. At design time, to change the text of the control, click its Text field in the Properties window and type the desired value. For most controls, there are no strict rules to follow for this text.

To specify the text of a control in your code, assign the desired string to the text attribute of the control's tag. Here are examples:

<form>
  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><input type="text" id="txtFirstName"></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><input type="text" id="txtLastName"></td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><input type="text" id="txtFullName"></td>
    </tr>
  </table>
</form>

For an ASP.NET control, this can be done as follows:

<asp:Button id="btnSend" text="Send Now" Runat="server"></asp:Button>

Practical LearningPractical Learning: Specifying the Captions of Web Controls

  1. On the form of the square.aspx file, click the Label in the top-left cell of the table
  2. In the Properties window, click Text and type Side:
  3. On the form, click the Button and, in the Properties window, change its Text to Calculate
  4. On the form, click the second label and, in the Properties window, change its Text to Perimeter:
  5. On the form, click the third Label and, in the Properties window, change its Text to Area:
  6. Click the rectangle.aspx tab to access its code
  7. On the form, click the top-left Label and, in the Properties window, change its Text to Length:
  8. On the form, click the second Label and, in the Properties window, change its Text to Height:
  9. On the form, click the Button and, in the Properties window, change its Text to Calculate
  10. On the form, click the third Label and, in the Properties window, change its Text to Perimeter:
  11. On the form, click the fourth Label and, in the Properties window, change its Text to Area:
  12. Save the files

Web Controls and Cascading Style Sheet

Everything you know about Cascading Style Sheet (CSS) formatting can be applied to web controls. In fact, ASP.NET heavily depends on it to control the positions of its web controls.

As seen in Lesson 4, there are three main ways CSS is used in a web page. To apply it on a control, you create a style attribute in the HTML tag and assign the necessary values to it. It would start as follows:

<asp:Button id="btnSend" text="Send Now" style="" Runat="server"></asp:Button>

This can be referred to as inline formatting because it affects only the tag in which the style is created. If you use this technique, each (HTML or ASP.NET) tag must have its own style.

What goes inside of the double-quotes of the style attribute depends on what formatting you want to apply. If you are manually creating your web page, you can then specify the necessary style. If you are using Microsoft Visual Web Developer 2008 Express Edition and creating a form, every time you add a web control to your form, the control automatically receives a style attribute with the primary values that the studio judged necessary. To change some of the styles of the control, after clicking it on the form, you can change their values in the Properties window. The Properties window doesn't display all possible styles that can be