Classic HTML forms consist of these three things: a form element, a number of input elements (for collecting data), and a submit button (which triggers the form to send).

The form element contains all the other elements and (when the submit button is clicked) tells the browser where to send all the data (called the “action”) and how to send it (called the “method”). Here’s a basic HTML form:

   Textbox:
   <input type="text" name="tbTextbox1" id="tbTextbox1"/>
   Submit

And on a webpage, the above HTML looks like this when it’s rendered by the browser:

With these classic html forms, when you click the submit button your browser gets the data from the form and sends it to the URL listed in that form element’s action attribute. Notice how the form element also has a method attribute? This tells the browser whether it should send the form using request headers (post) or as part of the URL (get). The web server then uses that data in some way (using a server-side technology like ASP.NET or PHP) and generates a webpage in response (usually based on whatever information it was sent).

While you could use classic form elements in your ASP.NET webpages (those are pages that end in .aspx), .NET comes with a handful of tools that can make creating and working with forms much quicker and more powerful than ever before.

Every webpage in .NET contains a single form element by default, so you can easily start adding form elements to any page. This form element can be found either in your individual aspx files (in .NET 3.5/VS2008) or your Site.master file (in .NET4/VS2010).

ASP.NET & Classic Forms Compared

A handy list of available .NET form elements is located under the Toolbox panel of your copy of Visual Studio/Visual Web Developer (usually found along the left side of the window). You can either drag-n-drop items from the Toolbox anywhere on the page, or simply double-click an item in the toolbox to insert it wherever your cursor was located in the editor window. Alternatively, you can simply type in the asp elements you need (once you start to have them memorized).

Below you will find comparisons between some classic HTML form elements and their ASP.NET counterparts:

<form method="get" action="" id="frmForm"></form>

<form runat="server" method="get" action="" id="frmForm"></form>

<input type="text" id="TextBox1" name="TextBox1"/>

<asp:TextBox ID="TextBox1" runat="server">

<input type="hidden" id="HiddenField1" name="HiddenField1">

<asp:HiddenField ID="HiddenField1" runat="server" />

<select id="DropDownList1" name="DropDownList1">
    <option value="1">Selection #1</option>
    <option value="2">Selection #2</option>
</select>

<asp:DropDownList ID="DropDownList1" runat="server">
     <asp:ListItem Value="1">Selection #1</asp:ListItem>
     <asp:ListItem Value="2">Selection #2</asp:ListItem>
</asp:DropDownList>

    <input type="radio" name="gender" value="1" /> Selection #1
    <input type="radio" name="gender" value="2" /> Selection #2

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
     <asp:ListItem Value="1">Selection #1</asp:ListItem>
     <asp:ListItem Value="2">Selection #2</asp:ListItem>
</asp:RadioButtonList>

    <button type="btnSubmit" name="submit">Submit</button>

    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

It’s important to note that all of these asp elements will actually render out to classic HTML. The reason these are different from standard HTML at all is so that the server (and the Visual Studio software) can be fully aware of them (since it is going to be sending the data to itself). This allows you to perform all sorts of neat actions on these elements from the code-behind class – so you can build programming that affects your form (such as changing CSS/styling of an element if it’s incorrect).

Unlike classic HTML, you also don’t need to specify any “name” attribute. You simply specify the “id” and .NET will handle the rest for you.

Finally, form elements in .NET must contain a “runat” attribute – this tells the server that this needs to be rendered out by the server before the finished HTML is sent to the user’s web browser. If this attribute is missing, it will assume that the element is plain X/HTML and it be sent to the browser as-is (which wouldn’t be much good to anyone since elements beginning with <asp: are not valid HTML).

GET vs POST

• The GET method is not a secure way to send data and can make for a very large querystring (see Amazon.com for an example), but also perma-linking possible. This is especially useful when you want your users to be able to bookmark or link page to a page after they’ve completed a form. It also allows you to send an email with a link to a dynamically generated results page. Most database-driven Content Management Systems (Wordpress, Drupal, etc) use this method for determining which webpages to display. Although beyond the scope of this series, URL rewriting can be used to make querystrings look more friendly and easy to remember (Hence, www.example.com?node=2346234723 can instead be made to look like www.example.com/archive/todayspost/).

• The POST method is more secure than GET since it passes the data to the webpage in the request headers, which are invisible to users without special tools. Using POST is especially handy when you don’t want users to be able to link back to or bookmark a results page.

Regardless of which method you choose and under what circumstances, getting the information using .NET is simple.

Requesting Data in .NET

We’ll cover this in more detail in the next tutorial, but getting a variable in .NET is actually simple. By default, a .NET form will send the form data to itself (this is called, not unusually, a postback) using the GET method (unless you’ve specified something different in your form element).

One really cool thing about .NET is that you can work with form elements in your code-behind class (aspx.cs file) simply by calling them by name. Let’s assume you have the following form code on your webpage (aspx.cs file):

<form id="form1" runat="server">
  <p>
    <label for="TextBox1">Email:</label>
    <asp:TextBox ID="tbEmail" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"/>
    <asp:Literal ID="litMessage" runat="server"></asp:Literal>
  </p>
</form>

And the following is your code-behind class (there’s no code to handle the form submission yet)…

public partial class _Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    //Stuff to do when the page first loads
  }
  protected void Button1_Click(object sender, EventArgs e)
  {
    //Stuff to do when the button is clicked (Page_Load() still happens first)
  }
}

Now if all you wanted to do was display the text entered into tbEmail on the page, you could add it to the asp:literal element we included called litMessage.

public partial class _Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    //Stuff to do when the page first loads
  }
  protected void Button1_Click(object sender, EventArgs e)
  {
    //Set litMessage's Text property to the same as tbEmail's Text property
    litMessage.Text = tbEmail.Text;
  }
}

It’s as simple as that. Because .NET remembers the name of your runat=”server” elements, you can simply access the elements by name. Keep in mind, however, that tbEmail only refers to the element itself – to get the text the user entered, you need to specify that you want the Text property. Also, you could just as easily assign tbEmail.Text to a string variable to manipulate however you see fit.