ASP Forms(2)
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.
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!
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
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.
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.
Exercises
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.
Next Lesson
|
