School: Rio Chico National High School Grade Level: 8

MATATAG K to 10
Name of Teacher: DONNA MAY Z. PADOLINA Learning Area: SP – ICT 8 (Web Design)
Curriculum - Lesson
Exemplar Teaching Dates and Time: February 3-7,2025 Quarter: 3rd

I. CURRICULUM CONTENT, STANDARDS, and LESSON COMPETENCIES

Day: 1 Day: 2 Day: 3 Day: 4 Day: 5
Creating Additional Input Creating Additional Input Periodical Test Periodical Test Periodical Test
A. CONTENT: Boxes Boxes
Number input Range input
The learner demonstrates The learner demonstrates
basic understanding of basic understanding of
terminologies, history, terminologies, history,
principles of creating an principles of creating an
effective web page, effective web page, including
including an in-depth an in-depth consideration of
B. Content
consideration of information architecture.
Standards
information architecture. Become familiar with graphic
Become familiar with design principles that relate
graphic design principles to the web and learn how to
that relate to the web and implement these theories
learn how to implement into practice.
these theories into practice.
By the end of the quarter, By the end of the quarter, the
C. Performance the learners are able to learners are able to develop
Standards develop skills in analyzing skills in analyzing the usability
the usability of a website. of a website.
Creates additional input Creates additional input boxes
D. Learning boxes so users can enter a so users can enter a range,
Competencies range, number, or number, or password.
password.
E. Instructional At the end of the lesson, At the end of the lesson, At the end of the lesson, At the end of the lesson, At the end of the lesson,
Objectives students will be able to: students will be able to: students will be able to: students will be able to: students will be able to:

1. Identify the purpose 1. Identify the purpose and 1. Recall key concepts covered 1. Recall key concepts 3. Recall key concepts covered
and use of the <input use of the <input in the grading period. covered in the grading in the grading period.
type="number"> type="range"> element in period.
element in HTML. HTML. 2. Apply learned skills to 4. Apply learned skills to
 2. Explain the attributes of 2. Explain the attributes of answer sample test 2. Apply learned skills to answer sample test
number input boxes range inputs, such as min, questions. answer sample test questions.
(e.g., min, max, step, max, step, and value. questions.
value). 1. Create an HTML form that 3. Develop test-taking 3. Develop test-taking
1. Create an HTML form uses range input to strategies to improve 3. Develop test-taking strategies to improve
performance. strategies to improve performance.
using number input collect data interactively.
performance.
boxes for collecting
numerical data.
Prior Knowledge: Prior Knowledge: Mathematics: Reviewing Mathematics: Reviewing Mathematics: Reviewing
Basics of HTML structure Understanding of basic HTML computation and problem- computation and problem- computation and problem-
and tags. structure and tags. solving skills. solving skills. solving skills.
Knowledge of basic input Knowledge of other input English: Enhancing English: Enhancing English: Enhancing
types such as textboxes and types like textboxes and comprehension of word comprehension of word comprehension of word
labels. number inputs. problems. problems. problems.
Future Learning: Future Learning: Study Skills: Learning Study Skills: Learning Study Skills: Learning
F. Integration
Using JavaScript to validate Integrating JavaScript to effective test-taking effective test-taking effective test-taking
numerical inputs dynamically display and strategies. strategies. strategies.
dynamically. manipulate range input
Styling input elements with values.
CSS for better user interface Using CSS to style range
design. sliders for better UI/UX
design.
II. LEARNING RESOURCES
Ppt presentation on Ppt presentation on range Test papers Test papers Test papers
number input input
III. TEACHING AND LEARNING PROCEDURES
A. Pre- Lesson Proper Ask students: Begin with a question: Brief discussion of major Brief discussion of major Brief discussion of major
a. Activating Prior "Imagine creating a form "Have you ever adjusted the concepts covered during the concepts covered during concepts covered during the
Knowledge
b. Establishing Purpose where users need to enter volume slider on a media period. the period. period.
of the Lesson their age, quantity of items, player or used a slider to set a
or test scores. What brightness level? These are
challenges might arise if examples of range inputs.
users input invalid Today, we’ll learn how to
characters like letters create similar sliders in
instead of numbers? Today, HTML!"
we’ll learn how to use
number input boxes to Share the lesson objectives:
ensure users provide the "By the end of this lesson,
 correct type of data." you’ll understand how to use
range inputs in HTML forms
Share the learning goals: and customize them for
specific tasks."
"By the end of this lesson,
you’ll be able to create
number input boxes in
HTML, customize their
behavior using attributes,
and use them effectively in
forms."
B. Lesson Proper Introduction to Number Introduction to Range Input Students work on a short Students work on a short Students work on a short
a. Developing and Input (<input (<input type="range">): practice test. practice test.
Deepening practice test.
Understanding type="number">):
b. Making Generalization Allows users to select a value
within a defined range using a
Used to accept only
slider.
numeric data.
Example: Example:
<input type="number"
name="age"> <input type="range" min="0"
Common Attributes for max="100">
Number Inputs: Attributes of Range Input:

min and max: min and max:

Define the minimum and Define the minimum and
maximum values the user maximum values of the range.
can input.
<input type="number" <input type="range" min="10"
min="0" max="100"> max="50">
step: step:
Sets the increment for input
values. Sets the increment between
<input type="number" values.
step="5">
<input type="range" min="0"
value:
max="100" step="10">
Defines the default value.
<input type="number" value:
value="10">
Example Form with Number Sets the default starting value
Input: of the slider.
<form>
<input type="range" min="0"
<label
max="100" value="50">
for="age">Age:</label>
<input type="number" Example Form Using Range
id="age" name="age" Input:
min="1" max="120"
placeholder="Enter your <form>
age"><br><br> <label
for="volume">Volume:</label
<label >
for="quantity">Quantity:</l
abel> <input type="range"
<input type="number" id="volume" name="volume"
id="quantity" min="0" max="100"
name="quantity" min="1" value="50"
step="1" step="5"><br><br>
placeholder="Enter
quantity"><br><br>
<label
<button for="brightness">Brightness:<
type="submit">Submit</bu /label>
tton>
<input type="range"
</form>
id="brightness"
How the Attributes Work
name="brightness" min="0"
Together:
max="100"
step="10"><br><br>
Prevents users from
entering invalid data.
Example: If min=1 and
<button
max=10, users can only
type="submit">Submit</butto
input values between 1 and
n>
10.
</form>
Displaying Range Values
Dynamically:
 Show how to display the slider
value using a <span>:
<label
for="speed">Speed:</label>
<input type="range"
id="speed" name="speed"
min="1" max="10" step="1"
value="5"
oninput="document.getEleme
ntById('speedValue').textCont
ent = this.value;">
<span
id="speedValue">5</span>
Recap key points: Recap key points: Peer-check answers and Students work on a short Students work on a short
Number input fields ensure Range input allows users to discuss solutions. practice test. practice test.
users enter valid numeric select a value within a range
data. using a slider.
C. Post-Lesson Proper Attributes like min, max, Attributes like min, max, step,
a. Evaluating Learning
b. Remarks
and step help customize and value define the slider's
c. Reflection acceptable input values. behavior.
Dynamic value display
Placeholders guide users enhances the usability of
about what to enter in the range inputs.
field.
Remarks: Remarks: Remarks: Remarks: Remarks:

Prepared by: Checked: APPROVED:

DONNA MAY Z. PADOLINA ALMA G. PAR CARLOS G. CORPUZ, PhD

Teacher III Head Teacher III School Principal IV