You are on page 1of 40

Web Forms and HTML

By:HIRA KHAN

Copyright 2012 Hira Khan

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 of the Web as the multimedia version of the Internet, and youll be right on the mark.

Copyright 2012 Hira Khan

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

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 as hypertext 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

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

Attribute

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. Tag

<a href=abc.html> My content </a>


Content Angle Brackets Value Copyright 2012 Hira Khan

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: <br>, and <hr>. A self-closing element requires a space and a trailing slash, such as <br /> or <hr />.

Attributes
Attributes appear within tags, and they can only contain the value of
the attribute. They can have multiple values separated by space.
Copyright 2012 Hira Khan

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 <html>, <head>, and <body> tags are all required in XHTML. The <html> 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

Basic Html Page Structure


All HTML documents have three, document-level tags in common. These tags, 1. <html>, 2. <head>, 3. <body>, delimit certain sections of the HTML document. <html> <head>
<title>Basic Page Structure</title>

</head> <body> THIS Is my Html Document

</body> </html>

Copyright 2012 Hira Khan

Html
The <html> tag surrounds the entire HTML document. This tag tells the client browser where the document begins and ends.

Head
The <head> tag delimits the heading of the HTML document.

or
The <head> element creates a header section for the document. The heading section of the document contains certain heading information for the document that is not actually content. The documents title, Meta information, Document scripts are all contained in the <head> 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

Title Tag
You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> 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 the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements.

Copyright 2012 Hira Khan

Generic Attributes
Attributes are used to amplify tags. What we mean by amplify is that when a web browser interprets a tag, 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
valign bgcolor background id class width height title

right, left, center


top, middle, bottom numeric, hexidecimal, RGB values URL User Defined User Defined Numeric Value Numeric Value User Defined

Horizontally aligns tags


Vertically aligns tags within an HTML element. Places a background color behind an element Places an background image behind an element Names an element for use with Cascading Style Sheets.

Classifies an element for use with Cascading Style Sheets.


Specifies the width of tables, images, or table cells. Specifies the height of tables, images, or table cells. "Pop-up" title for your elements.

Copyright 2012 Hira Khan

Html Formatting Tags


Headings(<h1> to <h6>):
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: <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

Paragraph Tag <p>:


Publishing any kind of written works requires the use of a paragraph. The <p> 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
<p>This is paragraph</p>

Example:

Copyright 2012 Hira Khan

Html Formatting Tags


Line Breaks - The <br /> :
A line break ends the line you are currently on and resumes on the next line. Placing <br /> within the code is the same as pressing the return key in a word processor. Example: Line break Really works<br/>

Horizontal Rules -<hr /> :


Horizontal rules are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

Example: Hidaya Foundation<hr/> Hidaya Trust

Preserve Formatting - <pre> :


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

Example: <pre> Hidaya Foundation Hidaya Trust Hidaya Institute Of Science And Technology </pre>

Bold and Italic Text (<b>..<b/> <i>..</i> ):


If one wants to make the fonts of content bold , italic can make use of <b> and <i> tags with respective ending tags.
Example: This <b>Bold</b> and <i>Italicized </i> text.

Copyright 2012 Hira Khan

Comments In Html
A comment is a way for you as the web page developer to control what 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
<!-Code Successfully Commented --> Suppose if there is you are using a client side scripting language then: <script> <!-- document.write("Hello World!") //--> </script>

Copyright 2012 Hira Khan

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: <! Example of intrernal --> <a name=title> This is my title</a> <a href=#title>Go to Title</a> <! Example of local --> <a href=page2.html>Page2</a> <! Example of Global --> <a href=www.hidaya.org>Hidaya Foundation</a>

HTML Email Tag:


HTML <a> tag provides you facility to specifiy an email address to send an email. Example: <a href= "mailto:abc@example.com">Send Email</a>
Copyright 2012 Hira Khan

The <img>
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: <img src="image URL" attr_name="attr_value"...more attributes /> Following are most frequently used attributes for <img> 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, right orcenter. 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 passes over the link.

Example: <img src=" img.jpg" alt=" Image1" />

Copyright 2012 Hira Khan

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. 2. 3. <ul> - An unordered list. This will list items using bullets. <ol> - A ordered list. This will use different schemes of numbers to list your items. <dl> - 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 <ul> 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" Copyright 2012 Hira Khan type="circle"

Lists In Html
Example: <ul type= disc > <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul>
type="square" type="disc" type="circle" o o o o Item1 Item2 Item3 Item4

Item1 Item2 Item3 Item4

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: <ol type= a > <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ol>

Copyright 2012 Hira Khan

Lists In Html
Type=a a. b. c. d. Item1 Item2 Item3 Item4 Type=A A. B. C. D. Item1 Item2 Item3 Item4 Type=i i. ii. iii. iv. Item1 Item2 Item3 Item4 Type=I I. II. III. IV. Item1 Item2 Item3 Item4

Definition Term Lists:


Make definition lists as seen in dictionaries using the <dl> 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. <dl> - defines the start of the list <dt> - definition term <dd> - defining definition
Copyright 2012 Hira Khan

Lists In Html
Example: <dl> <dt><b>Html</b></dt> <dd>HyperText Mark Up Language</dd> <dt><b>Xhtml</b></dt> <dd>Xtensibile HyperText Mark Up Language </dd> </dt>

Html HyperText Mark Up Language. Xhtml Xtensibile HyperText Mark Up Language.

Copyright 2012 Hira Khan

Tables In Html
Tables are just like spreadsheets and they are made up of Rows Columns. Normally we put our top row as table heading as shown below, otherwise you can use <th> element at any place:
Example: <TABLE BORDER=2> <TR> <TD>&nbsp;</TD> <TH>10 am - noon</TH> <TH>noon - 2 pm</TH> <TH>2 pm - 4 pm</TH> </TR> <TR> <TH>Monday</TH> <TD>Home Ec</TD> <TD>Math</TD> <TD>Geography</TD> </TR> <TR> <TH>Wednesday</TH> <TD>History</TD> <TD>Social Studies</TD> <TD>Music</TD> </TR> </TABLE>

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 <table> tag. Inside <table> element the table is written out row by row. A row is contained inside a <tr> tag . which stands for Table Row.

Each cell is then written inside the row element using a <td> tag . which stands for Table Data. Table heading can be defined using <th> element. This tag will be put to replace <td> tag.

10 am noon Monday Wednesday Home Ec History

noon - 2 pm Math Social Studies

2 pm - 4 pm Geography Music

Tables In Html (Cell Spacing And Cell Padding)


Cell spacing:
CELLSPACING controls the space between table cells.

<table border="1" cellspacing="10>

Cell Padding: CELLPADDING sets the amount of space between the contents of the cell and the cell wall. <table border="1" cellpadding="5" >

Tables In Html (Colspan & Rowspan)


Colspan:
colspan attribute used with <td> if you want to merge two or 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.

Example Table
<TABLE BORDER=2 CELLPADDING=4> <TR> <TD COLSPAN=4 BGCOLOR=skyblue" align="center" >Students Information </TD> </TR> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">PHP</TH> <TD>1153.</TD><TD>Ahmed</TD> <TD>Morning</TD> </TR> <TR> <TD>2785.</TD><TD>Asad</TD> <TD>Evening</TD> </TR> <TR> <TD>110.</TD><TD>Manzoor</TD> <TD>Morning</TD> </TR> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">System Administration</TH> <TD>1566.</TD><TD>Tariq</TD> <TD>Morning</TD> </TR> <TR> <TD>784.</TD><TD>Waheed</TD> <TD>Evening</TD> </TR> <TR> <TD>222.</TD><TD>Saleem</TD> <TD>Morning</TD> </TR> </TABLE>

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: <thead> - to create a separate table header. <tbody> - to indicate the main body of the table. <tfoot> - to create a separate table footer. A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>.

Example
<table border="1" width="100%"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table </td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <!--<tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> </table>

Form In Html
Most of the HTML you write helps you display content and information 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 visitors to 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 elds, a special control is used to pass 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 elds within <form> tags.

Form Element
You insert a form into your document by placing form elds within <form> tags. All of the input elements associated with a single form are contained within a <form> tag. Syntax:
<form method=get|post action=process.php> </form>

The action attribute denes 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.

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 characters long (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 it becomes a part of the body of the HTTP request and there is no size limitation for the body of an HTTP 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 carry only 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 the value "POST". Form Resubmission If Get method is used and if the page is refreshed it wouldnt prompt before the request is resubmitted. If Post 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 data sent. post has the specific purpose of writing something (to a database, for example).

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 of data is what. The name attribute supplies this necessary identifier (such as <input name=book />) and, in fact, the data in any input, textarea, or select form field wont be sent at all if there isnt a name attribute present.

The Type Attribute:


With just this single element Input you can create 10 different types of controls

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.

Input Type=Text
An input element with the attribute type=text is a single-line text box. 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 type attribute (so you dont need to explicitly use the type attribute, if a textbox is 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 of characters a user can enter into the text box. <input type=text name=name" maxlength=3 size=100 />

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 the browser) will appear in their place. The idea behind this is that anyone peering over the users shoulder wont be able to see what is being typed in. <input type="password" name="pword" maxlength=3 size=100 />

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, when selected, will display a tick inside the box. You can also specify that the initial state of a checkbox should be selected by adding 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 be sent for the name instead. <input type=checkbox name=modern checked=checked />

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. <input type=radio name=color value=red checked=checked /> <input type=radio name=color value=orange /> <input type=radio name=color value=blue /> You really need to use the value attributes here.

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 is pressed, the form data will be sent to the value of the action attribute in the opening form tag. but value can be changed with the value attribute. <input type=submit value=Search />

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 they had when the page was first loaded. Like submit, the text on the reset button (Reset, by default) can be changed with the value attribute. <input type=reset value=Start again /> With both submit and reset buttons, the name attribute isnt particularly necessary. Input Type= button: Button input elements do absolutely nothing. They are used to invoke client-side scripts (namely JavaScript) <input type=button value=Start again />

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. <input type=hidden name=h1 value=this is hidden field/>

<textarea>
The textarea element is straight-forward, having just one simple state. 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. <textarea name=whatever rows=10 cols=20>Type something here </textarea>

Select
Select form fields present the user with a list (which is usually displayed as a drop-down menu), from which one or more options can be selected. Key to their operation, another element is neededthe option element, which defines each option in the list. <select name=book> <option selected=selected>The Trial</option> <option>The Outsider</option> <option>Things Fall Apart</option> <option>Animal Farm</option> </select> 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 the selected attribute (in the form of selected=selected).

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 and and 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[].

Questions ?