Forms are not of much use when your pages are done strictly with HTML
effective use of forms to create clocks, scrolling messages, drop down
menus, and mini applications like our Lab that we us in this class. You
create a form using the <FORM> </FORM> tags. Different variations
of <INPUT> tag are then used to create the form elements
we will be using in this class. Two variations of the <INPUT> tag
are the text input box and the button. We will learn about
some of the others later. Here is the HTML code used to create a typical
form that contains a text input box and button.
This is how it renders:
Including the name parameter in the <FORM> tag is important if you want to refer to the form object and its individual parts. We will soon see some examples of this.
Alert Dialog Box
Click here to see an example of the Alert Dialog box.
The alert dialog box is a method of the window object. We will
begin our discussion of objects in the next lesson. The syntax for
the alert box is very simple. This is all there is to it.
The single parameter, message, of the alert box is displayed in a pop-up modal window. A modal window is one that is displayed on top of all other windows until it is closed. A single 'OK' button is provided to close the alert box.
The alert box is an excellent debugging tool that you can use when you are having a problem with getting your code to work. So far our code is simple and not really needing such a tool. But as your scripts get more complex, you will welcome a method of trouble shooting your code to see how the variables are set or what sequence the code is going though. So remember the alert box and learn how to use it in such situations. It is invaluable.
Lets look at the code that was used to call the alert box in our
demonstration above. Click
to see an example of the Alert Dialog box.
Look at the value that the href attribute is set equal to. This example demonstrates that you can use the special technique shown to cause a function, or object method in this case, to be called instead on navigating to another URL.
I use the above technique with a message "not working yet" when I want to put a link from a page I am developing to another page that I plan to develop later. Doing this prevents me from having a dead link and also reminds me that I need to develop the page.
and the code:
<FORM NAME="demo2"> <INPUT TYPE="button" NAME="confirmDemo" VALUE="Demo of confirm dialog box" onClick='confirm("Can you think of a use for this?")'> </FORM>
<FORM NAME="demo3"> <INPUT TYPE="button" NAME="promptDemo" VALUE="Demo of prompt dialog box" onClick='prompt("Enter some information")'> </FORM>
The confirm dialog box returns a Boolean value, true, if OK is pressed and false if Cancel is pressed. You can use this in an if statement to perform some action if you want to. I think the fact that the buttons are labeled 'OK' and 'Cancel' also makes this awkward to use.
The prompt box returns the value of the text in the field if the OK button is clicked. It returns null if the cancel button is clicked.
[ Top of Page | Contents ]