HTML5

FORMS
Lesson 13
LESSON OBJECTIVES

01 Understand the 03 Write the HTML for

importance of forms basic web form
in a web page elements

Describe the
02 potential uses of
web page forms
IMPORTANCE OF A FORM
WEBSITE DESCRIPTION
1.
2.
3.
4.
5.
WHAT IS A FORM?
▪ a form is a formatted
document containing
blank fields that users
can fill in with data.
▪ It begins with the
opening <form> tag and
ends with the closing
</form> tag
WHAT IS A FORM?
▪ It is made up of one or
more fields that will
allow the user to enter
information such as text
fields, text areas
fields, drop-down menus,
radio buttons,
check-boxes, etc.
▪ A form is a block level
element in HTML
FORM ATTRIBUTES

▪ action
• Backend script ready to process your passed data
• target
• Specify the target window or frame where the
result of the script will be displayed. It takes
values like _blank, _self, _parent etc.
FORM ATTRIBUTES
▪ method
• Method to be used to upload data. The most
frequently used are GET and POST methods.
• GET - This will specify that the form data will
appear on the address bar of the page where the
form is submitted.
• POST - This post method will send your data to
the serve in two steps. The browser will first
contact the server, and after the contact is
made, it will send the information back.
FORM OUTLINE

▪ <fieldset>
• You use the <fieldset> tag to group related
elements (controls and labels) in a web form by
drawing a box around them.
• It usually contains elements like legend, label
and inputs.
FORM OUTLINE

▪ <legend >
• You use the <legend> tag to define captions for
fieldset elements.
• This way it can also be used as a way to group
elements.
FORM OUTLINE

▪ <label>
• The <label> tag gives a definition to several
elements.
FORM OUTLINE
• You should always link the <label> tag to an
<input> element because:
• A user can focus on the input by clicking the
label
• When the input is focused, screen readers read out
the label to help differently-abled users.
• For checkboxes, especially on mobile, users who
aren't able to easily click on smaller items can
click on the label to toggle the checkbox on.
HOW TO USE PLACEHOLDER TEXT
▪ You use placeholder text within input fields,
and it's only removed when the input field is
focused or filled.
▪ Usually, placeholder text has a lighter font
color compared to the color of the input
labels and values.
▪ You'll mostly use placeholders to give a user
further insight as to what to fill out in a
form.
HOW TO USE FOCUS

▪ Initially, users had to click within the first

input box in a form in order to start filling
it out.
▪ But HTML5 lets web developers place emphasis
on the inputs users should interact with
first.
HOW TO USE FOCUS

▪ Autofocus is an attribute that you can add on

an <input> or <textarea> element for this
purpose.
▪ It's an important accessibility feature too
because it makes life easier for people who
use screen readers, for example
INPUT ELEMENT
▪ The <input> tag specifies an input field where
the user can enter data
▪ This element is a stand-alone tag that needs
no closing tag
▪ It is used within a <form> element to declare
input controls that will allow the user to
input data
▪ There can be a number of attributes that you
can tag along with the input element
NAME ATTRIBUTE
▪ Use the name attribute to identify the data
the user enters with the control.
▪ If you submit the form, this name is included
in the request.
▪ Say that you named a form control mountain and
the user entered Gutenberg, the request
includes this information as
mountain=Gutenberg.
TYPE ATTRIBUTE

▪ The type attribute will specify the type of

<input> element to display
▪ An input field can vary in a number of ways,
depending on the type attribute
ATTRIBUTE VALUES
VALUE DESCRIPTION
Default. Defines a single-line
Text
text field
Checkbox Defines a checkbox
Radio Defines a radio button
Hidden Defines a hidden input field
Password Defines a password field
Submit Defines a submit button
TEXT INPUT

▪ This is the most basic type of form input

where users can enter data
TEXT INPUT (EXAMPLE)

OUTPUT
COMPONENTS (TEXT INPUT)
▪ label - is used to label a control
▪ type attribute - is where you specify what
kind of control you can set to the <input>
element
▪ name attribute - can be used to identify which
piece of data comes from a given control.
▪ Id attribute - is used to distinguish between
controls on the page. Its purpose is to give
the label a referral point
ALLOW MULTIPLE LINES OF TEXT

▪ Say, you need a field where a user can write a

comment. For this, wouldn't it be great if
they can enter multiple lines of text? This is
the purpose of the <textarea> element.
▪ The <textarea> tag defines a multi-line text
input control.
TEXTAREA (EXAMPLE)

OUTPUT
PICK FROM A LIST OF OPTIONS
▪ How do you give users a list of options to
select from? You can use a <select> element to
achieve this.
▪ The <select> element is used to create a
drop-down list.
▪ The <option> tags inside the <select> element
define the available options in the drop-down
list.
▪ With the selected attribute you can pre-select
one option.
SELECT (EXAMPLE)

OUTPUT
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.
CHECKBOX (EXAMPLE)

OUTPUT
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
RADIO BUTTON (EXAMPLE)

OUTPUT
SUBMITTING A FORM
▪ After learning how to add form controls, and
group them, you may wonder how a user can
submit a form?
▪ The first option is to use a <button> element.
▪ After a user clicks the Submit button, the
browser makes a request to the URL specified
in the <form> element's action attribute with
all data from the form controls.
DESIGNING SIGN UP
▪ Design your own Sign Up web page
▪ Your page should include the following
elements:
❑ Text input
❑ Radio button
❑ Check box
❑ Text area
❑ Select
❑ Submit Button
▪ Label the following elements
Text Input

Radio button
Select

Text Area
Check box
Submit Button