Comp 9 Q4 W4 W5 Kervlui 4 14 SENT Edited de

La Salette of Quezon, Inc.
Samonte, Quezon, Isabela
JUNIOR HIGH SCHOOL

SY 2020-2021
Learning Module
Quarter 4 / Weeks 4-5
Computer 9
LSQ: ONE WITH YOU!
La Salette of Quezon, Inc. SY 2020-2021 Junior High School

1
COMPUTER 9
SELF-LEARNING MODULE (SLM)
Quarter 4 / Weeks 4-5
I. Lesson/Module: USING JAVASCRIPT WITH FORMS

Weeks 4-5: Radio buttons, checkboxes, and drop-down box.
Introduction: Good day, Salettinian Learner. One with you!
Our lesson for these following weeks is still about JavaScript Forms and how to make it. 😊
Engagement Activity (EA): Review the last topic about the textboxes and buttons.
Lesson Presentation:
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.
Sytax:
<input type=”radio” id=”orientedID” name=”name” value=”initialvalue”>
Where:
 Type=”radio” – It creates a radio button.
 ID – this is optional. This is the unique id of the object. The object id will be
used to retrieve the value 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. 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>
<title>Sample form</title>
</head>
<body>
<form name=”sampleform”>
Gender: <input type=”radio” name=”gender” value=”male”>MALE
<input type=”radio” name=”gender” value=”female”>FEMALE
</form>
</body>
<html>
Checkboxes – are used to allow users to select more than one from a given set of choices. A checkbox is defined using the
<input> tag.
Syntax:
<input type=”checkbox” id=”objectid” 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 the 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.
2
Example:
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<form name=”sampleform”>
<input type=”checkbox” name=”name1” value=”value”>Check me out
</form>
</body>
</html>
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 the <select> and <option> tags.
Syntax:
<select name=”name” size=”n” id=”objectid” name=”name”>
<option value=”value1”>Item 1</option>
</select>
Where:
 Size – This is 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 documentElementById() function.
 Name – This is 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.
End
La Salette of Quezon, Inc. SY 2020-2021 Junior High School
3
COMPUTER 9
LEARNING ACTIVITY SHEET (LAS)
Quarter 1/Weeks 4-5
Name: ________________________________________________________________________ Score: ________
Grade and Section: _____________________________________________________________
PERFORMANCE TASK 1: Search an example of JavaScript Form in a website and draw it on the box below and include
the link of the website.
Example:
4
PERFORMANCE TASK 2: Based on your Performance Task 1, write the code of the Form that you draw on the lines
below.
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
________________________________________________ ________________________________________________
End

Comp 9 Q4 W4 W5 Kervlui 4 14 SENT Edited de

Uploaded by

Document Information

Original Description:

Original Title

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

Comp 9 Q4 W4 W5 Kervlui 4 14 SENT Edited de

Uploaded by

Copyright:

Available Formats

La Salette of Quezon, Inc.

Samonte, Quezon, Isabela

JUNIOR HIGH SCHOOL

LSQ: ONE WITH YOU!

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

I. Lesson/Module: USING JAVASCRIPT WITH FORMS

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

You might also like