Grade 11 Com Prog Quarter 1 Week 5 Module 5

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

Grade 11 Com Prog Quarter 1 Week 5 Module 5

Uploaded by

Copyright:

Available Formats

Grade 11 Com Prog Quarter 1 Week 5 Module 5

Uploaded by

Document Information

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

Grade 11 Com Prog Quarter 1 Week 5 Module 5

Uploaded by

Copyright:

Available Formats

Republic of the Philippines

Quarter 1 Week 5 Module 5

SDO MANILA PROPERTY

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

LO1. Create Forms in a webpage

 <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

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

Create Forms in a webpage

1. Used to collect user input.

Here's a simple form codes with textbox:

Here's a simple form codes with radio button:

The Submit Button

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

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

CHECKING YOUR UNDERSTANDING

1. Used to collect user input.

CHECKING YOUR UNDERSTANDING

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

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

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

Management Team: Maria Magdalena M. Lim-Schools Division

You might also like