Scribd
Upload
258 views

Lec15 (HTML Forms)

This document discusses HTML forms and form elements. It begins with an introduction to HTML forms, noting that they provide a means to submit client information to a server. Common form attributes like action and method are described. The main form elements are then outlined, including text boxes, password fields, checkboxes, radio buttons, drop-down lists, text areas, submit and reset buttons. Examples are provided for each element.

Uploaded by

nadeemajeedch
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
258 views

Lec15 (HTML Forms)

This document discusses HTML forms and form elements. It begins with an introduction to HTML forms, noting that they provide a means to submit client information to a server. Common form attributes like action and method are described. The main form elements are then outlined, including text boxes, password fields, checkboxes, radio buttons, drop-down lists, text areas, submit and reset buttons. Examples are provided for each element.

Uploaded by

nadeemajeedch
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

HTML FORMS

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

Summary of the
previous lecture
Creating tables in HTML
Table attributes
Page lay-out using tables

Basharat Mahmood, Department of


Computer Science,CIIT,Islamabad,
Pakistan.

Outline
HTML FORMS
HTML FORM elements

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

1. HTML FORMS
Forms provide a means of submitting
information from the client to the server
HTML supports tags for creating forms,
however, it does not process the
information
Use server-side script to process form
information
Server-side script runs on the Web
server and receives data from a form and
uses it to perform a set of tasks
Basharat Mahmood, Department of
Computer
Science,CIIT,Islamabad,Pakistan.

1. HTML FORMS
This figure
shows how a
Web page form
interacts with a
CGI script.

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

1. HTML FORMS
<form> tag is used to start a form
</form> tag is used to end a form
Between <form> and </form>, form elements
are placed
We can declare a form as:
<form attributes>
form elements and layout tags
</form>

A single page can include several


different
forms, but you cannot nest one form
inside another
Basharat Mahmood, Department of
Computer
Science,CIIT,Islamabad,Pakistan.

Common Form Attributes:


action - gives the URL of the
application that is to receive and
process the forms data
method - sets the HTTP method
that the browser uses to send the
form's data to the server for
processing; Either POST or GET
name name of the form
Basharat Mahmood, Department of
Computer
Science,CIIT,Islamabad,Pakistan.

2. Form Elements

Textbox
Password Field
Hidden Field
Checkbox
Radio Button
Text Area
Select List
Submit Button
Reset Button
Basharat Mahmood, Department of
Computer
Science,CIIT,Islamabad,Pakistan.

2.1 Text box


<INPUT

TYPE=TEXT >

NAME
SIZE
VALUE
MAXLENGTH

<INPUT TYPE=TEXT NAME=NAME


SIZE=30 VALUE=ALI MAXLENGTH=15>

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

Start of the
form

label

Text box

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

10

value
label

Text
box

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

11

2.2 Password Field


<INPUT

TYPE=PASSWORD>

NAME
SIZE
VALUE
MAXLENGTH

<INPUT TYPE=PASSWORD NAME=NAME


VALUE=ALI MAXLENGTH=15>

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

SIZE=30

12

Type is
password

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

13

Typed characters are


hidden

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

14

2.3 Hidden Text Field


<INPUT

TYPE=HIDDEN>

NAME
VALUE
<INPUT TYPE=HIDDEN NAME=NAME VALUE=ALI
>

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

15

Type is
hidden
Basharat Mahmood, Department of
Computer
Science,CIIT,Islamabad,Pakistan.

16

Hidden field is not


visible

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

17

2.4 Checkbox
<INPUT

TYPE=CHECKBOX>

CHECKED
NAME
VALUE
<INPUT TYPE=CHECKBOX NAME=CHECK VALUE=
CHECKED>

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

18

label

Type
option
checked
Basharat Mahmood, Department of
Computer
Science,CIIT,Islamabad,Pakistan.

value

19

label
Options

Already
checked

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

20

2.5 Radio Buttons


<INPUT

TYPE=RADIO>

CHECKED
NAME
VALUE
<INPUT TYPE=RADIO NAME=RADIO VALUE=
CHECKED>MALE
<INPUT TYPE=RADIO NAME=RADIO VALUE=
>FEMALE

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

21

label

Option

type
Basharat Mahmood, Department of
Computer
Science,CIIT,Islamabad,Pakistan.

Same name
22

Already
checked

Radio Button

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

23

2.6 Select list


Drop down list:
Select
Name, size

Option
<SELECT name=name size=size>
<OPTION value=lahore>LAHORE</option>
<OPTION value=karachi>KARACH</option>
<OPTION value=islamabad>ISLAMABAD</option>
</SELECT>

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

24

List starts
options

Select ends

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

25

Select list with


options

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

26

2.7 Text area


Text-area
Rows
Cols
Name

<TEXTAREA rows=5 cols=5>


Default text
</TEXTAREA>

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

27

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

28

Text
area

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

29

2.8 File field


File-field
<input type=file name=filename>

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

30

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

31

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

32

2.9 Submit and Reset


buttons
Submit and Reset Buttons
<INPUT TYPE=SUBMIT
VALUE=SAVE>
<INPUT TYPE=RESET
VALUE=RESET>

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

33

Submit button

Reset button

Basharat Mahmood, Department of


Computer
Science,CIIT,Islamabad,Pakistan.

34

Reset

Submi
t
Basharat Mahmood, Department of
Computer
Science,CIIT,Islamabad,Pakistan.

35

Summary
Creating forms in HTML
Adding form elements

Basharat Mahmood, Department of


Computer Science,CIIT,Islamabad,
Pakistan.

36

References
Chapter 5, Beginning HTML,
XHTML,CSS, and JavaScript, by
Jon Duckett, Wiley Publishing;
2009, ISBN: 978-0-470-54070-1.

Basharat Mahmood, Department of


Computer Science, CIIT,
Islamabad, Pakistan.

37

You might also like