COMPUTER 8 MODULE 13 and 14

COMPUTER SCIENCE
8
Fundamentals of Web
Application Development
Module 13 - 14 (Week 1, 2, and 3)
Name of Student: Set (A or B):
Grade and Section: School Year: 2020-2021
Teacher: __________________ Date:

Lesson 3 Using Javascript with Forms
 Creating a Form
 Creating Form Elements
Give an example of HTML Form tag elements. Define what the purpose of it.
Draw a form that asks a personal information of a student.
This chapter will show you how to create forms and use Javascript to process the data in
it. It will explain how form elements such as textboxes, checkboxes, radio buttons, and drop-down
menus offer a better way to accept data from users compared to prompt() function.
Page | 2
USING FORMS
HTML forms allow you to get data from users in a more sophisticated manner. Compared
to the prompt () function, they provide you with objects such as textboxes, buttons, checkboxes,
and drop-down boxes. They give you better control over the users’ inputs by selecting the
appropriate object that you will use to gather specific pieces of data. Also, forms are more
presentable and organized for the user to manipulate. A form is created using HTML tags.
Javascript may be used to retrieve and manipulate the values of elements in the form.
In the next sections, you will learn how to create a form using HTML. Afterward, you will
create Javascript functions that will handle the values that were entered by the users on the form.
Exercises will help you apply what have you learned.
Figure 1. A page that uses Javascript to retrieve and

manipulate the values in the elements of a form
Creating a form will require the use of HTML. The next section will show you how.
A. Creating a Form
A form is defined using the <form> and </form> tags.
Syntax:
<form method=”get/post” id=”formid” name=”formname” action=”URL”>



</form>
Where:
 method – this is optional. The method on how to send the data to another file. The default
is get. Use post if the form content exceeds 100 characters.
 id – this is optional. This the unique id of the form object. The object id will be used to
retrieve the values in the form using the documents.getElementById() function.
Page | 3
 name – it is unique name of the form object. The object name can also be used to retrieve
the values in the form.
 action – This is optional. The url of the file that directs where to send the form values.
Example:
<form method=”get” name=”sampleform” action=”process.asp”>



</form>
The example above creates a form, having sampleform as the id. The values in the form will be
sent to process.asp. Do not worry about process.asp, you will learn more about it in the next
chapters. Let us just focus on creating forms.
B. Creating Form Elements

A form element is generally placed inside a form. A form element may be in the form of textboxes,,
textareas, buttons, checkboxes, radio buttons, and drop-down boxes.
a. A textbox is used when asking a user to enter data in text format. It is defined using the
<input> tag.
Syntax:
<input type = “text/password” size=”n” maxlength=”n”

id=”objectedId” name=”name” value=”initialvalue” />
Where:
 type=“text” – it creates a textbox.
 type=“password” – it creates a textbox with masking.
 size – this is optional. It defines the width of the textbox by specifying the number
of characters.
 maxlength – this is optional. This indicates the number of characters the textbox
will accept.
 id – this is optional. This is unique id of the object. The object id will be used to
retrieve the values in the object using the document.getElementById() function.
 name – this is name of the object. The name is also used to retrieve values in the
object.
 value – this is initial value of the textbox
Example:
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<form name=”sample form”>
First Name: <input type=”text” name=”firstname” value=””/>
<br/><br/>
Last Name: <input type=”text” name=”lastname” value=”” />
</form>
</body>
</html>
Page | 4
Result:
Below is a sample form that accepts a password.
<html>
<head>
</head>
<body>
<form name=”sample form”>
Password: <input type=”password” name=”magicword”
value=””/>
</form>
</body>
</html>
Result:
b. A textarea is used to allow the user to enter data in multiple lines. A textarea is also
called a multi-line textbox. A textarea is defined using the <textarea> and </textarea>
tags.
Syntax:
<textarea cols=”n” rows=”n” id=”objectid”
name=”name”>text</textarea>
Where:
 cols – it specifies the number of columns in the textarea.

 rows – it specifies the number of rows in the textarea.
 id - this is optional. This is unique id of the object the object id will be used to
retrieve the value in the object using the document.getElementById() function.
Page | 5
 name - the name of the object. The name is also used to retrieve the values in
the object.
 text – this is optional. The initial content of the textarea.
Example:
<html>
<head>
</head>
<body>
<form name=”sampleform”>
Please say something about yourself.
<textarea rows=”10” cols=”20” name=”additionalinfo”>
</textarea>
</form>
</body>
</html>
Result:
c. A button or command button is the main clickable element in a form. A button is defined
using the <input> tag.
Syntax:
<input type=”button/reset/submit” name=”name”
value=”initialvalue”>
Where:
 type=”button” – it creates a button.

 type=”reset” – it creates a reset button. Reset buttons will change the value
in each of the form elements back to its original value when the form or page was
loaded.
 type=”submit” – it creates a submit button. Clicking the submit button will
send the values in the form to a file specified in the action attribute of the <form>
tag.
 name – this is the name of the object. The name is also used to retrieve the
values in the object.
Page | 6
 value – this is the caption of the button.
Example:
<html>
<head>
</head>
<body>
<form name=”sampleform” action=”process.asp”>
First Name: <input type=”text” name=”firstname” value=”” />
<br/><br/>
Last Name: <input type=”text” name=”lastname” value=”” />
<br/><br/>
<input type=”reset” value=”Reset this form” />
<input type=”submit” value=”Submit this form” />
</form>
</body>
</html>
Result:
d. Radio buttons or option buttons are used when you want the user to select from a set
of choices. A radio button is defined using the <input> tag.
Syntax:
<input type=”radio” id=”objectedId” name=”name”
value=”initialvalue” />
Where:
 type = “radio” – it creates a checkbox.

 id - this is optional. This is unique id of the object. The object id will be used to
retrieve the value in the object using the document.getElementById() function.
values in the object. All the radio buttons in a given set should all have the
same name.
 value – it is the value returned if the radio button is clicked.
Example:
<html>
<head>
Page | 7
</head>
<body>
Gender: <input type=”radio” name=”gender” value=”male” />
<input type=”radio” name=”gender” value=”female” />
</form>
</body>
</html>
Result:
e. checkboxes are used to allow the users to select more than one from a given set of
choices. A check box is defined using the <input> tag.
Syntax:
<input type=”checkbox” id=”objectedId” name=”name”
value=”initialValue”>
Where:
 type=”checkbox” – it creates a checkbox.

 id – this is optional. This is the unique id of the object. The object id will be used
to retrieve the values in the object using document.getElementById() function.
 name – this is the name of the object. The name is also used to retrieve the value
in the object.
 value – this is the value returned if the checkbox is checked.
Example:
<html>
<head>
</head>
<body>
How do you go to school? <br/>
<input type=”checkbox” name=”transportation1”
value=”car” /> Car
value=”bus” /> School Bus
value=”commute” /> Commute
</form>
</body>
</html>
Page | 8
Result:
f. A drop-down box or pull-down menu is used as an alternative to radio buttons. It is very

useful when presenting a large number of choices to the user. A drop-down box is
defined using <select> and <option> tags.
Syntax:
<select name=”name” size=”n” id=”objected” name=”name”>
<option value=”value1”>Item 1</option>
</select>
Where:
 size – this optional. It indicates the number of items displayed. Default is 1.

 id – This is optional. This is the unique id of the object. The object id will be used
to retrieve the values in the object using the document.getElementById() function.
 name – This the name of the object. The name is also used to retrieve the values in
the drop-down box.
 value – this is the value returned by the selected item.
Example:
<html>
<head>
<title> Sample Form</title>
</head>
<body>
In what month were you born?
<select name=”month”>
<option value=”jan”>January</option>
<option value=”feb”>February</option>
<option value=”mar”>March</option>
<option value=”apr”>April</option>
<option value=”may”>May</option>
<option value=”jun”>June</option>
<option value=”jul”>July</option>
<option value=”aug”>August</option>
<option value=”sep”>September</option>
<option value=”oct”>October</option>
<option value=”nov”>November</option>
<option value=”dec”>December</option>
</select>
</form>
</body>
</html>
Page | 9
Result:
g. A hidden form element is used when you want an object to store a value as part of the
form without it being displayed. A hidden element is defined using the <input> tag.
Syntax:
<input type=”hidden” id=”objectid” name=”name” value=”value”>
Where:
 type=”hidden” – it creates a hidden form element

 id – this is optional. This is the unique id of the object. The object id will be used
to retrieve the values in the object using the document.getElementById()
function.
values in the object.
 value – it is the initial value of the hidden element.
Example:
<html>
<head>
</head>
<body>
Please say something about yourself. <br>
<textarea row=”10” cols=”40” name=”additionalinfo”>
</textarea>
<input type=”hidden” name=”recordnumber” value=”1”>
</form>
</body>
</html>
Page | 10
Result:
There are actually two form elements on the page. The first one is the textarea,
and the second is the hidden element named recordnumber that has a value of 1. The
value of the hidden element may be used later by another script.
Page | 11
COMPUTER SCIENCE 8 (MODULE 13 and 14)
Name: ____________________________________________ Date:

Teacher: __________________________________________ Grade & Section:
Identify the following questions. Write your answer in the space provided.
1. It allow the users to select more than one from a given set of choices.
2. It is used when you want an object to store a value as part of the form
without it being displayed.
3. It is used when asking a user to enter data in text format.
4. It is used as an alternative to radio buttons.
5. It allows the user to enter data in multiple lines.
What is a radio button? Give the syntax of this tag element.
Page | 12
Give an example of a checkboxes form. Write the code and draw its output. (Use the back of
this page if necessary).
Exercise: Write a code that displays a similar output to the given picture.
(An additional points to those who can submit a code).
Page | 13

COMPUTER 8 MODULE 13 and 14

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

COMPUTER 8 MODULE 13 and 14

Uploaded by

Copyright:

Available Formats

COMPUTER SCIENCE

Name of Student: Set (A or B):

Grade and Section: School Year: 2020-2021

Teacher: __________________ Date:

Draw a form that asks a personal information of a student.

Figure 1. A page that uses Javascript to retrieve and

B. Creating Form Elements

<input type = “text/password” size=”n” maxlength=”n”

Below is a sample form that accepts a password.

 cols – it specifies the number of columns in the textarea.

 type=”button” – it creates a button.

 type = “radio” – it creates a checkbox.

 type=”checkbox” – it creates a checkbox.

f. A drop-down box or pull-down menu is used as an alternative to radio buttons. It is very

 size – this optional. It indicates the number of items displayed. Default is 1.

 type=”hidden” – it creates a hidden form element

Name: ____________________________________________ Date:

3. It is used when asking a user to enter data in text format.

4. It is used as an alternative to radio buttons.

5. It allows the user to enter data in multiple lines.

What is a radio button? Give the syntax of this tag element.

You might also like