La Salette of Quezon, Inc.

Samonte, Quezon, Isabela

JUNIOR HIGH SCHOOL

SY 2020-2021

Learning Module
Quarter 4 / Weeks 1-3
Computer 9

LSQ: ONE WITH YOU!

La Salette of Quezon, Inc. SY 2020-2021 Junior High School

COMPUTER 9
SELF-LEARNING MODULE (SLM)
1|Page
 Quarter 4 / Weeks 1-3

I. Course Name: Computer 9 | Quarter 4

II. Introduction to the Course:
A. Course Description of Second Quarter
A JavaScript form is a handy feature related to security and user engagement. It allows you to collect user input.
Even though the form itself is created in HTML, you can use JavaScript to validate the inputted data.
B. Performance Standard/Content Standard
The learner should be able to:
 Create forms to gather data.
 Use JavaScript to retrieve the data in the form.
 Write simple JavaScript programs that validate and process form data.
 Create a membership registration form with validation.
C. Learning Outcomes
At the end of the second quarter, the learner should be able to:
1. Identifying static and dynamic pages.
2. Writing a site specification.
3. document and storyboard.
4. Listing down requirements in creating a dynamic Web application.
5. Planning through the use of a site specifications document and storyboarding.
III. Lesson/Module: USING JAVASCRIPT WITH FORMS
Weeks 1-3: JavaScript Forms
Introduction:
Good day! Peace and all good, one with you!
We are now in the ‘Second Quarter’ of the school year. For the 1 st and 2nd weeks, our lesson is about ‘JavaScript
Forms’, so, keep going and enjoy happy learning! 😊
Engagement Activity (EA):
Search on your gadget a sample of “JavaScript Forms”, read and try to understand about it.
Lesson Presentation:
USING FORMS IN JAVASCRIPT
HMTL 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’ input 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. Afterwards, you will create JavaScript functions that will handle the
values that were entered by the users on the form. Exercises and activities
will help you apply what you have learned.
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 is the unique id of the form object. The object id will be used to retrieve the values in the
form using the document.getElementById()function.
 name – it is the unique name of the form object. The object name can be also 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.
2|Page
 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.
1. 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 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 is the name of the object. The name is also used to retrieve the values in the object.
 value – this is the initial value of the textboxes.
Example: Textboxes for Names Password
<html> <head> <html> <head>
<title>Sample Form</title> <title>Sample Form</title>
</head><body> </head><body>
<form name=”sampleform”> <form name=”sampleform”>
First Name: <input type=”text” name=”firstname” value=””><br> Password: <input type=”password” name=”magicword”
value=””>
Last Name: <input type=”text” name=”lastname” value=””> </form>
</form> </body></html>
</body></html>

Text area – 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 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 is the name of the object. The name is also used to retrieve the values in the object.
 Text – this is optional. This is the initial
content of the textarea.

Example:
<html>
<head>
<title> Sample Form </title>
</head>
<body>
<form name=”sampleform”>
Please say something about yourself.
<textarearows=”10” cols=”30” name=”additionalinfo”>
</textarea>
</form>
</body>
</html>

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 attributes of the <form> tag.

3|Page
  Name – this is the name of the object. The name is
also used to retrieve the values in the object.
 Value – this is the caption of the button.

Example:
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<form name=”sampleform” action=”process.asp”>
First Name: <input type=”text” name=”firstname” value=””>
<br>
Last Name: <input type=”text” name=”lastname” value=””>
<br>
<input type=”reset” value=”Reset this form”>
<input type=”submit” value=”Submit this form”>
</form>
</body>
</html>

Generalization/Reflection:.

 Do Activity#2: Reflection on your LAS.

Application:
 Do Activity#3: Application on your LAS.

4|Page
La Salette of Quezon, Inc. SY 2020-2021 Junior High School
COMPUTER 9
LEARNING ACTIVITY SHEET (LAS)
Quarter 1/Weeks 1-3
Name of Learner: __________________________________________ Section ________________________
Subject Teacher: __________________________________________ Date Submitted: _______________

Avtivity#1
Directions: Clip/Draw at least five (5) pictures of examples of using JavaScript Forms like the registration sample in your
module kit. Mount/Paste the items below and write a short reaction to each.

Items/Pictures Usage

Activity#2: Reflection

5|Page
 You are now ready to apply important learning’s from lesson 1, the better way to strengthen the value of
plating food.
A. Write down your greatest concern about using JavaScript Forms.
1. ___________________________________________________________
2. ___________________________________________________________
3. ___________________________________________________________
B. What do you wish you have done? Use the stem, I wish, I could. Relate your answer to those in exercise A.
1. ___________________________________________________________
2. ___________________________________________________________
3. ___________________________________________________________
C. Write down your plan of action for the three concerns listed in A.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Activity#3: Application
List down all the four (4) codes of JavaScript Forms, and identify its uses.

Code Uses

-End of LAS-

6|Page