Back Next

ASP Web Programming Course

Lesson 4

Course support : You can ask your course questions in Learnem support forums .

Please support us by visiting our support forums and asking your questions and answering questions of others.

4-1 Other types of form fields, Password type
In previous lesson we saw how we can create a simple form and send its data to an ASP script on server. We also saw how we can retrieve submitted data at server side and use it in our program.

In this lesson we will use different kinds of input fields in our programs.

Example 4-1:


login.html :

 <html>
<head>
<title>Login Page</title>
</head>
<body>
<form action="login.asp" method="post">
User Name: <input type="text" name="username"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Enter">
</form>
</body>
</html>

login.asp :


 <%
username=Request.Form("username")
pass=Request.Form("pass")
%>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
Dear <%=username%>, Welcome to Board<br>
Your password is <%=pass%>
</body>
</html>
Output results:


 Dear test, Welcome to Board
Your password is t12ju

In above example we have used a special type of input field called a password input box. This is a special type of text box. When you type something it will show asterisks instead of letters. Also if user presses back button after submission of a form password field is guaranteed to be cleared while other fields may preserve their data. This has been done for better security for passwords.

4-2 Text Areas
Sometimes you will want to send a multilane text. In these cases we will use a text area.

The following line shows a sample of <textarea></textarea> tags.

 <textarea rows="5" name="comment" cols="26"></textarea>
This one is a little different from other types of form input fields. You can also determine how many columns and rows our text area has.

See example 4-2 .


Example 4-2:


comment.html

 <html>
<head>
<title>Comment Page</title>
</head>
<body>
<form action="comment.asp" method="post">
User Name: <input type="text" name="username"><br>
Email: <input type="text" name="email"><br>
Comment: <br>
<textarea rows="5" name="comment" cols="26"></textarea>
<br><input type="submit" value="Enter">
</form>
</body>
</html>


comment.asp

 <%
username=Request.Form("username")
email=Request.Form("email")
comment=Request.Form("comment")
%>
<html>
<head>
<title>Comment Accepted</title>
</head>
<body>
Dear <%=username%>, Welcome to Board<br>
Your email is <%=email%><br><br>
Your comment:<br>
<%=comment%>
</body>
</html>
Output:

 Dear Test User, Welcome to Board
Your email is test@test.com
Your comment:

 This is our comment. It ends now!

4-3 Radio buttons and check boxes
Radio buttons and check boxes are common form fields that you will need in most of your applications.

Check box is used when someone must either accept or reject an option. In our next example we have asked the user if he accepts our subscription offer for a newsletter. If user decides to accept our offer he will leave the checkbox checked, other wise he may remove check mark from checkbox.

Radio buttons are used when we want to choose between several options. For example we may want to choose an option from among 5 possible options. In these cases we will use a radio button.

Look at our next example to see how we have added a checkbox and a radio button to our web application.


Example 4-3:


register.html

 <html>
<head>
<title>Registration Page</title>
</head>
<body>
<b>Registration Page</b><br>
<form action="register.asp" method="post">
Email: <input type="text" name="email"><br>
<br>
Do you want to subscribe to our newsletter:
<input type="checkbox" name="subscr" value="ON" checked>
<br><br>Your education level:<br><br>
<input type="radio" value="High School" checked
name="edu">High School<br>
<input type="radio" name="edu" value="BS">BS<br>
<input type="radio" name="edu" value="MS">MS<br>
<input type="radio" name="edu" value="PHD">PHD<br>
<br><br><input type="submit" value="Register">
</form>
</body>
</html>

register.asp

 <%
email=Request.Form("email")
subscr=Request.Form("subscr")
edu=Request.Form("edu")
%>
<html>
<head>
<title>Registration Accepted</title>
</head>
<body>
Dear user, Your registration request received<br>
Your email is <%=email%><br>
Newsletter subscription: <%=subscr%><br>
Your education level is: <%=edu%>
</body>
</html>

Output:

 Dear user, Your registration request received
Your email is test@test.com
Newsletter subscription: ON
Your education level is: MS

4-4 Hidden fields
Sometimes you want to send data variables form client side browser to server side script or program but you do not want to use an ordinary field such as text box because it disturbs form appearance.

In such cases you can use hidden fields, a special type of input fields. Hidden fields can contain data while they do not appear on the form.

For example a hidden field can be used in cases that we want to distinguish which form is used to submit data to server side script.

Look at below example. In this example we have two different forms.


Example 4-4


websubsc.html

 <html>
<head>
<title>Subscription Page</title>
</head>
<body>
<b>Web Design Newsletter Subscription</b><br>
<form action="subscribe.asp" method="post">
Email: <input type="text" name="email"><br>
<input type="hidden" name="pub" value="Web Design">
<input type="submit" value="Register">
</form>
</body>
</html>
aspsubsc.html

 <html>
<head>
<title>Subscription Page</title>
</head>
<body>
<b>ASP Programming Newsletter Subscription</b><br>
<form action="subscribe.asp" method="post">
Email: <input type="text" name="email"><br>
<input type="hidden" name="pub" value="ASP Programming">
<input type="submit" value="Register">
</form>
</body>
</html>
subscribe.asp

 <%
email=Request.Form("email")
publication=Request.Form("pub")
%>
<html>
<head>
<title>Subscription Successful</title>
</head>
<body>
Email address <%=email%>
subscribed to <%=publication%> Newsletter.
</body>
</html>

Output with first form:

 Email address test@test.com subscribed to Web Design Newsletter.
Output with second form:

 Email address test@test.com subscribed to ASP Programming Newsletter.

4-5 Next lesson
Ok, it's enough for now. We will continue in next lesson.

Now you must be able to use input fields effectively. We have not introduced a few of input fields but you must be able to use them easily like those we used in this lesson.

In next lesson we will study about sessions, applications and some string functions.

Notice: You can find examples of this lessons in our website. There you must go to resources section and then click on "ASP email course example page."

Exercises:
Attention:  
 Do not use any html editing program like MS FrontPage . You must work on the codes yourself. 

Package files related to each exercise into a single zip file and send this file to your tutor.
Course support: 
 Paid students must send exercises to their tutor. Tutor will return corrected exercise to the student. Others can ask their  questions in Support forums in our web site.

Free students can also submit their homework in related support forum for correction and advice from tutor.

http://www.learnem.com/forums/

1. Design a web page with an application form for online subscription to one of 3 available magazines (use radio  buttons to choose between 3). You must have fields for postal address, postal code, name, email address etc. Place a check box on your form that asks for subscription to announcement email list.

2. Now write an ASP program that extracts submitted information and shows it to user for confirmation. Place a link to html form in your confirmation page. User may use this link to return to application form in case of any errors.


============================================================ 
Copyright Notice :

© 2000,2001 Siamak Sarmady and Learnem Group . All rights reserved. This text is licensed to be used on ProgrammingUni website. Any kind of reproduction, redistribution in any form is strictly prohibited without written permission of the writer. 

Back Next