12
Computer
Programming
(.Net Technology)
Quarter 2– Module 1:
Create HTML5 document using
advanced techniques with
JavaScript and
CSS3
Computer Programming (.NetTechnology)
Alternative Delivery Mode
Quarter 2 – Module 1: Cascading Style Sheet (CSS)
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
royalty.
Borrowed materials (i.e., songs, stories, poems, pictures, photos,
brand names, trademarks, etc.) included in this book 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 SDO San Carlos City
Schools Division Superintendent: Lourdes D. Servito, CESO VI
Assistant Schools Division Superintendent: Diosdado Cayabyab, CESO VI
Development Team of the Module
Writer: ALFIE V. BUGAYONG
Proofreader, In House Content and Language
Editors: Management Team
Chairperson:
Co-Chairpersons:
Members
Printed in the Philippines by ________________________
Department of Education – San Carlos City Division
Office Address: Roxas Blvd., San Carlos City, Pangasinan
Telefax: (075) 632-3293 (OSDS) Trunkline Nos. (075) 633-5691 to 93
Email Address: sdosancarloscity@gmail.com ; or sancarlos.city1@deped.gov.ph
Computer
Programming (.Net
Technology)
Quarter 2 – Module 1:
Creating forms that use the new
HTML5 input types
Introductory Message
Welcome to the PROGRAMMING .NET TECHNOLOGY Alternative Delivery Mode (ADM) In
this course you will gain basic HTML5/CSS3/JavaScript programming skills, and is an entry
point into both the Web application and Windows Store apps training paths. The course
focuses on using HTML5/CSS3/JavaScript to implement programming logic, define and use
variables, perform looping and branching, develop user interfaces, capture and validate user
input, store data, and create well-structured application. Further, this unit covers the skills,
knowledge, and attitude required in developing HTML5 Websites. Students will also learn to
develop advanced ASP.NET MVC applications using .NET Framework 4.5 tools and
technologies. The focus will be on coding activities that enhance the performance and
scalability of the Web site application. ASP.NET MVC will be introduced and compared with
Web Forms so that students know when each should/could be used.
This module consists of one (1) learning outcome. This learning outcome contains learning
activities supported by instruction sheets. Read the information sheets before you perform
the instruction, answer the self-check and perform the activities provided. To ascertain your
competence, your teacher will assess/ check if you have acquired the knowledge necessary
to perform the skill portion of the particular learning outcome.
In addition to the material in the main text, you will also see this box in the body of
the module:
ICON
Note 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. Furthermore, you are expected to encourage and assist the learners as they do the
tasks included in the module.
For the learner:
Welcome to the Grade 12 Alternative Delivery Mode (ADM) Title)
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 resource while being an active learner.
This module has the following parts and corresponding icons:
This will give you an idea of the skills or
What I Need to
Know competencies you are expected to learn in the
module.
This part includes an activity that aims to
What I Know check what you already know about the
lesson to take. If you get all the answers
correct (100%), you may decide to skip this
module.
This is a brief drill or review to help you link
What’s In the current lesson with the previous one.
In this portion, the new lesson will be
What’s New introduced to you in various ways such as a
story, a song, a poem, a problem opener, an
activity or a situation.
This section provides a brief discussion of the
What is It lesson. This aims to help you discover and
understand new concepts and skills.
This comprises activities for independent
What’s More practice to solidify your understanding and
skills of the topic. You may check the
answers to the exercises using the Answer
Key at the end of the module.
This includes questions or blank
What I Have
Learned sentence/paragraph to be filled in to process
what you learned from the lesson.
This section provides an activity which will
What I Can Do help you transfer your new knowledge or skill
into real life situations or concerns.
This is a task which aims to evaluate your
Assessment level of mastery in achieving the learning
competency.
In this portion, another activity will be given
Additional
Activities to you to enrich your knowledge or skill of the
lesson learned. This also tends retention of
learned concepts.
This contains answers to all activities in the
Answer Key module.
At the end of this module you will also find:
References This is a list of all sources used in developing
this module.
What I Need to Know
Objectives
• Create HTML5 document using advanced techniques with JavaScript and CSS3 (TLE_ICTP.NET
11-12PPHJC-IIj-IIIa-d-30)
What I Know
Pre test
A. Multiple Choices. Directions: Choose the best answer and write only the letter on the space
provided. If none of the choices is correct, write the answer on the space provided. (1 point each)
_________ 1. A single-line text input but it masks the character as soon as a user enters it. They are
also created using HTMl <input> tag.
A. Password input controls C. Single-line text input controls
B. Multi-line text input controls D. Checkbox Control
_________ 2. This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
A. Password input controls C. Single-line text input controls
B. Multi-line text input controls D. Checkbox Control
_________ 3. This control is used for items that require only one line of user input, such as search
boxes or names. They are created using HTML <input> tag.
A. Password input controls C. Single-line text input controls
B. Multi-line text input controls D. Checkbox Control
_________ 4. It used when out of many options, just one option is required to be selected. They are
also created using HTML <input> tag but type attribute is set to radio.
A. Radio Button Control C. Clickable Buttons
B. Select Box Controls D. File Select boxes
_________ 5. It also called drop down box which provides option to list down various options in the
form of drop down list, from where a user can select one or more options.
A. Radio Button Control C. Clickable Buttons
B. Select Box Controls D. File Select boxes
7
Creating forms that use the
new HTML5 input types
What’s In
HTML Forms are required, when you want to collect some data from the site visitor.
For example, during user registration you would like to collect information such as name, email
address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
What’s New
Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes −
8
HTML Form Controls
There are different types of form controls that you can use to collect data using HTML form −
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button
What is It
Text Input Controls
There are three types of text input used on forms −
Single-line text input controls − This control is used for items that require only one line of user
input, such as search boxes or names. They are created using HTML <input> tag.
9
Password input controls − This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTMl <input> tag.
Multi-line text input controls − This is used when the user is required to give details that may
be longer than a single sentence. Multi-line input controls are created using HTML <textarea>
tag.
Single-line text input controls
This control is used for items that require only one line of user input, such as search boxes or
names. They are created using HTML <input> tag.\
Example
Here is a basic example of a single-line text input used to take first name and last name –
10
Password input controls
This is also a single-line text input but it masks the character as soon as a user enters it. They
are also created using HTML <input>tag but type attribute is set to password.
Example
Here is a basic example of a single-line password input used to take user password −
11
Multiple-Line Text Input Controls
This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
Example
Here is a basic example of a multi-line text input used to take item description −
12
13
What’s More
Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox..
Example
Here is an example HTML code for a form with two checkboxes – Example
14
Radio Button Control
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 but type attribute is set to radio.
Example
Here is example HTML code for a form with two radio buttons –
15
Select Box Control
A select box, also called drop down box which provides option to list down various options in
the form of drop down list, from where a user can select one or more options.
Example
Here is example HTML code for a form with one drop down box
16
File Upload Box
If you want to allow a user to upload a file to your web site, you will need to use a file upload
box, also known as a file select box. This is also created using the <input> element but type
attribute is set to file.
Example
Here is example HTML code for a form with one file upload box −
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input>tag by setting its type attribute to button. The type attribute can take the
following values −
17
Example
Here is example HTML code for a form with three types of buttons –
18
Hidden Form Controls
Hidden form controls are used to hide data inside the page which later on can be pushed to the
server. This control hides inside the code and does not appear on the actual page. For example,
following hidden form is being used to keep current page number. When a user will click next
page then the value of hidden control will be sent to the web server and there it will decide which
page will be displayed next based on the passed current page.
Example
Here is example HTML code to show the usage of hidden control −
19
What I Have Learned
Directions:
Choose the best answer and write only the letter on the space provided. If none of the choices is
correct, write the answer on the space provided. (1 point each)
_________ 1. A single-line text input but it masks the character as soon as a user enters it. They are
also created using HTMl <input> tag.
C. Password input controls C. Single-line text input controls
D. Multi-line text input controls D. Checkbox Control
_________ 2. This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
C. Password input controls C. Single-line text input controls
D. Multi-line text input controls D. Checkbox Control
_________ 3. This control is used for items that require only one line of user input, such as search
boxes or names. They are created using HTML <input> tag.
C. Password input controls C. Single-line text input controls
D. Multi-line text input controls D. Checkbox Control
_________ 4. It used when out of many options, just one option is required to be selected. They are
also created using HTML <input> tag but type attribute is set to radio.
C. Radio Button Control C. Clickable Buttons
D. Select Box Controls D. File Select boxes
_________ 5. It also called drop down box which provides option to list down various options in the
form of drop down list, from where a user can select one or more options.
C. Radio Button Control C. Clickable Buttons
D. Select Box Controls D. File Select boxes
20
Assessment
Application. Complete the following form.
1.
2.
References
• https://www.w3schools.com
• https://www.tutorialspoint.com/html/html_forms.htm
21
