| Event Handling Using<form>Tag |
The outline of the method to handle events using an HTML tag called <form>is introduced here. The method is a more general for event handling.
What Is <form>Tag?
<form> tag is the HTML tag used to have data entered by the browser.
Generally this is used in the following format. ( You can skip this general format if you are not much interested.)
<form action="Execution program ">
<input type="input format 1" name="variable name 1" value="value of variable 1">
<input type="input format 2" name="variable name 2" value="value of variable 2">
.
.
</form>
- action attribute designates the program to ask handling.
- <form> tag must have <input> tag, using this,
- type attribute designates the type of button, for example. This allows the selection of input format whose view or function is much varied.
- name attribute designates the name of the variable related to type attribute. Depending upon the type of type attributes, this value itself may appear on the browser. For example, where type=“button”, the value assumes the name of the button.
- value attribute designates the value of the variable designated by name attribute. But depending upon the type attributes, this may not be necessary. (For example, type=“button”)
A typical use of this <form>tag is the following HTML. Containing this in your HTML only will allow the easy use of HTML checker explained in Session 8.
Upload the file to Web server (st.gsis.kumamoto-u.ac.jp/your username/public_html/) before using.
<form action="http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi" method="GET"> <input type="HIDDEN" name="ViewSource" value="on"> <input type="SUBMIT" value="Check on this page"> </form>
Comparing this with the general form shown above, you may notice that it has method attribute, but this only shows the sending the data to the Web server. Don’t worry if you don’t know the meaning.
The first and the third lines are important.
We start from the third line.
You can see type=“SUBMIT”. Designating this will cause to:
“display the value of the nearby value attribute as the button name, and request handling to the program designated by action attribute of
<form>“.
Therefore, in this case, a button named “Check on this page” is created, and when this button is clicked, http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi in the first line will be executed.
Next is the first line, but you already have most of the explanation.
http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi shows the program named htmlint.cgi on the server named openlab.ring.gr.jp. The job of this program is the grading of Web page, as you know well. (You have had a hard time with it, haven’t you?)
We explain the second line, too.
It says type=“HIDDEN”, and this is a mechanism to display nothing on the browser and send the data to the server as a secret. In this example, the variable ViewSource is sent with its value on.
By all these designations, pressing the button will check the Web page you created.
type Attribute of <input>Tag
The <input>tag, as shown earlier, can realize various input formats depending upon the type attribute.
Some of the most commonly used ones are 'button','text', 'radio'. Examples of how to use them are explained here.
1.type=“button” (Button: General button)
<form> <input type="button" value="Yes"> <input type="button" value="No"> </form>
value attribute is displayed as the button name (explanation)..
The display of above in the browser will look as follows.
2.type= “text” (Text input field: The field to input the text)
<form>
<input type="text" name="shimei" value="Taro Kumadai">
</form>
Since the value of name attribute becomes the variable name expressing this field, you should assign some good name to recognize.。
value attribute can be omitted. When designated, it will be displayed in this field as the initial value of the filed.
The display of the above in the browser will be as shown below.
3.type=“radio” (Radio button: Button to select one)
<form> <input type="radio" name="hanndan" value="yes"> Yes <input type="radio" name="hanndan" value="no" checked> No </form>
- name attribute shows the name of this entire radio button here. The name is shared by all in one group (in such case as the candidate answers to a single question).
- value attribute is the variable’s name to show this button, and so you should assign a good name to recognize.
- When check attribute is written, the choice is selected (or checked) from the beginning.
- The button name (explanation) is written outside this tag. This means that you write it as a normal sentence.
The above statement will cause the display on the browser as follows. Confirm that only one item (button) can be selected.
If you wish to study other type attributes, see the explanation and samples in “Tohoho’s Introduction to WWW” to be found
Here (in Japanese).
Event Handling in <form>Tag
As we have seen in the previous samples, the <form>tag has the function to create a button on the browser, and when someone presses the button, the event will request some handling. This is the event handling that we have learned already.
This means, as we have dealt with <a> tag, <form> tag also enables handling various events. Furthermore, since <input> tag, in contrast to <a> tag, can realize various forms of input (such as button and character input), this <input> as well as <form>is more commonly used for the event handling for Web page creation.
Well then, the use samples are introduced with each of three tags attributes above. This time, you can expect some response when the button is pressed.
type=“button” (Normally onClick event handler is used.)
First of all, press the button below.
You see the dialogue whether you press “Yes” or “No”. This is built up by the following statements.
<form> <input type="button" value="Yes" onClick="alert('You have a good choice.')"> <input type="button" value="No" onClick="alert('You are quite a guy!')"> </form>
- As with the <a>tag in the previous chapter, you can see that event handling is being done by designating onClick=“...” within<input>tag.
- ? You can change the operation caused by pressing the button, by defining the handling first and then inserting the defined method name to the alert() position. This was explained in the tag in the previous chapter.
You can see this in the type=“text” in the next subsection. - Although combining with other event handlers than onClick is possible, it may create some confusion to your visitors, and we recommend that you avoid this.
type=“text” (Normally used with button)
Erase “Taro Kumadai” and enter your name, and then press the button.
Then you see a message responding to you (or your name). This was done by the following statements.
<script type="text/javascript">
<!--
function henji() {
namae = document.sample1.shimei.value;
kotoba = namae + “san, how are you? You are doing great!”;
alert(kotoba);
}
//-->
</script>
<form name="sample1">
Your name please?
<input type="text" name="shimei" value=Taro Kumadai>
<input type="button" value=“Press here”
onClick="henji()">
</form>
Let’s see the portion of<form>and <input> tag at the latter half.
- You see that <form>tag with
name attribute. This value (sample1) is the name to
distinguish <form>Tag.
You can name freely.
In the samples so far, we did not have the need to distinguish<form>tag, and we did not assign the name. (You could do it, but it should have been ignored.)The reason why the name attribute is necessary in this statement will be explained in the JavaScript part in the first half. - “Your name please?” is just a text and is displayed as is.
- The next portion, the line of<input type=“text”...<, is exactly the same as in the previous example.
By the way, the value of this field can be expressed in the format of
“nameATTRIBITE VALUE.value (of this<input>tag)”
In a rather wild way of expression, you could say thatone attribute (value) of the object <form>
is being set up. (A more accurate expression will be given in the part of JavaScript of the first half.)
In summary, in this example, field value (shimei) (the initial value is “Taro Kumadai”) is saved at > shimei.value
Also, since there is no break tag like<br> between “Your name please?”, there will be no break and the next input field will be displayed. - The next line, <input type=“button”...> is a common one and there will be no need to explain. When the button is clicked, the method defined by our own, henji() will be executed.
Next, we go into the first half where the handling definition was done by JavaScript.
- To avoid errors in older browsers, the entire statements are enclosed by comment tag.
- The line of function henji(){ corresponds } shows that it is the definition of method (handling) named henji().
- document.sample1.shimei.value means the value of the field named ‘shimei’, in the <form> tag named ‘sample1’, within the currently opened browser (document). It is one of the expressions of JavaScript that has an object placed at the center.
- The above value is substituted to the variable named ‘namae’, and a statement “san, how are you? You are doing great.” is added to the next line, and then is substituted to a variable ‘kotoba’.
- Finally the message substituted to ‘kotoba’ is displayed by alert().
type=“radio”
(Showing the sample of displaying the message in the text field)
First, press any key.
You should have seen some in the message column. This is made up of the following statement.
<script type="text/javascript">
<!--
function genki(joutai) {
if (joutai == 0) {
mesg = 'You are doing fine!';
} else if (joutai == 1) {
mesg = 'That won’t energize you, will it?';
} else if (joutai == 2) {
mesg = 'Too bad, since it is late at night, it can not be helped.';
}
document.sample2.kekka.value = mesg;
}
//-->
</script>
<form name="sample2">
Do you always eat breakfast?
<input type="radio" name="asago" onClick="genki(0)"> Yes
<input type="radio" name="asago" onClick="genki(1) checked"> No
<input type="radio" name="asago" onClick="genki(2)"> Depends
<br><br>
Message
<input type="text" name="kekka" size="40">
</form>
Let’s look at<form> and<input> tag in the latter half.
- In <input type="radio" ... >, an onClick event handler is being used.
When the radio button is clicked, a handling named genki() is executed, but here the >argument is designated as genki(0), to call up the method genki(). (We will explain the definition of genki() later.) Naturally, in the definition of genki(), an argument is used and the value of the argument will change the handling. - You see the<input type="text" name="kekka" ... > at the end. In this sample,>this text field is not for input but is used for character output.
size=“40” designates the size of this text field (40 characters in single-byte characters).
Next, we go to the JavaScript in the first half.
- function genki(joutai){ corresponds } shows that it is the definition of the method (handling) named genki().
This method is defined to take >one piece of argument (joutai). To this variable>joutai the value of argument at the time of calling the method will be substituted. This means that, of course, >each time this method is used (called), one piece of argument must be designated. - At the branch of if or if else, the contents of variable mesg are changed depending upon the value of variable joutai.
- At the last portion, document.sample2.kekka.value=mesg;, characters are output in the text field.
document.sample2.kekka.value means the value of the field named ‘kekka’ in the <form>tag named ‘sample2’, within the currently opened browser (document).
By substituting the value (attribute) into mesg, the message is being output.