Parent | Child | Previous | Next
 

Using Web Forms

Description

Covers using text boxes, using list boxes, using multiple selection list boxes, using radio buttons, using check boxes

Request.script_name

HTML forms are created using the <FORM> tag. By setting the ACTION attribute of the form, we can control where this user data goes. Our application will be created using a single page, so we want to have the form data submitted back to the same page. So if the page is named " lesson_one.a5w ", the form can be created as

<FORM ACTION="lesson_one.a5w"> .

For more information about form syntax, see HTML Control Properties. The problem with this approach to defining a form is that if you want to rename your page, or copy your code to be used in another page, you must remember to change the form definition. Xbasic offers an alternative to address this problem. There is a special variable, Request.script_name, that always contains the name of the current page. So by defining your form as 

<FORM ACTION=" <%A5 ? Request.script_name %> ">

Now this problem is alleviated. It is a good idea to get into the habit of always defining your forms that submit back to themselves using this syntax.

The Request? dot variable contains many useful elements in addition to script_name. It is worthwhile reviewing the documentation for the Request dot variable to familiarize yourself with the other information available to you.

  1. Create a new A5W page with the following content.

    <html>
<head>
<meta name="generator" content="Alpha Anywhere HTML Editor">
<title>Using Request.script_name </title>
</head>
<body>
<%a5
dim cFavoriteColor as C
%>
<p>What is your favorite color?
<form action=" <%a5 ? request.script_name %>">
     <input name=favorite_color> 
     <input type=submit value=Enter> 
</form></p> 
<p>You picked <b> <%a5 ? cFavoriteColor %> </b></p> 
</body> 
</html>

    • Note in this example.

      • The Xbasic <%a5 ? request.script_name %> returns the name of the current page. When used as with FORM ACTION, it reloads the current page.

      • Click File > Save As to save your page as "Using Request Script_Name".

  2. Click the 'lightning' icon to run the page in Live Preview. At first you see a screen similar to the following.

    images/WPT_Request_Script_Name_1.gif

  3. After you enter a color value and click Enter, you see a screen like this one.

    images/WPT_Request_Script_Name_2.gif

Using Text Boxes

HTML and A5W pages may contain web forms that are similar to the text boxes, list boxes, radio buttons, and check boxes used by Windows programs. You can use these controls to present options to users and to get their input. The following example shows how to capture the user's input into a text box.

  1. Create a new A5W page with the following content.

    <html>
<head>
<meta name="generator" content="Alpha Anywhere HTML Editor">
<title>Using Text Boxes</title>
</head>
<body>
<%a5 dim cFavoriteColor as C %>
<p>What is your favorite color?
<FORM ACTION =" <%a5 ? request.script_name %> ">
     <INPUT TYPE="TEXT" NAME="cFavoriteColor "> 
     <INPUT TYPE="SUBMIT" VALUE="Enter"> 
</FORM> 
</P> 
<p>You picked <b> <%a5 ? cFavoriteColor %> </b></p> 
</body> 
</html>

    • There are several things to note in this example.

      • The Xbasic <%a5 ? request.script_name %> goes inside the quotes of the FORM ACTION argument.

      • The name of the favorite_color variable that is going to receive the input goes inside the quotes of the INPUT NAME argument.

  2. Click File > Save As to save your page as "Favorite_Color".

  3. Click the 'lightning' icon to run the page in Live Preview. When the page first appears you will see a page like this:

    images/WPT_Using_Text_Boxes_1.gif

  4. After entering a color name and clicking Enter, you will see something like this.

    images/WPT_Using_Text_Boxes_2.gif

Using List Boxes

The following examples show how to capture the user's selection(s) from a list box.

  1. Create a new A5W page with the following content. 

    <html>
<head>
<meta name="generator" content="Alpha Anywhere HTML Editor">
<title>Using List Boxes</title>
</head>
<body>
<%a5
dim greek_letter as C
%>
<p>What is your favorite greek letter?
<p>
<FORM ACTION=" <%a5 ? request.script_name %> ">
<SELECT ID=dropdown1 NAME="greek_letter">
     <OPTION VALUE="Alpha" selected>Alpha</option> 
     <OPTION VALUE="Beta">Beta</option> 
     <OPTION VALUE="Gamma">Gamma</option> 
     <OPTION VALUE="Delta">Delta</option> 
</select> 
<INPUT TYPE=submit VALUE="Enter"> 
</FORM> 
<p>You picked <b> <%A5 ? greek_letter %> </b> 
</p> 
</body> 
</html>

    • There are several things to note in this example.

      • The Xbasic <%a5 ? request.script_name %> goes inside the quotes of the FORM ACTION argument.

      • The name of the greek_letter variable that is going to receive the input goes inside the quotes of the SELECT NAME argument.

  2. Click File > Save As to save your page as "Using List Boxes".

  3. Click the 'lightning' icon to run the page in Live Preview.

    images/WPT_Using_List_Boxes.gif

  4. Select a value from the list box and click Enter. Note how your choice is echoed back to you.

Using Multiple Selection List Boxes

  1. Continuing from the section above, "Using List Boxes", Modify the script as follows.

    • 1. Change greek_letter as C to greek_letter[1] as C, which is an array of character values.

    • 2. Add SIZE="4" and SELECT MULTIPLE="Yes" arguments to the SELECT statement.

    • 3. Change the SELECT NAME argument to greek_letter[].

    • 4. Change the output statement from <%A5 ? greek_letter %> to <%A5 ? greek_letter.dump()%>. The <ARRAY>.DUMP() method converts the elements of an array into a CR-LF delimited string.

  2. For example:

    <html>
<head>
<meta name="generator" content="Alpha Anywhere HTML Editor">
<title>Using Multiple Selection List Boxes</title>
</head>
<body>
<%a5
dim cGreekLetter[1] as C
%>
<p>What is your favorite greek letter?
<p>
<FORM ACTION=" <%a5 ? request.script_name %> ">
<SELECT ID=dropdown1 NAME="cGreekLetter[]" SIZE="4" MULTIPLE="Yes">
     <OPTION VALUE="Alpha" selected>Alpha</option> 
     <OPTION VALUE="Beta">Beta</option> 
     <OPTION VALUE="Gamma">Gamma</option> 
     <OPTION VALUE="Delta">Delta</option> 
</select> 
<INPUT TYPE=submit VALUE="Enter"> 
</FORM> 
<p>You picked <b> <%A5 ? cGreekLetter.dump()%> </b> 
</body> 
</html>

    • There are several things to note in this example.

      • The cGreekLetter[1] array must be created initially with at least one element.

      • The SELECT SIZE="4" argument makes the list box four lines high, so it no longer behaves like a drop-down list box.

      • The SELECT MULTIPLE="Yes" argument allows you to make multiple selections.

      • The form control automatically re-dimensions the cGreekLetter[] array to accept as many elements as the user selects.

  3. Click File > Save As to save your page as "Using Multiple Selection List Boxes".

  4. Click the 'lightning' icon to run the page in Live Preview.

    images/Run_button.gif

  5. Try selecting two or more items in the list and clicking Enter.

    images/WPT_Using_Multiple_Selection_List_Boxes.gif

Using Radio Buttons

The following example shows how to capture a user's selection from a set of radio buttons.

  1. Create a new A5W page with the following content. 

    <html>
<head>
<meta name="generator" content="Alpha Anywhere HTML Editor">
<title>Using Radio Buttons</title>
</head>
<body>
<%a5
dim cAge as C
%>
<p><font face=Verdana size=2>Select an age range.
<FORM action=" <%a5 ? request.script_name %> ">
     <INPUT ID=radio1 TYPE=radio VALUE=1 NAME=cAge CHECKED>0-15<br> 
     <INPUT ID=radio2 TYPE=radio VALUE=2 NAME=cAge>16-30<br> 
     <INPUT ID=radio3 TYPE=radio VALUE=3 NAME=cAge>31-45<br> 
     <INPUT ID=radio4 TYPE=radio VALUE=4 NAME=cAge>46-60<br> 
     <INPUT ID=radio5 TYPE=radio VALUE=5 NAME=cAge>61+<p> 
     <INPUT TYPE=submit VALUE=Enter> 
</FORM> 
</p></font> 
<p>You picked age group <b> <%A5 ? cAge %> </b> 
</p> 
</body> 
</html>

    • There are several things to note in this example.

      • The variable age must be dimensioned as C, even though the INPUT VALUE argument would suggest that a numeric variable would be appropriate.

      • The optional CHECKED argument (which could be placed inside any of the five entries) indicates that the first entry is the default selection.

      • You must add the text that will appear next to the buttons yourself, unlike other types of radio button controls.

  2. Click File > Save As to save your page as "Using Radio Buttons".

  3. Click the 'lightning' icon to run the page in Live Preview.

  4. Try selecting one of the radio buttons and clicking Enter.

    images/WPT_Using_Radio_Buttons.gif

Using Check Boxes

The following example shows how to capture a user's selection from a set of radio buttons.

  1. Create a new A5W page with the following content. 

    <html>
<head>
<meta name="generator" content="Alpha Anywhere HTML Editor">
<title>Using Check boxes</title>
</head>
<body>
<%a5
dim cAge[1] as C
%>
<p><font face=Verdana size=2>Select one or more age ranges.
<p>
<form action=" <%a5 ? request.script_name %> ">
     <input type="check box" checked value=1 name=cAge[]>0-15<br> 
     <input type="check box" value=2 name=cAge[]>16-30<br> 
     <input type="check box" value=3 name=cAge[]>31-45<br> 
     <input type="check box" value=4 name=cAge[]>46-60<br> 
     <input type="check box" value=5 name=cAge[]>61+<p> 
     <input type=submit value=Enter> 
</form> 
</p> 
<p>You picked age group(s) <b> <%A5 ? cAge.dump()%> </b> 
</p></font> 
</body> 
</html>

    • There are several things to note in this example.

      • The age[1] array must be created with at least one element.

      • The form control automatically re-dimensions the age[] array to accept as many elements as the user selects.

      • The optional CHECKED argument (which could be placed inside any of the five entries) indicates that the first entry is the default selection.

      • The <ARRAY>.DUMP() method converts the elements of an array into a CR-LF delimited string, so that more than one selection prints out.

  2. Click File > Save As to save your page as Lesson 14e.

  3. Click the 'lightning' icon to run the page in Live Preview.

  4. Try selecting one or more items in the list and clicking Enter.

    images/WPT_Using_Checkboxes.gif