Republic of the Philippines

Department of Education
National Capital Region
DIVISION OF CITY SCHOOLS – MANILA
Manila Education Center Arroceros Forest Park
Antonio J. Villegas St. Ermita, Manila

PROGRAMMING
.NET NCIII
Grade 11

Quarter 1 Week 5 Module 5

Learning Competency:
Design HTML5 document using Cascading
Style Sheet 3 (CSS3)
Creating Forms
TLE_ICTP.NET 11-12PPHJCIIf-i-29

SDO MANILA PROPERTY

PROGRAMMING.NET
K-12 CURRICULUM Division of City Schools-Manila
DEPARTMENT OF EDUCATION
 K TO 12 BASIC EDUCATION CURRICULUM JUNIOR HIGH SCHOOL
TECHNICAL LIVELIHOOD EDUCATION AND SENIOR HIGH SCHOOL -
TECHNICAL-VOCATIONAL-LIVELIHOOD TRACK INFORMATION AND
COMMUNICATIONS TECHNOLOGY–PROGRAMMING (.NET TECHNOLOGY) NC
III

(1st Semester)

By:
RHAYMOND M. MONTERDE
Master Teacher I
C.P. Garcia High School

PROGRAMMING.NET Lesson 5
K-12 CURRICULUM
Creating Forms
in HTML
EXPECTATIONS:

At the end of the period, learners should be able to:

LO1. Create Forms in a webpage

Key Terminologies

 <Form> tag - tag that defines a form that is used to collect user
input data in rows and columns.

 <input>- the most important element in <form> tag.

 <input type="text"> - Defines a single-line text input field

 <input type="radio"> - Defines a radio button (for selecting one of

many choices)

 <input type="submit">- Defines a submit button (for submitting

LEARNING OUTCOME 1:

Create Forms in a webpage

PROGRAMMING.NET
K-12 CURRICULUM
 Direction: Choose the correct answer

1. Used to collect user input.

a. table d. form
b. input e. None of the above
c. attribute
2. The most important element in <form> tag.
a. form d. table
b. input e. element
c. html
3. Defines a submit button (for submitting the form)
Total data
a. input d. submit
b. radio e. element
c. form
4. Defines a radio button (for selecting one of many choices)
a. button d. input
b. submit e. None of the above
c. radio
5. The closing tag for <form> tag
a. <form//> d. <form>
b. </form/> e. </form>
c. /<form//>

Brief Introduction
An HTML form is a section of a document containing normal content,
markup, special elements called controls (checkboxes, radio buttons,
menus, etc.), and labels on those controls. Users generally "complete" a form
by modifying its controls (entering text, selecting menu items, etc.), before
submitting the form to an agent for processing (e.g., to a Web server, to a
mail server, etc.)

Here's a simple form codes with textbox:

PROGRAMMING.NET
K-12 CURRICULUM
Output:

Radio buttons are used when out of many options; just one option is
required to be selected. They are also created using HTML <input> tag and
the type attribute is set to radio. Indicates the type of input control and for
checkbox input control it will be set to radio

Here's a simple form codes with radio button:

PROGRAMMING.NET
K-12 CURRICULUM
Output:

The Submit Button

<input type="submit"> defines a button for submitting the form data

to a form-handler. The form-handler is typically a page on the server with a
script for processing input data. The form-handler is specified in
the form's action attribute.

Here's a simple form codes with textbox, radio button and submit
button:

PROGRAMMING.NET
K-12 CURRICULUM
Output:

ACTIVITY 1.1:

Create a form containing the following: Name, Address, Birthday,

Birth Place, Gender, Contact Number, Grade Level, Section, Religion,
Nationality, Mother’s Name, Occupation, Contact Number, Father’s Name,
Occupation, Contact Number. Write your answer below.

PROGRAMMING.NET
K-12 CURRICULUM
 The HTML <form> tag is used for creating a form for user
input. A form can contain textfields, checkboxes, radio-buttons and
more. Forms are used to pass user-data to a specified URL.

CHECKING YOUR UNDERSTANDING

How to write the code for textbox, radio and submit button in a
<form>tag. Write it below

PROGRAMMING.NET
K-12 CURRICULUM
 Direction: Choose the correct answer

1. Used to collect user input.

d. table d. form
e. input e. None of the above
f. attribute
2. The most important element in <form> tag.
a. form d. table
b. input e. element
c. html
3. Defines a submit button (for submitting the form)
Total data
a. input d. submit
b. radio e. element
c. form
4. Defines a radio button (for selecting one of many choices)
a. button d. input
b. submit e. None of the above
c. radio
5. The closing tag for <form> tag
d. <form//> d. <form>
e. </form/> e. </form>
f. /<form//>

PROGRAMMING.NET
K-12 CURRICULUM
Answer Key:

Pre-Test LO1 3. D
1. D 4. C
2. B 5. E

Post-Test LO1

1. D
2. B
3. D
4. C
5. E

Activity 1.1
<html>
<head>
<title>sample form</title>
</head>
<body>
<form method=”post”>
Name:<input type=”text”><br>
Address:<input type=”text”><br>
Birthday :<input type=”text”><br>
Birth Place:<input type=”text”><br>
Gender:<input type=”text”><br>
Contact Number :<input type=”text”><br>
Grade Level:<input type=”text”><br>
Section:<input type=”text”><br>
Religion :<input type=”text”><br>
Nationality :<input type=”text”><br>
Mother's Name:<input type=”text”><br>
Occupation:<input type=”text”><br>
Contact Number:<input type=”text”><br>
Father's Name:<input type=”text”><br>
Occupation:<input type=”text”><br>
Contact Number:<input type=”text”><br>
</form>

</body>
</html>

CHECKING YOUR UNDERSTANDING

Name:<input type=”text”><br>(textbox)
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br> (radio button)

PROGRAMMING.NET
K-12 CURRICULUM
<input type="submit" value="Submit">(submit button)
References:

https://www.w3schools.com/html/html_forms.asp

https://www.w3.org/TR/html4/interact/
forms.html#:~:text=17.1%20Introduction%20to%20forms,and%20labels
%20on%20those%20controls.

https://www.tutorialspoint.com/html/
html_form_tag.htm#:~:text=Description,data%20to%20a%20specified
%20URL.

PROGRAMMING.NET
K-12 CURRICULUM
 Acknowledgements

Writer: Rhaymond M. Monterde- MT I/ICT Computer Programming

Editors: Ariel Tosio- EPS, Elena C. Reyes- Principal IV, Gibson J.

Olazo– MT II/ICT Computer Programming Coordinator

Reviewer: Gibson J. Olazo– MT II/ICT Computer Programming

Coordinator, Ariel Tosio- EPS

Management Team: Maria Magdalena M. Lim-Schools Division

Superintendent-Manila, Aida H. Rondilla-Chief Education Supervisor
Lucky S. Carpio-EPS and Lady Hannah C Gillo, Librarian II-LRMS

PROGRAMMING.NET
K-12 CURRICULUM