0% found this document useful (0 votes)
9 views30 pages

Lesson 7

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views30 pages

Lesson 7

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

PROCESSING

ONLINE FORMS
ONLINE FORMS

■Are webpages purposely


designed for gathering
information on the
internet.
■An HTML form is used to collect
user input. The user input is most
often sent to a server for processing.
The <form> Element
The HTML <form> element
is used to create an HTML
form for user input:
The <form> element is a
container for different types of
input elements, such as: text
fields, checkboxes, radio
buttons, submit buttons, etc.
Definition and Usage

■ The <input> tag specifies an input field


where the user can enter data.
■ The <input> element is the most
important form element.
■ The <input> element can be displayed in
several ways, depending on the type
attribute.
The different input types are as follows:
•<input type="password">
•<input type="button"> •<input type="radio">
•<input type="checkbox"> •<input type="range">
•<input type="color"> •<input type="reset">
•<input type="date"> •<input type="search">
•<input type="datetime- •<input type="submit">
local"> •<input type="tel">
•<input type="email"> •<input
•<input type="file">
•<input type="text"> (default
type="hidden">
•<input value)
type="image"> •<input type="time">
•<input type="month"> •<input type="url">
•<input type="number"> •<input type="week">
HTML <input type="radio">
The <input type="radio"> defines a
radio button.
Radio buttons are normally presented in
radio groups (a collection of radio
buttons describing a set of related
options). Only one radio button in a
group can be selected at the same time.
Note: The radio group must have share the
same name (the value of the name attribute)
to be treated as a group. Once the radio
group is created, selecting any radio button in
that group automatically deselects any other
selected radio button in the same group. You
can have as many radio groups on a page as
you want, as long as each group has its own
name.
Note: The value attribute defines
the unique value associated with
each radio button. The value is
not shown to the user, but is the
value that is sent to the server on
"submit" to identify which radio
button that was selected.
Checkboxes
The <input type="checkbox"> defines
a checkbox.

Checkboxes let a user select ZERO or MORE


options of a limited number of choices.
The Submit Button
The <input type="submit"> defines a
button for submitting the form data to a
form-handler.
The form-handler is typically a file on the
server with a script for processing input
data.
The form-handler is specified in the
form's action attribute.
TEXT AREAS
The <textarea> tag defines a multi-line text
input control.
The <textarea> element is often used in a
form, to collect user inputs like comments or
reviews.
A text area can hold an unlimited number of
characters, and the text renders in a fixed-
width font (usually Courier).
The size of a text area is specified by
the cols and rows attributes (or with CSS).
SELECT FIELDS
The <select> element is used to create a drop-down
list.
The <select> element is most often used in a form, to
collect user input.
The name attribute is needed to reference the form
data after the form is submitted (if you omit
the name attribute, no data from the drop-down list
will be submitted).
The id attribute is needed to associate the drop-down
list with a label.
The <option> tags inside the <select> element define
the available options in the drop-down list.
SUBMIT QUERY AND RESET
BUTTONS

The type attribute specifies the type of


button.
Tip: Always specify the type attribute
for the <button> element. Different
browsers may use different default
types for the <button> element.
PROCESSING FORMS

The method attribute specifies how to send


form-data (the form-data is sent to the page
specified in the action attribute).

The form-data can be sent as URL variables


(with method="get") or as HTTP post transaction
(with method="post").
THANK
YOU

You might also like