Integrating Technology in the Foreign Language Classroom

  
Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2014
Forms and Text Boxes in web pages (Introduction)

Setting up a Form :  <form> </form>
Interactive fields must be located within a Form. A web page form is easy to set up, however forms can be confusing to beginners because they are NOT visible. This is where we need to become "the man behind the curtain." This can be done by editing the HTML Source or by inserting the form tags while editing a page in KompoZer.  Everything between the open form tag <form> and the close form tag </form> is part of the form, and any data entry fields (form fields) must be located inside of a form in order to work. The <form> tag can include additional parameters that determine what the form will do with anything that the student types, but these are not needed for our purposes.

In the following example, we see a form that will email something to the teacher, but your form doesn't need to be set up to do this in particular, It is enough to have just the open and close form elements.

To create the Form in Kompozer, use the Insert / Form / Define Form menu item and insert the following into the window:

Form Name="verb quiz"
action="mailto:fakeaddress"
method="post"

If you look at the HTML Code for the form, you will see something like :

<form method="post" action="mailto:fakeaddress" name="verb quiz"><br>
</form>

Here too all we really need for our purposes are the two simple form tags. The form elements need to be inserted within the form area (in other words between the <form> </form> tags).

It can be useful to use the split view for both Design and Source in order to better see where things are. In Design view, you will see a blue dotted line around the form area. You can put all of the content of your page into this form area.

 

Inserting Form Fields
 
In Kompozer, use Insert/Form/Form field... to place the elements in the form area.
<form name=verb quiz method=post action=mailto:your_email_address>
1. The text box gives space to type text up to a specified number of characters.  Here is a text box whose name is "question1", whose size (char width) is 15 visible characters, and whose content is limited to 18 characters (Max chars - the length of the text that may be typed can be longer or shorter than the size of the visible box if you so wish):

<input type="text" name="question1" size="15" maxlength="18">

Tu  à New York ce weekend.

2. The textarea field (also called a multi-line Text Field in Dreamweaver) requires two tags, an open & close tag. It provides for multiple rows and columns and allows for scroll bars in case the text extends beyond the visible area on the screen. In the sample, we have included the default text "Je" that appears in the box initially:

<textarea name="question2" cols="50" rows="5" maxlength="250">Je
</textarea>

Où est-ce que tu vas?

3. The list/menu box form field (dropdown box) is much more complex. It uses the <select> </select> and <option> tags to create a drop down box with multiple options from which the student may choose.  The Option Value is the text that will be entered in the field when the user selects the text following the Option tag. It is usually possible (and less confusing) to use the same text for both as we do below (note that the Option Selected tag gives a default initial value):

<SELECT name="verb1" size="1"><OPTION SELECTED VALUE="aller">aller
<OPTION VALUE="vais"> vais
<OPTION VALUE="vas"> vas
<OPTION VALUE="va"> va
<OPTION VALUE="allons"> allons
<OPTION VALUE="allez"> allez
<OPTION VALUE="vont"> vont
</SELECT>

Nous  à l'école.

In Dreamweaver, insert the list/menu box and set the properties for its name, list/menu, height (only for a list), list values, initially selected value. The item label is the text that you see; the value is the text that the computer sees internally. For most applications, these will be the same.

For KompoZer users, the DOM explorer can give similar editing tools for form elements.

4. Radio buttons present the options in a different format.Notice that the group of radio buttons all have the same name and that selecting one of the buttons in the group deselects all others:

<INPUT  TYPE="radio" NAME="verb2" VALUE="vais"> vais
<INPUT  TYPE="radio" NAME="verb2" VALUE="vas"> vas
<INPUT  TYPE="radio" NAME="verb2" VALUE="va"> va
<INPUT  TYPE="radio" NAME="verb2" VALUE="allons"> allons
<INPUT  TYPE="radio" NAME="verb2" VALUE="allez"> allez
<INPUT  TYPE="radio" NAME="verb2" VALUE="vont"> vont

Vous ____________ en France.
vais vas va allons allez vont
 
 

For the moment, simply getting the form elements (most importantly the textbox) on your page within a form area is enough. Practice, and when you feel comfortable doing this, then go on to the next step.

Processing Student Input

There are many ways to process information from the text boxes, textareas, menus, radio buttons, and other form fields. Most of these involve computer programming that is beyond the scope of this lesson. Data can be sent to and processed by: The cgi script and asp page run on a remote computer and receive form data from the student through the Internet.  In addition to sending feedback to the student, they are capable of storing student responses in a database for subsequent examination by the teacher. These techniques are not very complicated for someone with basic computer programming skills but do require such skills as well as access to certain server privileges.

JavaScript is a very simple scripting language designed for writing small programs within a web page.  It can process information located in form objects without accessing a remote computer. Although JavaScript is simple as programming languages go, it is not trivial for a non-programmer.

Non-programmers might get help from a programmer to create a basic general purpose routine to do something with student input and then always use this same program. One may also find sample utilities online that can be used as is or slightly modified and integrated into your pages. It is possible to find utilities that will allow the answers to be stored or emails to the teacher.

Even without a JavaScript utility, the student might simply press the Print button on the browser window to print out the answers and hand them in to the teacher.


Using pop-up windows to provide feedback

Providing an online answer key or placing answers in pop-up windows may be more manageable in many cases. This method allows the student to check his or her own answers against the teacher's model.  See our lesson on glossing or annotating tests for the technical details. The following new form shows examples of how the pop-up window technique might work for the same set of questions shown above:

<form name=verb quiz 2 method=post action=>

1. Tu  à New York ce week-end.
2. Où est-ce que tu vas?

3. Nous  à l'école.
4. Vous ____________ en France.
vais  vas  va  allons  allez  vont

Answers

</form>

These pop-up windows use JavaScript, but there are other techniques that can also work. For instance, you could place answers on a web page answer sheet that opens in a new window.

 

Summary

Form fields help make your web pages more interesting by involving the students actively. Many techniques can be used:

By having the student do something with the language and actually manipulate information on the screen, the page becomes interactive and helps limit the potential passivity of any medium that sends information only in one direction.


Some of these sites are appropriate for relative beginners, but others may be considerably more complex.

EchoEcho.com Tutorials: Web Forms : http://www.echoecho.com/htmlforms.htm
HTML Goodies - HTML Forms : http://www.htmlgoodies.com/tutorials/forms

Editing KompoZer Forms: http://anh.cs.luc.edu/python/hands-on/examples/www/commonFormFields.html
How to Add a Feedback Form to Your Website Using KompoZer: http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-5.shtml

Dreamweaver - Adding forms to your webpage : http://www.aces.edu/ctu/techref/webdev/dreamweaver/
Intermediate Dreamweaver forms : http://www.lehigh.edu/computing/web/IntDreamweaver/forms.html

JavaScript for the Total Non-Programmer : http://www.webteacher.com/javascript/
Thau's JavaScript Tutorial : http://www.webmonkey.com/2010/02/javascript_tutorial/
EchoEcho.Com - Tutorials : JAVASCRIPT : http://www.echoecho.com/javascript.htm

 



Return to Syllabus