ASP Primer: Forming Up

By Joe Burns

Now it's about to get real fun. From here on you'll be learning about some of the best parts of ASP. We'll be learning about forms and emails this week then it's on to connecting to and manipulating data in a database which is the real power of ASP. But first, forms ...

Setting Up Your Forms

I'm sure that many of you reading this have already dealt with forms before. This section is intended as a refresher course to make sure we are all on the same page when we get into processing the forms in the next section.

If you are a forms master then, by all means, go ahead and skip on to the Request.Form: Getting the Info section. If you have never worked with forms before in your life then I would suggest reviewing the tutorial So, You Want a Form, Huh? before going on to the next section.

For everyone else, here we go ...

There are several different basic form elements. We are just going to run through them one by one. I'll give you the HTML to create them and then a brief explanation of the code. That should be enough to jog your memory. Keep in mind, though, this is just a basics refresher and there are more attributes to the form elements than we will cover here.

The Text Box ...

Here's the code:

<INPUT TYPE="text" NAME="T1" SIZE="20">

All of your form elements start with the word INPUT. This let's the browser know we are wanting a Text Box.

Second is the TYPE attribute. This defines the type of Text Box form element we are using which, in this case is "text" for plain text.

Next is the NAME attribute. This attribute gives each form element its own unique name. It is very important that each element have a unique name otherwise you won't be able to get the user's input back from the form. You will find this attribute a part of every form element.

Lastly, we get to the SIZE attribute. This simply defines the length of the Text Box.

The Password Text Box ...

Here's the code:

<INPUT TYPE="password" NAME="T1" SIZE="20">

You'll notice it's exactly the same as the Text Box above except TYPE is set to "password" instead of "text". Using "password" tells the browser to mask anything typed into the Text Box.

The Text Area ...

Here's the code:

<TEXTAREA ROWS="3" NAME="S1" COLS="20">

This is a Text Box on Steroids.</TEXTAREA>

Here is your beefed up Text Box also known as Text Area. This is ideal for occasions when you need a user to enter a lot of text. It has basically the same attributes as the Text Box but with some notable additions/changes.

First is the ROWS attribute. I'm sure you had figured out that this defines the number of lines displayed. You can type as much as you like, however, you will only see 3 lines of text at a time.

Second, you'll notice the COLS attribute. This is exactly the same as SIZE in the Text Box example above. Don't ask me why they chose to use two different names for essentially the same attribute.

Lastly, you'll notice this element is defined as TEXTAREA with a begin and end tag. Between the begin and end tag is where you can put any default value that you want to appear in the Text Area.

Drop Down Lists ...

Here is the code:

<select name="D1">
<option>Choice 1</option>
<option>Choice 2</option>
</select>

This is also known as the Drop Down Menu. This element is defined by SELECT.

You'll also notice there is an end SELECT tag as well. In between these two tags is where you will define the different options that are available within the Drop Down List. To define an option you use the OPTION tag. You can list as many options as you like, just be sure each option is defined with both and begin and end OPTION tag.

Lastly, don't forget to end your SELECT element with an end select tag, </SELECT>.

The Radio Button ...

     

Here is the code:

<INPUT TYPE="radio" VALUE="V1"

CHECKED NAME="R1">

You'll first notice that we are back to the INPUT element. In this case, our TYPE is "radio" to define the Radio Button.

The new attribute here is the VALUE. This defines the value of your radio button. Each Radio Button should have its own unique value (within the group name, that is) in order to process your form later.

Next you will see CHECKED. This tells the browser that this element is the default element. Use this on only one element in a group to define it as the default option. By default, one button must be selected. If you don't designate a default button, the browser will designate one for you.

And now we will revisit the NAME attribute. It serves a little bit different role with the radio buttons. In this case, the name should not necessarily be a unique value. For the purposes of a set of radio buttons, the NAME defines the group of buttons and the VALUE defines the value attached to each individual button. So, if you wanted the user to make a single choice from 3 different options you would give each Radio Button a unique VALUE but they would all have the same NAME.

The Check Box ...

     

Here's the code:

<INPUT TYPE="checkbox" NAME="C3"

VALUE="ON" CHECKED>

And yet another INPUT. This time the TYPE is "checkbox" which defines it as a Check Box. Unlike radio buttons, check boxes are not intended to be grouped. The idea behind the Check Box is that you should be able to select as many as you like. Therefore, the NAME should be a unique one.

Like the Radio Button, the Check Box does have a VALUE attribute. This can simply store a value that tells you it was checked (we used "ON" in the example above) or it could actually store a special value like an ID number.

Lastly, there is the CHECKED attribute. It marks any the Check Box as selected by default.

The Submit Button ...

Here's the code:

<INPUT TYPE="submit" VALUE="Submit" NAME="B1">

This time our TYPE is "submit". This defines the element as a submit button. This button will inherently trigger the form to process when pushed.

It also has a VALUE which serves a bit different purpose than on most other form elements. On a button, the value indicates what will appear on the button.




Page 1 of 4

 
1 2 3 4
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •