Through this tutorial have been examples with mild use of forms. This page introduces all the forms used with HTML and how to control them with Java Script. Forms are probably the most effective way of getting information from the user. Java Script can effectively incorporate interactivity between the website and user using HTML forms. Let's get started with forms.
Set up the new HTML document like so:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<html> <head> <title>Java Script Form Use</title> <Script Language = "JavaScript"> <!-- // --> </script> </head> <body onLoad = "fillList();"> <form name = "frmForm"> <input type = "text" name = "txtTextBox" size = "25"> <input type = "button" value = "Add To Text Area" onClick = "Append();"> <p> <textarea rows = "5" name = "txtTextArea" cols = "35" style = "font-style: regular; font-weight: regular; font-family: Times New Roman" visibility = "visible"></textarea> </p> <p><input type = "button" value = "Show Condition" onClick = "ChangeObject();"></p> <input type = "checkbox" name = "chkTextBox">Hide Text Box <input type = "checkbox" name = "chkTextArea">Hide Text Area <p></p> Page Background Color: <input type = "radio" name = "optColor" checked onClick = "ChangeColor();">White <input type = "radio" name = "optColor" onClick = "ChangeColor();">Red <input type = "radio" name = "optColor" onClick = "ChangeColor();">Green <input type = "radio" name = "optColor" onClick = "ChangeColor();">Blue <p>Change image: <select name = "sltPicture" size = "1" onChange = "ChangeImage();"> <option> <option> <option> </select> </p> <image src = "images\7up.gif"> </form> </body> </html> |
Notice the tag on line 15. This tag calls the function fillList() when the page loads. We are going to create this function momentarily. Notice the tag on line 20. This button calls function Append() when the button is clicked. This function is created
momentarily. It is going to add text from the text box to the text area Lines 36 through 40 use radio button forms (sometimes called option buttons). Notice that the buttons are named the same
(optColor). The radio button on line 34 is set as checked. Because all the buttons have the same name, they are an array of buttons,
each have their own index. They are index 0-3 because there are 4 buttons. Each button calls the function ChangeColor()
when it is click as indicated by the onClick event. Lines 44 through 46 set the options in the select box. Because there are 3 <option> tags, this select box can hold up to 3 options. Line 49 puts the image 7up.gif on the web page. |
Load this page in the browser to see how it appears. Hopefully, you see a bunch of forms and a 7up can rotating at the bottom. If you DO NOT see the 7-up can, make sure that the file 7up.gif is in the folder images. Also, the folder images, MUST be in the same folder as the HTML file you are creating. Now we need to make this form do something with Java Script.
Go to the script tags in the header portion of this HTML document.
Between the comment tags, type the following lines.
var Pictures = new Array(3);
Pictures[0] = "images/7up.gif";
Pictures[1] = "images/sonic.gif";
Pictures[2] = "images/netfire.gif";
// fill the drop down box
function fillList()
{
for (index = 0; index < Pictures.length; index++)
{
document.frmForm.sltPicture.options[index].text = Pictures[index].substring(7, Pictures[index].length);
}
}
Line 1: Create array with 3 parts called Pictures. This array stores the paths of the images we use as strings.
Lines 3 to 5: Store the image path of the three images we use in the Pictures array
Line 8: Declare function fillList. As the comment on line 7 says, this function is used to put the items into the drop down box.
Line 10: Initialize for loop. Loop through value range of index from 0 to 2. Pictures.length returns 3. Because we
say index < 3, the loop does not continue at 3.
Line 12: Set the text of the options in drop-down box sltPicture to the value of array index index. Start at character 7
and end at the last character (Pictures[index].length).
This sets the text in the option box as noted and leaves out the first 7 characters of the array element. The first 7 characters are images. This way, the user only sees the file name in the drop-down box.
Below the lines you just typed, type the following lines:
function ChangeImage()
{
var index = document.frmForm.sltPicture.selectedIndex;
document.images[0].src = Pictures[index];
}
Line 1: Declare function ChangeImage(). This function is called on Line 42 in the HTML at the top of the page. It is used to
change the image we inserted.
Line 3: Set variable index to the selected item (selectedIndex) in drop-down box sltPicture.
Line 4: Set the first image in the HTML document (indicated by index 0) to the picture path stored in array Pictures at element index.
If you test the page, you can change the image below the drop-down box by selecting an image with the mouse. If you scroll through the drop-down box with the arrow keys on the keyboard, you need to press ENTER before a change occurs.
Below the lines you just typed, type the following lines:
function ChangeObject()
{
if (document.frmForm.chkTextBox.checked == true)
{
document.frmForm.txtTextBox.style.visibility = "hidden";
} else {
document.frmForm.txtTextBox.style.visibility = "visible";
}
nbsp; if (document.frmForm.chkTextArea.checked == true)
{
document.frmForm.txtTextArea.style.visibility = "hidden";
} else {
document.frmForm.txtTextArea.style.visibility = "visible";
}
}
Line 1: Declare function ChangeObject.
This function hides and displays the text box and text area according to the status of the check box. Recall the call to this function in the HTML document for the button beneath the text area.
Line 3: Test to see if the checkbox chkTextBox is checked.
Line 5: When line 3 is true (the checkbox is checked), set the visibility of text box txtTextBox to hidden. This hides the text box
on the web page.
Line 9: When line 3 is false (the checkbox in not checked), set the visibility of text box txtTextBox to visible. This displays
the text box on the web page.
Line 12: Test to see if the checkbox chkTextArea is checked.
Line 14: When line 12 is true (the checkbox is checked), set the visibility of text area txtTextArea to hidden, thus hiding the text
area.
Line 18: When line 12 is false (the checkbox in not checked), set the visibility of text area txtTextArea to visible, thus
displaying the text area on the web page.
If you test the page now, you can hide and display the text box and text area when you check the boxes.
Now we are going to code the function that adds text from the text box to the text area. Notice the onClick = Append(); command in the HTML document for the button on line 20.
Below the lines you just entered, type the following lines:
function Append()
{
var addText = document.frmForm.txtTextBox.value;
document.frmForm.txtTextArea.value += addText;
}
Line 1: Declare function Append()
Line 3: Declare variable addText to the text in text box txtTextBox.
Line 4: Add the variable addText to the current value (the text) of text area txtTextArea, thus appending to the existing text.
Now for the final piece of code. Below the lines you just entered, type the following lines:
function ChangeColor()
{
var Color = new Array(4);
Color[0] = "ffffff"; // white
Color[1] = "ff0000"; // red
Color[2] = "00ff00"; // green
Color[3] = "0000ff"; // blue
var index = 0;
for (index = 0; index < 4; index++)
{
if (document.frmForm.optColor[index].checked == true)
{
document.bgColor = Color[index];
}
}
}
Line 1: Declare function ChangeColor().
This function is used to change the background color of the page. It is called through each of the option buttons in our HTML coding.
Line 3: Declare array Color with 4 parts.
Lines 5 through 8: Set a hex color value as a string in each array element. The comments indicate the color the hex value represents.
Line 10: Declare variable index and set at 0.
Line 12: Begin for loop for index, setting the range of values from 0-3.
Line 14: Test to see if the option button optColor is checked. Because these are radio buttons, only one can be selected.
Say the loop is at 2 for its value of index. Line 14 then tests if the button is checked. Because only one button can be selected, only one button in the array returns true that it is checked. In the case of say checkboxes, when multiple checkboxes are selected, looping through them finds each checkbox that is selected or unselected. Option buttons eliminate the possibilities of having multiple selections, so loops work nicely to test their status.
Line 16: When line 14 is true, set the background color of the web page to the value in array Color corresponding with the value on index.
That is the last of the code. Hopefully, you understand how to use all HTML forms. However, this is just the introduction. We have more practical way to use forms. Check the list below to make sure you web page has the following functionality:
Entering text into the text box then clicking the Add to Text Area button appends the text in the text box to the text area.
When the check boxes are checked, they do as they say. The text box, text area, or both are hidden when you click the Show Condition button. Conversely, the text box and text area are made visible by un-checking the checkboxes.
The web page background changes color corresponding to the option buttons' labels.
The drop-down box displays the image name and extension (.gif) ONLY (not the directory as well) and changes the image below it when it is changed.
Hopefully, your page works accordingly. Now you may proceed to Page 14.