web forms and html3
TRANSCRIPT
-
7/30/2019 Web Forms and HTML3
1/40
Web Forms and HTMLBy:HIRA KHAN
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
2/40
What Is the World Wide Web?
Copyright 2012 Hira Khan
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.
-
7/30/2019 Web Forms and HTML3
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.
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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 .
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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.
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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.
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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.
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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.
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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.
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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.
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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:
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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:
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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"
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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.
Copyright 2012 Hira Khan
-
7/30/2019 Web Forms and HTML3
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
-
7/30/2019 Web Forms and HTML3
22/40
Tables In Html (Cell Spacing And Cell Padding)
Cell spacing: CELLSPACING controls the
space between table
cells.
-
7/30/2019 Web Forms and HTML3
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.
-
7/30/2019 Web Forms and HTML3
24/40
Example Table
-
7/30/2019 Web Forms and HTML3
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
.
-
7/30/2019 Web Forms and HTML3
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
-
7/30/2019 Web Forms and HTML3
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.
-
7/30/2019 Web Forms and HTML3
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
-
7/30/2019 Web Forms and HTML3
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).
-
7/30/2019 Web Forms and HTML3
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
-
7/30/2019 Web Forms and HTML3
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.
-
7/30/2019 Web Forms and HTML3
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.
-
7/30/2019 Web Forms and HTML3
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
-
7/30/2019 Web Forms and HTML3
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
-
7/30/2019 Web Forms and HTML3
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)
-
7/30/2019 Web Forms and HTML3
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.
-
7/30/2019 Web Forms and HTML3
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
-
7/30/2019 Web Forms and HTML3
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).
-
7/30/2019 Web Forms and HTML3
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[].
-
7/30/2019 Web Forms and HTML3
40/40
Questions
?