Technical Vocational

Livelihood
QUARTER

1 Computer Programming

TECHNICAL VOCATIONAL LIVELIHOOD

Computer Programming (ICT) – Grade 11
Quarter 1 – Module 8: Interaction of the HTML Form Elements and Attributes
First Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall subsist in any work
of the Government of the Philippines. However, prior approval of the government
agency or office wherein the work is created shall be necessary for exploitation of
such work for profit. Such agency or office may, among other things, impose as a
condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names,
trademarks, etc.) included in this module are owned by their respective copyright
holders. Every effort has been exerted to locate and seek permission to use these
materials from their respective copyright owners. The publisher and authors do not
represent nor claim ownership over them.

Published by the Department of Education Division of Pasig City

Development Team of the Module

Writer : Jenessy Joy T. Pinga

Editor : Lerma Cantanero Reviewer : Rowena
O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
OIC-Schools Division Superintendent
Dr. Aurelio G. Alfonso
OIC-Assistant Schools Division Superintendent
Dr. Victor Javena
OIC – Chief Curriculum Implementation Division

Education Program Supervisors

Librada L. Agon EdD (EPP/TLE/TVL/TVE)
Liza A. Alvarez (Science/STEM/SSP)
Bernard R. Balitao (AP/HUMSS)
Joselito E. Calios (English/SPFL/GAS)
Norlyn D. Conde EdD (MAPEH/SPA/SPS/HOPE/A&D/Sports)
Wilma Q. Del Rosario (LRMS/ADM)
Ma. Teresita E. Herrera EdD (Filipino/GAS/Piling Larang)
Perlita M. Ignacio PhD (EsP)
Dulce O. Santos PhD (Kindergarten/MTB-MLE) Teresita
P. Tagulao EdD (Mathematics/ABM)

Printed in the Philippines by ________________________

 Department of Education – Division of Pasig City
Office Address: Caruncho Avenue, San Nicolas, Pasig City
Telefax: 641-88-85 / 682-2819

Computer
Programming
QUARTER 1

MODULE
Interaction of the HTML Form
8 Elements and Attributes
E-mail Address: divisionofpasig@gmail.com
Introductory Message

For the Facilitator:

Welcome to the Computer Programming for the ICT Module on HTML Form
Elements and Attributes!

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
The writers utilized the standards set by the K to 12 Curriculum using the Most
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.

This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
For the Learner:

Welcome to the Computer Programming for the ICT Module on HTML Form
Elements and Attributes!

The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!

This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning material while being an active learner.

This module has the following parts and corresponding icons:

Expectation - These are what you will be able to know after

completing the lessons in the module

Pre-test - This will measure your prior knowledge and the concepts
to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills that
you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts and applications of

the lessons.

Valuing-this part will check the integration of values in the learning

competency.

Post-test - This will measure how much you have learned from the
entire module. Ito po ang parts ng module.
 EXPECTATION

The students should be able to:

• understand the use of each HTML Form elements.

• perform and apply the use of HTML form attributes in creating
webpage.
• cite the advantages of HTML attributes.

PRE–TEST

Instructions: Identify the following and select the letter that corresponds to
the correct answer.

1. Attribute that behave like readonly attribute but the difference is it is

unusable and un-clickable, and its value will not be sent when submitting
the form.

A. disable B. datalist C. required D. min and max

2. Attributes that specifies the number intervals for the value in the input field.

A. disable B. step C. datalist D. required

3. Attributes that specifies that the input field should automatically get focus
on the specified input field.

A. disable B. autofocus C. datalist D. min and max

4. Elements that define a list of pre-defined options to an input field.

A. disable B. step C. datalist D. required

5. Attributes that specifies that an input field must be filled out by the user
before submitting the form.

A. min and max B. step C. datalist D. required

 RECAP

Module 7 discussed html form and different input

types.

Give at least five input types and describe the use of each input types in one
sentence in your own words.

LESSON

HTML Forms Elements and Attributes

HTML form elements and attributes are used to create a form and give it a
proper look in a structured way.

<select> element - defines a drop-down list.

<option> elements - specifies an option that can be selected (by default, the
first item in the drop-down list is selected). You can choose a pre-selected option,
just add the selected attribute to the option:

Example: Output:
 <textarea> element - specifies a multi-line input field. Under this element
there is a rows attribute that specifies the visible number of lines in a text area and
a cols attribute that specifies the visible width of a text area.

Example: Output:

<datalist> element - define a list of pre-defined options to an input field.

The users will see a drop-down list of the pre-defined options as they enter
data. The list attribute of the <input> element, refers to the id attribute of the
<datalist> element.

Example:
Output:

The value attribute - defines as the initial value for an input field.

Example: Output:
 The readonly attribute - specifies that the input field is read only. It specifies
that the data in is cannot be changed.

Example: <input type="text" name="name" value="Joy" readonly> (to

see what happen try it with your pc)

The disabled attribute - specifies that the input field is disabled. It is like
readonly attributes but the difference is it is unusable and un-clickable, and its
value will not be sent when submitting the form.
Example: <input type="text" name="name" value="Joy" disabled>
(to see what happen try it with your pc)

The size attribute - specifies the size of text or character for the input field.

Example: <input type="text" name="name" value="Joy" size="30"> (to

see what happen try it with your pc)
The maxlength attribute - specifies the maximum length allowed for the

input field. It will not accept more than the allowed number of text or

characters.

Example: <input type="text" name="name" value="Joy" maxlength="10">

(to see what happen try it with your pc)
The autofocus attribute - specifies that the input field should automatically

get focus on the specified input field.

Example: (to see what happen try it with your pc)

<form>
First name : <input type="text" name="fname"><br>
 Middle name : <input type="text" name="mname"><br>
Last name : <input type="text" name="lname" autofocus><br>
</form>

The height and width attributes - specify the height and width of an <input

type="image"> element.

Example: (to see what happen try it with your pc)

<input type="image" src="image.jpeg" width="50" height="50">
The min and max attributes - specify the minimum and maximum values
enter by the user. It works with the input type number, range, date,
datetime-local, month, time and week.
Example: (to see what happen try it with your pc) Enter
a date before 2020-12-30:
<input type="date" name="bday" max="2020-12-30">

Enter a date after 2020-01-01:

<input type="date" name="bday" min="2020-01-01">

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">

The required attribute - specifies that an input field must be filled out by the
user before submitting the form. It works with the input type text, search, url,
email, password, date pickers, number, checkbox, radio, and file.

Example: (to see what happen try it with your pc) <form>
Username: <input type="text" name="uname" required>
<input type="submit">
</form>

The step attribute - specifies the number intervals for the value in the input
field. It works with the input type number, range, date, datetime-local, month, time
and week. (the value will be validating when submitting the form>

Example: if step="5", legal numbers could be -5, 0, 5, 10, etc.

(to see what happen try it with your pc)
<form>
<input type="number" name="points" step="5">
<input type="submit">
</form>
 ACTIVITIES

Using sublime application create an enrollment form and

use at least ten input types. Add attribute in each input types and use at least three
form elements.
Use google chrome in viewing the output.

Rubrics:
Needs work Developing Meets Standard Score
Information is not e Some of All information’s are
appropriatto the ct. information is not appropriate to the
Content proje appropriate to the project.
project.
10 15 20

There are 4 and g There are 1-3 There are no errors.

more codinerrors. coding errors.
Code
10 20 30

There are 1to 4 There are 5 to 9 There are ten or

input types, some input types, each more input types,
has attributes and has attributes or each has attributes
there is 1 form some has attributes and there are three
Visual element. and there are two form elements
Design form elements

10 15 20

Total /50

*Answer the Worksheet number 8 and submit a soft copy/hard copy of your
completed activity to your subject teacher on the following meeting.

WRAP–UP
 This lesson you have understood that the HTML form elements and attributes
are used to create a form and give it a proper look in a structured way.

Each element and attributes have its own specific task and used in the HMTL
form. Now summarize the uses of each elements and attributes discussed by this
module.

___________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________

VALUING

Instructions: Read and answer the following questions carefully in two to three
sentences each number.

1. What do you think are the importance of knowing HTML Forms elements and
attributes?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
2. How will you use the knowledge you acquired about in this module?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

___________________________________________________________________________
 REFERENCES
• Accessed July 6, 2020 12:00Am https://www.w3schools.com
• Accessed July 6, 2020 12:30Am https://www.tutorialrepublic.com