Home

Introduction to Web Forms

Fundamentals of Web Forms

Introduction

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> element. Here is an example that starts a form:

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

<!DOCTYPE html>

<html>
<head runat="server">
<title></title>
</head>
<body>

<form></form>

</body>
</html>

The form element is a container in which you can put any type of HTML element. Here is an example that contains a p and a div elements:

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

<!DOCTYPE html>

<html>
<head>
<title>Geometry: Square</title>
<style type="text/css">

#formulation
{
    margin: auto;
    width:  200pt;
}
#main-title
{
    font-size:   18pt;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", Times, serif;
}
</style>

</head>
<body>

<form>
  <div id="formulation">
    <p id="main-title">Geometry: Square</p>
  </div>
</form>

</body>
</html>

You can also include scripting code in a form element. Here is an example:

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

<!DOCTYPE html>

<html>
<head>
<title>Geometry: Square</title>
<style type="text/css">

#formulation
{
    margin: auto;
    width:  200pt;
}
#main-title
{
    font-size:   18pt;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", Times, serif;
}
</style>

</head>
<body>

<form>
  <div id="formulation">
    <p id="main-title">Geometry: Square</p>

    <% Response.Write("<p>A square is a flat geometric figure made of four equal sides and four right angles.</p>"); %>
  </div>
</form>

</body>
</html>

This would produce:

Fundamentals of Web Forms

Web Controls Fundamentals

A form can contain objects named web controls. To add a control, type its tag between the opening <form> and the closing </form> tags. If you are creating an ASP.NET Application, you should use ASP.NET Web controls. As opposed to classic HTML Web controls, ASP.NET Web controls use a special formula for their tags. They start with <asp: followed by the name of the control. The most regularly used controls are:

Common Name ASP.NET Control Name Description
Label asp:Label Displays text
HyperLink asp:HyperLink Displays a link to a webpage
Table asp:Table Allows creating an HTML table
Panel asp:Panel Acts as a container for other controls
Button asp:Button A command button used to perform an action
Image asp:Image Displays a picture in a webpage
Image Button asp:ImageButton Displays a picture as a button
Link Button asp:LinkButton Displays a link on a button
Menu asp:Menu Displays a JavaScript-like menu
Tree View asp:TreeView Displays a tree-like list
Text Box asp:TextBox Displays text or allows a visitor to type something
Range Validator asp:RangeValidator Checks to find out whether a value is within a certain range (between a maximum and a minimum)
Required Field Validator asp:RequiredFieldValidator Makes sure that a value is specified for a certain control
Check Box asp:CheckBox A small square that can be checked/unchecked
List of Check Box asp:CheckBox A group of check boxes
Radio Button asp:RadioButton A small rounded box that a visitor can click
List of Radio Button asp:RadioButtonList A container for radio buttons
Combo Box asp:DropDownList Holds a list of items in a down-pointing arrow control
List Box asp:ListBox Displays a list of items
Calendar asp:Calendar Displays a one-month calendar
Data Grid asp:DataGrid Displays a table or records
Data List asp:DataList Displays a table or records
XML asp:Xml Used to read and process an XML file
XML Data Source asp:XmlDataSource Used to create a connection to a XML-based files and process them
Login Page asp:ChangePassword Provides a webpage from where a visitor can log in
Password Changer asp:ChangePassword Provides a webpage from where a password can be changed
Password Recovery asp:PasswordRecovery Provides a webpage from where to request/process a password recovery
Mail Definition asp:MailDefinition Provides a webpage that makes it easy to compose and send an email
Hidden Object asp:HiddenField Control used to hold a value that doesn't need to be displayed
Sql Data Source asp:SqlDataSource Makes it easy to create a connection to a Microsoft SQL Server database and get some records
List View asp:ListView Data-based control that displays a list of columns and rows
Grid View asp:GridView Data-based control that displays records in a list
Form View asp:FormView Data-based control that displays records in a list

As it is normally done in webpages code, every tag must be closed. Based on this, a button would be created, or stared, as follows:

<asp:Button></asp:Button>

An alternative in closing a control tag is to end the start tag with a forward slash and omit the end tag. This can be done as follows:

<asp:Button />

Client and Server Processing

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

<asp:Button runat="server"></asp:Button>

This attribute and its value must be applied to every Web control, including the form. The attribute should also be added to various types of elements, including the head. Here are examples:

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
<style type="text/css">

#formulation
{
    margin: auto;
    width:  200pt;
}
#main-title
{
    font-size:   18pt;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", Times, serif;
}
</style>

</head>
<body>

<form runat="server">
<div id="frmSquare">
    <p id="main-title">Geometry: Square</p>

    <% Response.Write("<p>A square is a flat geometric figure made of four equal sides and four right angles.</p>"); %>

<asp:Button runat="server"></asp:Button>
  </div>
</form>

</body>
</html>

This would produce:

A Control for Input

The Method Used to Send Data

Introduction

When the user clicks a button used to collect information from a webpage, it is assumed that the information on the form is sent to the server. 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:

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
<style type="text/css">

#formulation
{
    margin: auto;
    width:  200pt;
}
#main-title
{
    font-size:   18pt;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", Times, serif;
}
</style>

</head>
<body>

<form class="codered">method="get" runat="server">
<div id="frmSquare">
    <p id="main-title">Geometry: Square</p>

    <% Response.Write("<p>A square is a flat geometric figure made of four equal sides and four right angles.</p>"); %>

<asp:Button runat="server"></asp:Button>
  </div>
</form>

</body>
</html>

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

Notice that, in the address bar, after the address of the web page, there is a question mark, followed by various words. 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" runat="server">

</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. 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. This can be the same file that contains the form or it can be a separate file.

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

<form method="post" action="index.aspx" runat="server">

</form>

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

Characteristics of Web Controls

The Identifier of a Control

To identify a control, every HTML element has an attribute named id to which you can assign a string. Here are examples:

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

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

</body>
</html>

This would produce:

The Identifier of a Control

Remember that, to close a control tag, you can end the start tag with a forward slash and omit the end tag. Here are examples:

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

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

</body>
</html>

The Text of a Control

The controls that display or sometimes request text have an attribute named Text. You can assign the desired value to this attribute. Here are examples:

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
</head>
<body>
<div align="center">
<h2>Geometry: Square</h2>

<form id="frmSquare" method="get"
    runat="server">
  <table>
    <tr>
      <td><asp:Label id="lblSide" Text="Side:" runat="server"></asp:Label></td>
      <td>
	<asp:TextBox Runat="server"
	             id="txtSide" Text="0.00"></asp:TextBox>
	<asp:Button Runat="server" id="btnCalculate"
                    Text="Calculate"></asp:Button></td>
    </tr>
    <tr>
      <td><asp:Label id="lblPerimeter" Text="Perimeter:"
                     runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtPerimeter" Text="0.00"></asp:TextBox></td>
    </tr>
    <tr>
      <td><asp:Label id="lblArea" Text="Area:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtArea" Text="0.00"></asp:TextBox></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

This would produce:

The Text of a Control

Web Controls and Cascading Style Sheet

Everything you know about Cascading Style Sheet (CSS) formatting can be applied to a web control. As you may know already, there are three main ways CSS is used in a web page. To apply it on a control, you can create a style attribute in the start tag of a control and assign the values to it. It can start as follows:

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
</head>
<body>
<div align="center">
<h2>Geometry: Square</h2>

<form id="frmSquare" method="get" runat="server">
  <table>
    <tr>
      <td><asp:Label id="lblSide"
                     style="color: #0000FF"
                     Text="Side:" runat="server"></asp:Label></td>
      <td>
	<asp:TextBox Runat="server" id="txtSide" Text="0.00"></asp:TextBox>
	<asp:Button Runat="server" id="btnCalculate"
                    Text="Calculate"></asp:Button></td>
    </tr>
    <tr>
      <td><asp:Label style="font-weight: bold; color: #FF0000;"
                     id="lblPerimeter"
                     Text="Perimeter:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server" id="txtPerimeter" Text="0.00"
                       style="font-style: italic; color: #800;">
                       </asp:TextBox></td>
    </tr>
    <tr>
      <td><asp:Label id="lblArea"
                     style="font-weight: bold; color: #FF0000;"
                     Text="Area:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtArea" Text="0.00"
                       style="font-style: italic; color: #800;">
          </asp:TextBox></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

This would produce:

The Style of a Control

This can be referred to as inline formatting because it affects only the tag in which the style is created. The second technique consists of creating the necessary styles in the <head> tag of the HTML file. The third technique used to integrate CSS in your web page consists of creating a separate CSS file and referencing it in your (HTML, ASP, or ASP.NET) web page.


Previous Copyright © 2008-2016, C# Key Next