HTML FORMS

Developed by Zahid Javed

HTML DIFFERENT FORMS SHAPE
 HTML FORMS
Definition:-
 HTML Forms are required, when you want to
collect some data from the site visitor. For example,
during user registration you would like to collect
information such as name, email address, credit card,
etc.
 A form will take input from the site visitor and then
will post it to a back-end application such as CGI, ASP
Script or PHP script etc. The back-end application will
perform required processing on the passed data based
on defined business logic inside the application.
 There are various form elements available like text
fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.
 HTML FORMS
Uses Of Forms:-
1. Educational Sites: Forms are used to collect name,
address, emails and other information by the
educational websites.
 HTML FORMS
2. Online Orders: Many websites use to get online
orders from the visitors. The user can send the order by
entering information in the form.
 HTML FORMS
3. Feedback: Many websites use form to get feedback
from the users. The feedback of the visitors is an
important source for improving the services or products of
a company.
 HTML FORMS
 An HTML form is used to collect user input. The user
input can then be sent to a server for processing.

The HTML <form> tag is used to create an HTML form and it has following
syntax:

<form name=“Form1” action="Script URL“ method="GET|POST">

form elements like input, textarea etc.
</form>
 FORM ELEMENTS
A form consist of different form elements. Some important
form elements are as follow:
i) Text box
ii) List box
iii) Radio Button
iv) Checkbox
v) Button
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

vi) Text Area

vii) Password field
HTML FORM ATTRIBUTES
 THE ACTION ATTRIBUTE
 The action attribute defines the action to be performed
when the form is submitted.

 Normally, the form data is sent to a web page on the

server when the user clicks on the submit button.

In the example above, the form data is sent to a page on

the server called "/action_page.php". This page contains
a server-side script that handles the form data:

If the action attribute is omitted, the

action is set to the current page.
 THE METHOD ATTRIBUTE
 The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the form
data:
 HTTP REQUEST METHODS
What is HTTP?
 The Hypertext Transfer Protocol (HTTP) is designed to
enable communications between clients and servers.

 HTTP works as a request-response protocol between a

client and server.

 Example: A client (browser) sends an HTTP request to

the server; then the server returns a response to the
client. The response contains status information about
the request and may also contain the requested
content.
 HTTPS
 HTTP REQUEST METHODS
 HTTP Methods
1. GET
2. POST
3. PUT
4. HEAD
5. DELETE
6. PATCH
7. OPTIONS

The two most common HTTP methods are: GET

and POST.
 WHEN TO USE GET?
 The default method when submitting form data is
GET.
 However, when GET is used, the submitted form data
will be visible in the page address field:

Note: GET must NOT be used when sending

sensitive information! GET is best suited for
short, non-sensitive, amounts of data, because
it has size limitations too.
 WHEN TO USE GET?
 Some other notes on GET requests:
1. GET requests can be cached
2. GET requests remain in the browser history
3. GET requests can be bookmarked
4. GET requests should never be used when dealing with
sensitive data
5. GET requests have length restrictions
6. GET requests are only used to request data (not
modify)
 WHEN TO USE POST?

 Always use POST if the form data contains sensitive or

personal information. The POST method does not
display the submitted form data in the page address
field.
 POST has no size limitations, and can be used to send
large amounts of data.
 WHEN TO USE POST?

 Some other notes on POST requests:

 POST requests are never cached

 POST requests do not remain in the browser history

 POST requests cannot be bookmarked

 POST requests have no restrictions on data length

WHEN TO USE POST?
 ACTION Attribute
<FORM> tag is used to create a form in a web page.
All form elements are inserted within <FORM> Start
tag and </FORM> tag indicates the end of form. A
web page may contain many forms.

When u send email to another person then

Example
<FORM NAME=“Form1” METHOD=“post”
ACTION=“mailto:[email protected]”>
</FORM>
 HTML FORM CONTROLS / ELEMENTS
There are different types of form controls that
you can use to collect data using HTML form −
1. Text Input Controls
2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls
5. File Select boxes
6. Hidden Controls
7. Clickable Buttons
8. Submit and Reset Button
 TEXT INPUT CONTROLS
 There are three types of text input used on forms:
 Single-line text input controls - This control is used for
items that require only one line of user input, such as
search boxes or names. They are created using HTML
<input> tag.

 Password input controls - This is also a single-line text

input but it masks the character as soon as a user enters it.
They are also created using HTML <input> tag.

 Multi-line text input controls - This is used when the

user is required to give details that may be longer than a
single sentence. Multi-line input controls are created using
HTML <textarea> tag.
 TEXT INPUT CONTROLS
1- Single-line text input controls

This control is used for items that require only one line
of user input, such as search boxes or names. They are
created using HTML <input> tag.
 TEXT INPUT CONTROLS EXAMPLE
<!DOCTYPE html>
<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
Link
</html>
 TEXT INPUT CONTROLS ATTRIBUTES
Sr.No Attribute & Description
1 type
Indicates the type of input control and for text input control it will be
set to text.
2 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.
3 value
This can be used to provide an initial value inside the control.
4 size
Allows to specify the width of the text-input control in terms of
characters.
5 maxlength
Allows to specify the maximum number of characters a user can
enter into the text box.
 PASSWORD INPUT CONTROLS
2- Password input controls

This is also a single-line text input but it masks the

character as soon as a user enters it. They are also
created using HTML <input>tag but type attribute is set
to password. Each character inserted in this field
appears as *. The attributes of password field are same
as text field.
PASSWORD INPUT CONTROLS

<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
Link
</html>
 PASSWORD INPUT CONTROLS
Sr.No Attribute & Description
1 type
Indicates the type of input control and for password input control it
will be set to password.
2 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.
3 value
This can be used to provide an initial value inside the control.
4 size
Allows to specify the width of the text-input control in terms of
characters.
5 maxlength
Allows to specify the maximum number of characters a user can
enter into the text box.
Password Field:-
3- MULTIPLE-LINE TEXT INPUT CONTROLS
Text Area Field:-
Text Area is similar to text box but it may consist of
multiple rows. It is used to get lengthy input from the user
like comments and suggestions etc.<TEXTAREA>tag is
used for it. Spell Check is default value is true.

Example:-

<h3> Using Textarea in Form</h3>

<form name="form1">
Enter Your Comment: <p>
<textarea cols="25 rows=3">
</textarea> Link
Text Area Field:-
Text Area Field:-
Exercise No.1
Link
Exercise No.2
Link
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.
 Attributes of <checkbox> tag:
 CHECKBOX CONTROL EXAMPLE

<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on“checked>
Physics
</form>
</body>
</html> Link
Radio Button:-
Radio Buttons are used when user has to choose
one option from multiple choices.

Attributes:-
➢ Name: It specifies the name of radio button.

➢ Value: It refers to the value attached with the radio

button.

➢ Checked: It specifies that the radio button is selected

by default.

Note: the name attribute must same value

Radio Button:-
Example:-
Select Your Gender:
<input type="radio" name="gender" value="Male" >Male
<input type="radio" name="gender" value="Female" >Female

Link
Note: Name must be same
Exercise No.3
Link
Select Field:-
Select field is used to provide predefined list of items to
the user the user can choose one or multiple option from the
list.

Attribute:-

➢ Name: It specifies the name of the radio button.

➢ Multiple: It specifies that multiple option can be selected at the

same time by using CNTRL key.

➢ Selected: It specifies that the current option is selected.

Example of Selected Field:-

<html>
<body>
Choose Your City:
<select name="City">
<option value="Islamabad" selected>Islamabad
<option value="Lahore">Lahore
<option value="Faisalabad">Faisalabad
<option value="Quetta">Quetta
</select>
</body>
<html>

Link
Example of Selected Field:-

<!DOCTYPE html>
<html>
<body>

<select>
<option value="UAF">UAF</option>
<option value="NTU">NTU</option>
<option value="MIU">MIU</option>
<option value="GCUF" selected>GCUF</option>
</select>

</body>
</html>

Link
BUTTON CONTROLS

 There are various ways in HTML to create clickable

buttons.

 You can also create a clickable button using <input>

as well as <button> tag by setting its type attribute to
button.

 The type attribute can take the following

VALUES
EXAMPLE
<html>
<head>
<title>Buttons</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton"
src=“./images/GClogo.jpg" />
</form>
</body>
Link
</html>
EXAMPLE
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
Submit Button:-
Submit Button:-
Submit button is a predefined button. It is used to process the
form data. When the user clicked this button, it process the
form data according to the value specified in ACTION.
<BUTTON> tag is used for it.

Example:-
<INPUT TYPE=“submit”>

Reset Button:-
Reset Button is predefined button. It is used to
reset the form.<BUTTON> tag is used for it.

Example:-
<INPUT TYPE=“reset”>
Link
Button:-
Button is used in forms to process the form
data. <BUTTON> tag is used to create a button in
the form.

Attribute:-

➢ Name: It specifies the name of the button.

➢ Value: it specifies the caption of the button.

Example:-
<h3> Using button in the form</h3>
<Form name="form1">
<input type="button" value="Click Here for HTML" >
<input type="button" value="Click Here for CSS" > Text
</Form>
File Upload Field:-
File upload field is used to get files from the user in a
form. The visitors can select a file from the disk using
this field. <FILE> tag is used to create file upload
field.

Example:-

<h3> Using button in the form</h3>

<Form name="form1">
<input type="file" >
</Form>
Link
GROUPING FORM DATA WITH <FIELDSET>
 The <fieldset> element is used to group related
data in a form.
 The <legend> element defines a caption for the
<fieldset> element.

Link
 HTML <INPUT> PLACEHOLDER ATTRIBUTE
 The placeholder attribute specifies a short hint that
describes the expected value of an input field (e.g. a
sample value or a short description of the expected
format).
 The short hint is displayed in the input field before the
user enters a value.
 Note: The placeholder attribute works with the
following input types: text, search, url, tel, email, and
password.

Link
 HTML <BUTTON> FORM ATTRIBUTE
 The form attribute specifies one or more forms the
button belongs to.

Link
 HTML TYPE=“IMAGE”
 The form attribute specifies one or more forms the
button belongs to.

Link
 THE MIN AND MAX ATTRIBUTES
 The min and max attributes specify the minimum and
maximum values for an <input> element.
 The min and max attributes work with the following
input types: number, range, date, datetime-local,
month, time and week.
The step Attribute
 The step attribute specifies the legal number intervals
for an <input> element.
 Example: if step="3", legal numbers could be -3, 0, 3, 6,
etc.

Link
 THE REQUIRED ATTRIBUTE
 The required attribute specifies that an input field
must be filled out before submitting the form.
 The required attribute works with the following input
types: text, search, url, tel, email, password, date
pickers, number, checkbox, radio, and file.

Link
 THE MULTIPLE ATTRIBUTE
 The multiple attribute specifies that the user is
allowed to enter more than one value in the <input>
element.
 The multiple attribute works with the following input
types: email, and file.

Link
 THE PATTERN ATTRIBUTE
 The pattern attribute specifies a regular expression
that the <input> element's value is checked against.
 The pattern attribute works with the following input
types: text, search, url, tel, email, and password.
 Tip: Use the global title attribute to describe the
pattern to help the user.

Link
PASSWORD PATTERN

Pattern=".{8,}"
 PASSWORD PATTERN

pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
 EMAIL PATTERN

Pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
 URL PATTERN

Pattern=“https?://.+" title="Include http://$”

 REFERENCE SITE

https://www.w3schools.com/tags/att_input_pattern.asp
 REFERENCE SITE

https://webdesign.tutsplus.com/tutorials/html5-form-
validation-with-the-pattern-attribute--cms-25145
 REFERENCE SITE

http://html5pattern.com/Names
 THE FORMTARGET ATTRIBUTE
 The formtarget attribute specifies a name or a
keyword that indicates where to display the response
that is received after submitting the form.
 The formtarget attribute overrides the target attribute
of the <form> element.
 The formtarget attribute can be used with
type="submit" and type="image".

Link
 THE FORMNOVALIDATE ATTRIBUTE
 The formnovalidate attribute overrides the
novalidate attribute of the <form> element.
 The formnovalidate attribute can be used with
type="submit".

Link
 INPUT TYPE BUTTON ALERT
<input type="button"> defines a button:

 <!DOCTYPE html>
 <html>
 <body>

 <input type="button" onclick="alert('Hello World!')"

value="Click Me!">

 </body>
 </html>

Link