SHS

GRADE
11

COMPUTER PROGRAMMING .NET 1

QUARTER 3
SELF-LEARNING KIT 3
PERFORM COMPUTER OPERATIONS

Name: _______________________________________________________________________

Grade Level & Section: __________________________________________________________

Subject Teacher: _______________________________________________________________

 OBJECTIVES:

After this lesson, you will be able to answer the following questions:
• What is an HTML Form?
• What is an Input Element?
• What are the different Input Elements?

LESSON PROPER

What is an HTML FORM?

• An HTML form is used to collect user input. Typically, user input is sent to a server or
database for processing.

• The <form> element is a container for different types of <input> elements, such as:

• text fields
• Checkboxes
• radio buttons
• submit buttons
• etc.…
Example

<form action=“process.php” method=“post”>

<Input> elements here…..
</form>

The <input> Element

An <input> element can be displayed in many ways, depending on the type attribute.

There are many ways to display <input> but in this lesson

we will only use
Text, password, reset, submit, color, file and number

Page | 1
Page | 2
Other input types

<form>
Username: <br>
<input type="text“>
</form>

<form>
Username: <br>
<input type="text“><br>
Password: <br>
<input type="password“><br>

</form>

<form>
Password: <br>
<input type="password”>
<br>
<input type="submit”>
</form> Page | 3
 <form>
Last name: <br>
<input type="text”>
<br>
<input type="submit”>
<input type="reset”>
</form>

<form>
Select your Favorite color:
<input type="color”>
<input type="submit”>

</form>

Page | 4
 <form>
Select a file:
<input type="file”>
</br>
<input type="submit”>

</form>

<form>
Quantity (between 1 and 5)
<input type="number”> </br>
<input type="submit”>

</form>

REFERENCES:

https://www.w3schools.com/tags/tag_img.asp
https://w3schools.com/html/forms Page | 5
 ASSESMENT A

Encircle the correct answer.

1 This element is the container for different types of <input> elements.

A <form>

B <input>

C <block>

D <iframe>

2 What element will create a password field?

A <h1>Password</h1> <input type="text">

B <h1>Password</h1> <input type="password">

C <h1>Password</h1> <input type="reset">

D <h1>Password</h1> <input type="submit">

3 What element will create a textbox?

A <h1>Username</h1> <input type="text">

B <h1>Username</h1> <input type="password">

C <h1>Username</h1> <input type="reset">

D <h1>Username</h1><input type="submit">

4 What element will create a reset button?

A <input type="text" value="reset">

B <input type="password" value="reset">

C <input type="reset" value="reset">

D <input type="submit" value="reset">

Page | 6
5 What element will create a submit button?

A <input type="text" value="submit">

B <input type="password" value="submit">

C <input type="reset" value="submit">

D <input type="submit" value="submit">

6 What element will create an input for color?

A <input type="color" name="color">

B <input type="password" name="color">

C <input type="reset" name="color">

D <input type="submit" name="color">

7 What element will create an input for files?

A <input type="files" name="upload">

B <input type="file" name="file">

C <input type="reset" name="upload">

D <input type="submit" name="file">

8 What element will create an input for numbers?

A <input type="color" name="number">

B <input type="number" name="color">

C <input type="reset" name="numbers">

D <input type="submit" name="file">

Page | 7
9 I will create a webpage that will ask a favorite color. What should I choose?

A <input type="color" name="color">

B <input type="number" name="color">

C <input type="reset" name="color">

D <input type="submit" name="favorite">

10 I will create a webpage that will ask a password. What should I choose?

A <input type="color" name="pass">

B <input type="number" name="password">

C <input type="password" name="pass">

D <input type="submit" name="password">

Page | 8
 ASSESMENT B

Build you own code based on the given task and situation.

EXAMPLE
• Create a webpage with input type text and password.

EXAMPLE ANSWER

<!DOCTYPE html>
<html>
<body>
<form>
<input type=”text”>
<input type=”password”>

</form>
</body>
</html>

Page | 9
1
• Design a webpage with the following:
• 1 input type password
• 1 input type text
• 1 input type number
• 1 reset button
• 1 submit button

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________
Page | 10
________________________________________________________________________________

________________________________________________________________________________
2
• Design a webpage with the following:
• 1 text box for username
• 1 text box for password
• 1 input for file upload
• 1 input for color
• 1 reset button
• 1 submit button

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

Page | 11
________________________________________________________________________________

________________________________________________________________________________