Chapter 7

Chapter 7
Basic Form Controls Manipulation
Surfers interact with our web page using Form controls: buttons, textboxes (text
fields), check boxes, option buttons (radio buttons), text area, selection list, and
more. So, needless to say, we really need to learn them. Yes, in this chapter, we
will.
Using Button, Text Field and Text Area
The button control is used to begin, interrupt or end a process. When clicked, it
invokes a command that has been written into its Click event method. Most
JavaScript applications have buttons that allow the surfer to simply click them to
perform actions. When the user clicks the button, it is not only carries out the
appropriate action, it looks also like as if it’s being pushed in and released and is
therefore sometimes referred to as push button.
The text field (text box) control is used to display information entered by the
surfer.
The text area control is preferably used when we have multiple lines of text to
display such as group of sentences or one paragraph of information.
Using Check Boxes and Radio Buttons
Check boxes are valid controls, however they are not mutually exclusive. Meaning,
the surfers can check as many check boxes as they want, unlike in Option buttons
(Radio buttons), the surfer can only select one option at a time. Check boxes are
applicable to the situation where you can select a lot of items because you want
them, such as ordering a pizza and choose all the ingredients you want to put on it
as long as you can afford the pay to price. While in option buttons, you can chose
only one item at a time. The option buttons are applicable to this situation –
marrying the one you love. In the Christian World, no matter how many girlfriends
you have at the same time and even in the same place, you can choose only one
among them to marry.
Selection List and Menu Options
The <SELECT> element of the Form control creates a selection list that represents
users with fixed lists of options from which to choose. The options displayed in a
selection list are created with <OPTION> elements. The selection list can appear
as an actual list of choices or as a drop-down menu. Depending on the number
of options in the list, a selection list can also include a scroll bar.
We use <OPTION> elements to specify the options that appear in a selection list.
The content of an <OPTION> element appears as a menu option in a selection
list. Moreover, we specify a selection list’s menu options using <OPTION>
elements placed within a <SELECT> element. Each selection list must contain at
least one <OPTION> element.
NOTE:
The SIZE attribute designates how many lines of the selection list appear when
the form is rendered in a Web browser. If this attribute is excluded or set to one,
then the selection list is a drop-down style menu.
The Boolean MULTIPLE attribute of the selection list specifies whether a user can
select more than one option from the list.
Example 1:
Design and develop a JavaScript program that will display the message, “Hello
World!” when the user clicks the Click Me! button. Follow the given design
specification below:
Solution:
1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>Hello3.htm</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
Function Button1Click()
{
Document.Form1.TextBox1.value=”Hello World!”;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=”Form1”>
<INPUT TYPE=”text” NAME=”TextBox1”><p>
<INPUT TYPE = “button” VALUE=”Click Me!”
onClick=”Button1Click()”>
</FORM>
</BODY>
</HTML>
2. Now save the script with the filename: hello3.htm.

3. To run the script, double-click the hello3.html file with the big E icon.
Explanation: Let us now dissect our code:

.
.
<FORM NAME =”Form1”>
<INPUT TYPE = ”button” VALUE=”Click Me!”
onClick=”Button1Click()”>
</FORM>
.
.
The onClick event-handler is triggered when the user clicks the Click Me!
button, which in turn, executes the Button1Click() function:
.
.
{
Document.Form1.TextBox1.value=”Hello World!”;
}
.
.
We put the text message “Hello World!” into the text box by using the
document.Form1.TextBox1.value statement.
Example 2:
Design and develop a JavaScript program that will display the message,
“Button1 click!” when the user clicks the Button1 button, or “Button 2
clicked!” when the user clicks the Button 2 button. Follow the given design
specification below:
Solution:
1. At the Microsoft Notepad, write the following code:
<HTML>
<HEAD>
<TITLE> Two Buttons Example </TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function Button1Click()
{
Document.Form1.TextBox1.value=”Button 1 clicked!”;
}
{
Document.form1.TextBox1.value=”button 2 clicked!”;
}
</script>
</head>
<body>
<INPUT TYPE = “button” VALUE=”Button1”
onClick =”Button1Click()”>
<INPUT TYPE = “button” VALUE=”Button1”
onClick =”Button2Click()”>
</Form>
</Body>
</Html>
2. Now save the script with the filename: twobuttons1. Htm.

3. To run the script, double-click the twobuttons1.htm file with the big E
icon.
Explanation:
Let us now dissect our code:
<INPUT TYPE=”text”NAME=”TextBox1”><p>
<INPUT TYPE=”button” VALUE=”Button1”
onCllick=”Button1Click()”>
<INPUT TYPE=”button” VALUE=”Button1”
onCllick=”Button2Click()”>
</form>
The onClick event-handler is triggered when the user clicks the Button1 button or
Button2 button, which in turn, executes the Button1Click() function or
Button2Click() function. Within our Button1Click()function.
functionButton1Click()
{
We put the text message “Button 1 clicked!” into the text box by using the
Now, within our Button2Click() function
We put the text message “Button 2 clicked!” inyo the text box by using the
Example 3:
Desig and develop a JavaScript program that will display the message, “I love you
very much, Jenjen! Promise.” At the text area, when the user clicks the CLICK ME!
button. Follow the given design specifi0

Chapter 7

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Chapter 7

Hochgeladen von

Copyright:

Verfügbare Formate

Chapter 7

Basic Form Controls Manipulation

Using Button, Text Field and Text Area

Using Check Boxes and Radio Buttons

1. At the Microsoft Notepad, write the following code:

2. Now save the script with the filename: hello3.htm.

Explanation: Let us now dissect our code:

2. Now save the script with the filename: twobuttons1. Htm.

Let us now dissect our code:

<INPUT TYPE=”button” VALUE=”Button1”

<INPUT TYPE=”button” VALUE=”Button1”

Now, within our Button2Click() function

Das könnte Ihnen auch gefallen