Scribd
Upload
12 views12 pages

Comprog1 - SLK Q3 4

The document provides a lesson on form elements in HTML, including the purpose of attributes like name, id, and value. It explains elements like <label>, <textarea>, and <select> and provides examples of how to use them in forms. Students are then given an assessment to test their understanding of how form data is sent when submitted. The document covers key form elements in HTML like <input>, <label>, <textarea>, and <select> and explains attributes like name, id, and value. Examples are given for proper usage and students are given multiple choice and coding practice questions to assess their comprehension. Students learn about common form elements in HTML and

Uploaded by

emmanuel sim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views12 pages

Comprog1 - SLK Q3 4

The document provides a lesson on form elements in HTML, including the purpose of attributes like name, id, and value. It explains elements like <label>, <textarea>, and <select> and provides examples of how to use them in forms. Students are then given an assessment to test their understanding of how form data is sent when submitted. The document covers key form elements in HTML like <input>, <label>, <textarea>, and <select> and explains attributes like name, id, and value. Examples are given for proper usage and students are given multiple choice and coding practice questions to assess their comprehension. Students learn about common form elements in HTML and

Uploaded by

emmanuel sim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

SHS

GRADE
11

COMPUTER PROGRAMMING .NET 1


QUARTER 3
SELF-LEARNING KIT 4
PERFORM COMPUTER OPERATIONS

Name: _______________________________________________________________________

Grade Level & Section: __________________________________________________________

Subject Teacher: _______________________________________________________________


OBJECTIVES:

After this lesson, you will be able to answer the following questions:
• What is name, id and value attribute?
• What are the other form elements?
• What is <label>, <textarea> and <select> element?

LESSON PROPER

What is the purpose of the attributes name, id and value?


Let’s start with the difference of id and name attribute.
• We use id to address a particular html element, for CSS or JavaScript.
• We use name to address a particular html element, for its content or data, for example to
target an iframe we must give it a name.

In forms, name corresponds to the form element and identify what is posted back to the server

First Name:<br>
<input type="text" id=“fname" name=“name"><br>
Last Name:<br>

Page | 1
First Name:<br>
<input type="text" id=“fname" name=“name"><br>
Last Name:<br>

Page | 2
What is the purpose value attribute?
You can change the values of input type submit and reset to change the text inside the button.

The <label> Element


• The <label> tag defines a label for many form elements.
• The <label> element is useful for screen-reader users because the screen-reader will read
out loud the label when the user focus on the input element.
• The <label> element also help users who have difficulty clicking on very small regions (such
as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.

<!DOCTYPE html>
<html>
<body>
<form action="send.php" method=”post”>
<h2> <label for=”fname”> Firstname: </label> </h2>
<input type="text" id="fname" name=“TVL"><br>
<br><br>
</form>
</body>
</html> Page | 3
The <textarea> Element
• The <textarea> element defines a multi-line input field (a text area)
• The rows attribute specifies the visible number of lines (number of rows) in a text area.
• The cols attribute specifies the visible width (number of columns) of a text area.

Page | 4
The <select> Element
• The <select> element defines a drop-down list.
• To add options inside the drop-down list box, use the <option> element.
• Add the value attribute in every <option> element as it will be the value when the option is
selected.

<select name=”strand”>
<option value=”abm”>ABM</option>
<option value=”tvl”>TVL</option>
<option value=”gas”>GAS</option>
<option value=”humss”>HUMSS</option>
</select>

REFERENCES:

https://www.w3schools.com/tags/tag_img.asp
https://w3schools.com/html/forms

Page | 5
ASSESMENT A

Encircle the correct answer.

1. The user typed “DIAMOND” in the textbox, what would be the value of data that is
sent if the form is submitted?

A section=DIAMOND

B text= DIAMOND

C fname=DIAMOND

D submit=DIAMOND

2. The user typed “RIZAL” in the textbox, what would be the value of data that is sent if
the form is submitted?

Page | 6
A name= RIZAL

B text= RIZAL

C section= RIZAL

D submit=RIZAL

3. The user typed “PLARIDEL” in the textbox, what would be the value of data that is
sent if the form is submitted?

A section=PLARIDEL

B campus= PLARIDEL

C text=PLARIDEL

D branch=PLARIDEL

4. The user typed “SAN JOSE” in the textbox, what would be the value of data that is
sent if the form is submitted?

Page | 7
A campus= SAN JOSE

B text= SAN JOSE

C branch=SAN JOSE

D id= SAN JOSE

5. The user typed “MUZON” in the textbox, what would be the value of data that is sent
if the form is submitted?

A branch=MUZON

B text=MUZON

C campus=MUZON

D id=MUZON

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 method=”get”>
<input type=”text”>
<input type=”password”>

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

Page | 9
1
• Design a webpage with the following:
• 1 Textarea for comments with 40 rows and 25 columns
• Name your textarea as “comment”
• 1 reset button, change the text inside of the reset button to “Clear”
• 1 submit button, change the text inside of the submit button to “Send”

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________
Page | 10

________________________________________________________________________________
2
• Design a webpage with the following:
• 1 drop-down list box (select element) for strand selection
with 5 options, ABM - TVL - GAS - HUMSS - STEM
• Name your Dropdown list box as “Strand”
• 1 reset button
• 1 submit button

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________
Page | 11
________________________________________________________________________________

________________________________________________________________________________

You might also like