web forms and html3

7/30/2019 Web Forms and HTML3

1/40

Web Forms and HTMLBy:HIRA KHAN

Copyright 2012 Hira Khan


2/40

What Is the World Wide Web?


The World Wide WebThe Web.

Its a network of computers

able to exchange text, graphics, and multimedia(videos, sounds, animation) information

via the Internet.

You can visit Web-connected computers

next door, at a nearby university,

halfway around the world.

Using either a dialup phone line or a much faster broadband (Ethernet, cable, or DSL

connection).

Think ofthe Web as the multimedia version of the Internet, and youll be right on the mark.


3/40

What is Hypertext?

The word hypertext is a type of text that contains hyperlinks (or

just links for short), which enable the reader to jump from one

hypertext page to another.

Hypertext gives readers the ability to choose their own path through

the material that interests them.

Example:

A book is designed to be read in sequence: Page 2 follows page 1, and so

on.

Sure, you can skip around, but books dont provide much help, beyond

including an index.

Computer-based hypertexts let readers jump around all they want.

The computer part is important because its hard to build a hypertext

system out of physical media, such as index cards or pieces of paper.

The Web is a giant computer-based hypermedia system, and youve

probably already done lots of jumping around from one page to

another on the Webits called Surfing.



4/40

Hypertext Markup Language(Html)

HTML is a language for describing how pages of text, graphics, and

other information are organized and linked together.

Or

HTML enables you to mark up text so that it can function ashypertext on the Web.

HTML and HTTP were both invented by Tim Berners-Lee.

The basic structure of an HTML document includes tags, which

surround content and apply meaning to it.

The html consist of Elements tags, attributes and values .



5/40

Elements And Tags

An element is a construct(made by combination) consisting (usually)of :

An opening tag,

some optional attributes and their respective values,

some content,

a closing tag. Elements can contain any number of further elements, which are, in

turn, made up of

tags,

attributes,

values, content.

The opening tag can contain multiple attributes, but it cannot contain

other elements or tags, while the closing tag cannot contain anything but

itself.

My content

Angle Brackets

Content

TagAttribute

Value



6/40

Elements Continued.. Not all elements have closing tags.

The above said elements are called as self-closing elements, empty

elements, or replaced elements where as the elements with ending

and closing tags are called as paired, container tags.

For example:
, and .

A self-closing element requires a space and a trailing slash,

such as
or .

Attributes

Attributes appear within tags, and they can only contain the value ofthe attribute.

They can have multiple values separated by space.



7/40

HTML V/S XHTML

XHTML stands for EXtensible HyperText Markup Language.

XHTML is almost identical to HTML 4.01 and is a stricter and cleaner

version of HTML.

There are several rules that apply to XHTML that do not apply to

HTML.

The , , and tags are all required in XHTML.

The tag must have an xmlns attribute with a value of

http://www.w3.org/1999/xhtml. All elements must be closed - opening tag must have either an equal

closing tag (if its a container tag) or a self-closing space-plus-slash.

All tags must be written in lowercase.

All attribute values must be quoted with either single quotes or double

quotes. All attributes must have values.



8/40

Basic Html Page Structure

All HTML documents have three, document-level tags in common.

These tags,

1. ,

2. ,

3. ,delimit certain sections of the HTML document.

Basic Page Structure

THIS Is my Html Document



9/40

Html The tag surrounds the entire HTML document.

This tag tells the client browser where the document begins and

ends.

Head The tag delimits the heading of the HTML document.

or The element creates a header section for the document.

The heading section of the document contains certain heading information forthe document that is not actually content.

The documents title,

Meta information,

Document scripts are all contained in the section.

Body This is the main body of an HTML document where all of the content

is placed.

This is the content that people will see, hear, or otherwise

experience when they visit the web page.



10/40

Title Tag

You should specify a title for every page that you write inside the

element. This element is a child of the element). It is

used in several ways:

It displays at the very top of a browser window.

It is used as the default name for a bookmark in browsers.

Therefore it is important to use a title that really describes thecontent of your site.

The element should contain only the text for the title and it

may not contain any other elements.



11/40

Generic Attributes Attributes are used to amplify tags.

What we mean by amplify is that when a web browser interprets atag, it will also search for set attributes and then display the element

(tags+attributes) in its entirety.

Many HTML tags have a unique set of their own attributes.

Attribute Options Function

align right, left, center Horizontally aligns tags

valign top, middle, bottomVertically aligns tags within an HTML

element.

bgcolornumeric, hexidecimal, RGB

values

Places a background color behind an

element

background URLPlaces an background image behind an

element

id User DefinedNames an element for use with Cascading

Style Sheets.

class User DefinedClassifies an element for use with

Cascading Style Sheets.

width Numeric Value Specifies the width of tables, images, ortable cells.

height Numeric ValueSpecifies the height of tables, images, or

table cells.

title User Defined "Pop-up" title for your elements.



12/40

Html Formatting TagsHeadings( to ):

Any documents starts with a heading. You use different sizes for your headings.

Html has headings raging from 1 to 6.

It is a paired Tag.

Example:

This is heading 1

This is heading 2This is heading 3

This is heading 4

This is heading 5

This is heading 6

Paragraph Tag

: Publishing any kind of written works requires the use of a paragraph. The

tag defines a paragraph. Using this tag places a blank line above and

below the text of the paragraph.

It is a paired Tag.

You can use align attribute to align your paragraphs. Left

Center Right

Justify

Example:

This is paragraph



13/40

Html Formatting TagsLine Breaks - The
: A line break ends the line you are currently on and resumes on the next line.

Placing
within the code is the same as pressing the return key in a word processor.

Example:

Line break Really works

Horizontal Rules - : Horizontal rules are used to visually break up sections of a document.

The tag creates a line from the current position in the document to the right margin and

breaks the line accordingly. Example:

Hidaya Foundation

Hidaya Trust

Preserve Formatting - :

Sometimes you want the text to appear in same format as it was typed in make use of tags.

Example:

Hidaya Foundation

Hidaya Trust

Hidaya Institute Of Science And Technology

Bold and Italic Text (.. .. ): If one wants to make the fonts of content bold , italic can make use of

and tags with respective ending tags. Example:

This Bold and Italicized text.



14/40

Comments In Html

A comment is a way for you as the web page developer to controlwhat lines of code are to be ignored by the web browser.

Placing notes and reminders to yourself is a great way to remind

yourself what pieces of code are doing what.

Syntax for commenting

Suppose if there is you are using a client side scripting language then:



15/40

Links The web got its spidery name from the plentiful connections between web sites.

These connections are made using anchor tags to create links. Text, Images.

We Can have three types of links

1. Internal - Links to anchors on the current page

2. Local - Links to other pages within your domain

3. Global - Links to other domains outside of your site

The href attribute uses to link. See examples below. Examples:

This is my title

Go to Title

Page2

Hidaya Foundation

HTML Email Tag: HTML tag provides you facility to specifiy an email address to send an email.

Example:

Send Email



16/40

The Images are very important to beautify as well as to depicts many concepts on your web

page. Its is true that one single image is worth than thousands of words.

Syntax:

Following are most frequently used attributes for tag.

width: sets width of the image. This will have a value like 10 or 20%etc. height: sets height of the image. This will have a value like 10 or 20% etc.

border: sets a border around the image. This will have a value like 1 or 2 etc.

src: specifies URL of the image file.

alt: this is an alternate text which will be displayed if image is missing.

align: this sets horizontal alignment of the image and takes value either left, rightorcenter.

valign: this sets vertical alignment of the image and takes value either top, bottom orcenter.

hspace: horizontal space around the image. This will have a value like 10 or 20%etc. vspace: vertical space around the image. This will have a value like 10 or 20%etc.

name: name of the image with in the document.

id: id of the image with in the document.

style: this will be used if you are using CSS.

title: specifies a text title. The browser, perhaps flashing the title when the mouse passesover the link.

Example:



17/40

Lists In Html

We can List out our items, subjects or menu in the form of a list. HTML gives you three

different types of lists.

1. - An unordered list. This will list items using bullets.

2. - A ordered list. This will use different schemes of numbers to list your items.

3. - A definition list. This is arrange your items in the same way as they are arranged in

a dictionary.

Unordered Lists: An unordered list is a collection of related items that have no special order or

sequence.

This list is created by using tag.

Each item in the list is marked with a butllet.

The bullet itself comes in three flavors:

squares,

discs, circles.

The default bullet displayed by most web browsers is the traditional full disc.

type="square" type="disc" type="circle"



18/40

Lists In Html Example:

Item1

Item2

Item3

Item4

Ordered Lists: There are 4 other types of ordered lists.

Instead of generic numbers you can replace them with Roman numberals or letters, both

capital and lower-case.

Use the type attribute to change the numbering.

Start attribute is used for starting number as desired.

Example:

Item1

Item2Item3

Item4

type="square" type="disc" type="circle"

Item1

Item2

Item3

Item4

Item1

Item2

Item3

Item4

o Item1

o Item2

o Item3

o Item4



19/40

Lists In Html

Definition Term Lists:

Make definition lists as seen in dictionaries using the tag. These lists displace the term word just above the definition itself for

a unique look.

It's wise to bold the terms to displace them further.

- defines the start of the list

- definition term

- defining definition

Type=a Type=A Type=i Type=I

a. Item1

b. Item2

c. Item3

d. Item4

A. Item1

B. Item2

C. Item3

D. Item4

i. Item1

ii. Item2

iii. Item3

iv. Item4

I. Item1

II. Item2

III. Item3

IV. Item4



20/40

Lists In Html

Example:

Html

HyperText Mark Up LanguageXhtml

Xtensibile HyperText Mark Up Language

Html

HyperText Mark Up Language.

Xhtml

Xtensibile HyperText Mark Up Language.



21/40

Tables In Html Tables are just like spreadsheets and they are

made up of

Rows

Columns.

Even though there is no longer any serious

need to use tables for layout.

Tables be used for displaying tabular

datacalendars, schedules, exam results,

product pages.

You can create a table in HTML/XHTML by using

tag.

Inside element the tableis written out

rowby row.

A row is contained inside a tag . which

stands for Table Row.

Each cell is then written inside the row element

using a tag . which stands for Table Data.

Table heading can be defined using

element. This tag will be put to replace

tag.

Normally we put our top row as table heading as

shown below, otherwise you can use element

at any place:

Example:

10 am - noon

noon - 2 pm2 pm - 4 pm

Monday

Home Ec

MathGeography

Wednesday

History

Social StudiesMusic

10 am -

noonnoon - 2 pm 2 pm - 4 pm

Monday Home Ec Math Geography

Wednesday HistorySocial

StudiesMusic


22/40

Tables In Html (Cell Spacing And Cell Padding)

Cell spacing: CELLSPACING controls the

space between table

cells.


23/40

Tables In Html (Colspan & Rowspan) Colspan: colspan attribute used with if you want to merge twoor more

columns into a single column.

Rowspan: rowspan if you want to merge two or more rows.

For example:

We might want to create header cells for each Technology in our table

of

id,

Name Shift.

In this table, the header cells in the first and fifth rows span across two

columns to indicate the Technology for each group of names.


24/40

Example Table


25/40

Use Of Thead,Tfoot,Tbody The advance structure of table be divided into three portions:

Head and Foot are similar to headers and footers in word processing.

The body is the main content of the table.

The three elements for separating the head, body, and foot of a table

are:

- to create a separate table header. - to indicate the main body of the table.

- to create a separate table footer.

A table may contain several elements to indicate

differentpages or groups of data.

But it is notable that and tags should appear before

.


26/40

Example

This is the head of the table

This is the foot of the table

Cell 1

Cell 2

Cell 3

Cell 4


27/40

Form In Html

Most of the HTML you write helps you display content andinformation for your users.

Sometimes, however, you want a Web page to gather information

from users instead of giving static information to them.

HTML form markup tags give you a healthy collection of elements

and attributes for creating forms to collect information from visitorsto your site.

HTML forms simply place a handful of GUI controls on the user agent

to allow the user to enter data.

After the data is entered into the fields, a special control is used topass the entered data on to a program that can do something useful

with the data.

Such programs are typically referred to as form handlers because

they handle the form data.

You insert a form into your document by placing form fields within

tags.


28/40

Form Element

You insert a form into your document by placing form fields within

tags.

All of the input elements associated with a single form are contained

within a tag.

Syntax:

The actionattribute defines a URL where the data from the form

should be sent to be handled.

The second attribute, method, controls how the data is sent to the

handler. The two valid values are get and post. Get sends the form data to the form handler on the URL.

Post sends the form data in the Hypertext Transfer Protocol

(HTTP) header.

Diff B t G t A d P t


29/40

Difference Between Get And Post Fundamental Difference is probably the Visibility -

GET request is sent via the URL string (appended to the URI with a question-mark as separator),which is visible.

POST request is encapsulated in the body of the HTTP request and can't be seen.

Length -

GET request goes via URL, so it has a limitation for its length. It can't be more than 255 characterslong (though this is browser dependent, but usually the max is 255 characters only).

No such maximum length limitation holds for the POST request for the obvious reason that itbecomes a part of the body of the HTTP request and there is no size limitation for the body of anHTTP request/response.

Type of Data -

GET request is sent via URL string and as we all know that URL can be text-only, so GET can carryonly text data

POST has no such restriction and it can carry both text as well as binary data.

Caching/Bookmarking -

Again for the obvious reason that a GET request is nothing but an URL hence it can be cached as

well as Bookmarked. No such luxuries with a POST request.

FORM Default -

GET is the default method of the HTML FORM element.

To submit a FORM using POST method, we need to specify the method attribute and give it thevalue "POST".

Form Resubmission-

IfGetmethod is used and if the page is refreshed it wouldnt prompt before the request isresubmitted.

IfPost method, would prompt request before the request is resubmitted if page is refreshed.

The specific purpose of get is to read somethingto retrieve data from somewhere, dependent on the datasent.

post has the specific purpose of writing something (to a database, for example).


30/40

Form Fields Form Fields and Buttons: input, textarea, and select

The input element is the 10-headed hydra of the trio, creating a

different form control depending on the value of its type attribute.

The other two, textarea and

Select, create just one control type each. These elements will be

looked at in independent detail in few minutes, but there are a few

characteristics common to all three .

The Name Attribute: If all the inputted data in a form was sent without anything to identify

each piece of data, a form-processing script wouldnt know what piece ofdata is what.

The name attribute supplies this necessary identifier (such as ) and, in fact, the data in any input, textarea, or select

form field wont be sent at all if there isnta nameattribute present.

The Type Attribute: With just this single element Input you can create 10 different types of

controls


31/40

Type Attribute Values

textfor single-line text

passwordfor obfuscated text

checkboxfor a simple on or off

radiofor selecting one of a number of options submitfor initiating the sending of the form data

resetfor returning the form fields to their original values

imagefor sending coordinates of where an image is clicked on

buttonSimple button to perform some scripting on some event.


32/40

Input Type=Text

An input element with the attribute type=text is a single-line textbox.

This is most common form field, used for short pieces of textual

information such as

someones name,

email address,

credit card number.

Text is the default value for the typeattribute(so you dont need to

explicitly use the type attribute, if a textboxis what youre after).

Other Attributes Of Text Filed are as follows:

value: Provides an initial value for the text input control that the user

will see when the form loads.

size: Allows you to specify the width of the text-input control in

terms of characters.

maxlength: Allows you to specify the maximum number ofcharacters a user can enter into the text box.


33/40

Input Type=Password The password type works like the text type, apart from one characteristic:

As the user types, instead of the characters appearing in the text box,placeholder characters (usually asterisks or circular bullets, depending on thebrowser) will appear in their place.

The idea behind this is that anyone peering over the users shoulder wont beable to see what is being typed in.

Input Type=checkbox: The checkbox type creates a simple checkbox, used to supply a

yes/no,

set/unset,

on/off option.

By default, a browser will style this as a small empty square box, which, whenselected, will display a tick inside the box.

You can also specify that the initial state of a checkbox should be selected byadding the attribute and value combination checked=checked.

If a checkbox is not selected when the form data is submitted, no value will be sent.

When the checkbox is selected, on will be sent as the value for the corresponding

name unless the tag has a value attribute, in which case the value of that will besent for the name instead.

I t T di


34/40

Input Type=radio

Radio buttons, defined by the radio type, are similar to checkboxes, but

the idea is that you can only select one option in a group at a time.

You give a group of radio input elements

the same name.

When one of the radio buttons in that group is selected, any other radio

buttons that were selected will be turned off.

You really need to use the value attributes here.

I T b i


35/40

Input Type submit There are other ways of submitting form data (namely with a bit of JavaScript),

but the most common and easiest way is by hitting a submit button.

The submit input type takes the form of a button and when this button ispressed, the form data will be sent to the value of the actionattribute in theopening form tag.

but value can be changed with the value attribute.

Input Type reset: The reset input type creates a reset button, which, when clicked (or otherwise .

selected), will reset the form, with form fields returning to the values that theyhad

when the page was first loaded.

Like submit, the text on the reset button (Reset, by default) can be changedwith

the value attribute.

With both submit and reset buttons, the name attribute isnt particularlynecessary.

Input Type= button: Button input elements do absolutely nothing.

They are used to invoke client-side scripts (namely JavaScript)


36/40

Input Type Hidden

If you will want to pass information between pages without the user

seeing it.

Hidden form controls remain part of any form, but the user cannot

see them in the Web browser.

They should not be used for any sensitive information you do not

want the user to see because the user could see this data if looked in

the source of the page.


37/40

The textarea element is straight-forward, having just one simplestate.

It works something like a big text-type input element, but is used for

bigger chunks of textual data, usually with multiple lines.

For Example:

An address, A comment on a feedback form.

Unlike the input element, textarea has an opening and closing tag.

Any text in between the opening and closing tag makes up the initial

value of the element.

Type something

here

Select


38/40

Select Select form fields present the user with a list (which is usually

displayed as a drop-down menu), from which one or more optionscan be selected.

Key to their operation, another element is neededthe option

element, which defines each option in the list.

The Trial

The Outsider

Things Fall Apart

Animal Farm

You can supply different values for each option element by using the

value attribute inside the opening option tag.

When the value attribute is present, its value will be sent instead of

the option elements content.

You can set one option element to be initially selected by using theselected attribute (in the form of selected=selected).


39/40

Environment Variables

Beyond the variables you declare in your code, PHP has a collection

of environment variables, which are system defined variables that

are accessible from anywhere inside the PHP code

There are three environment variables used for Form Processing:

$_GET

$_POST

$_REQUEST

There are various reasons to be cautious about using

the $_REQUEST[] , like what happens when we have a GET field andand POST field with the same name.

Data returned from the client using the POST method are stored in

the $_POST[] Variable by PHP.

Data returned from the client using the GET method, or as a query

string in the URL, are stored in the $_GET[].


40/40

Questions

?

web forms and html3

Documents