Week 7

COMPUT
SCIENCE
ER
By Jeric C. Calleja
 Pre-Test
1. WHAT HTML TAG IS USED TO CREATE
A FORM?
A) <form>
B) <input>
C) <div>
D) <section>
Pre-Test
2. WHICH ATTRIBUTE IS USED TO SPECIFY THE
HTTP METHOD FOR SENDING FORM DATA TO
THE SERVER?
A) method
B) action
C) type
D) submit
Pre-Test
3. WHAT TYPE OF INPUT FIELD IS USED FOR
ENTERING A SINGLE LINE OF TEXT?
A) text
B) password
C) checkbox
D) radio
Pre-Test
4. HOW CAN YOU CREATE A DROP-DOWN LIST
IN HTML?
A) <dropdown>
B) <select>
C) <list>
D) <options>
Pre-Test
5. WHAT ATTRIBUTE IS USED TO SPECIFY THE
MAXIMUM NUMBER OF CHARACTERS
ALLOWED IN A TEXT INPUT FIELD?
A) size
B) maxlength
C) limit
D) maxchars
 Objetives
1 • DEFINE THE PURPOSE OF
HTML FORMS IN WEB
DEVELOPMENT.

2 • IDENTIFY THE DIFFERENT

TAGS IN CREATING HTML
 HTML FORM
Form is used to collect user
input. The user input is most
often sent to a server for
processing.
Registra Request Orders
tion l i c a t i o n Form Form
form App
Form

Feedba
Form
ck Different
 <form>....</
form>
The <form> element is a
container for different types of
input elements, such as: text
fields, checkboxes, radio
buttons, submit buttons, etc.
 form attributes
action method
 form attributes
action values
Indicates where the Filename(path
information will be could be
submitted. included), URL
Ex:
<form action="sample.html"
 form attributes
method values
Indicates the method of post, get
submitting the information.
Ex:
<form action="sample.html"
method="post">
 method attributes
post value get
The post method is The get method is
used to send data to the used to request data
server to create a new from a specified
resource. resource.
 <label>
The <label> element in HTML is used to
associate a text label with a form
element, enhancing accessibility and user
experience.

<label for="username">Username:</label>
 The <input>
Element
The HTML <input> element is the most used
form element.
Ex:
<form action="sample.html" method="post">
<input …….>
 input attributes

type size checked

name value required

 type attribute
type- Indicates the type of input field.

type values
text checkbox date

radio submit password reset

 text
This creates a single-line
text input field where users
can enter text.

Ex:
<input type="text" name="username" >
 password
This creates a text input field, but the entered
text is masked for security (e.g., for password
entry).
<input type="password" name="password" >
 checkbox
This creates a checkbox that users can
check or uncheck.

<input type="checkbox" name="subscribe" >

 radio
Radio buttons are used when you want
users to select only one option from a
group of options.

<input type="radio" name="gender" value="male" >

<input type="radio" name="gender" value="female">

 submit
This creates a button that, when clicked,
submits the form data to the server.

<input type="submit" value="Submit" />

 reset
This creates a button that, when clicked,
resets the form fields to their default
values.

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

 date
This provides a date picker for selecting a
date.

<input type=“date" value=“calendar" >

 Dropdown list
The <select> element creates the dropdown list
alongside with <option>.
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>
Any Questions?
 Post-Test
1.What does the required attribute in an input field
do?

A) Specifies a required style for the input

B) Makes the input field mandatory before
submitting the form
C) Sets a default value for the input
D) Defines the input as read-only
 Post-Test
2. How can you group related radio buttons
together?

A) Using the <group> tag

B) Using the group attribute in each radio button
C) Assigning them the same name attribute
D) Wrapping them in a <div> tag
 Post-Test
3. Which attribute is used to provide a user-
readable description for the input field in a form?
A) description
B) info
C) label
D) alt
 Post-Test
4.What is the purpose of the <textarea> element in
HTML forms?

A) To create a password input field

B) To create a multi-line text input field
C) To define a submit button
D) To display a message box
 Post-Test
5. Which input type is used to create a checkbox?

A) check
B) checkbox
C) input
D) select
Thanks
!