Friday, September 5, 2014

CHAPTER 4. FORM

Form and its Elements

     
In this session, we will introduce you to the idea of Forms and how they are used in HTML. You will learn about the basic tags of a HTML Form and their attributes.
Basically, a HTML Form is used to select and process different types of user inputs. A Form behaves typically like an interface through which users can input different elements, e.g., texts, images etc. which in turn HTML Server will store in a database, process them and return results to the users.
A Form is created by using the
tag. A form element (text field, text area etc.) allows users to input different types of information in the form.



  


The basic attributes of a
tag are described as below-

Attribute Name Attribute Value Description
Action The URL of the server side scripting file which recieves the user input;
it may be any .asp, .php., .jsp, ... type of file.
e.g., http://mysite.com/login/registration.php.
Performs an action with the input entered by the user in the form elemets
EncType "application/x-www-form-urlencoded": the default value;
"multipart/form-data": used for multiple plain text form data of input element.
This attribute describes the content type that is used to submit the form to the server
Method Get (default value), Post It is the HTTP method for sending the form information to the server; the GET method is used for less secured form information and the POST method is used for more secured form information
Name Name given to the form Specifies a name to the form for client-side scripting

The Action Attribute

The following example will describe you how to input an information in a form and how the action attribute works to process the information.


Username:



Here, a text field and a submit button is created by specifying the input type attribute as "text" and "submit" respectively.
Username:
When you input some text in the above text field and click on the "Submit Query" button, your information will be sent to a file specified as "html_form_action.asp" in the action attribute. This file will process your data and return you a page containing the results as user=your_name. This is not shown here as it is a server side scripting.

The Input Element

The tag is the most used form element. There are many types of input elements which are specified by the "type" attribute, e.g.,


Here, type of the input element is a text field which considers only text inputs as its value.

We will now describe how different types of input elements are used in HTML forms---

Text Field:

Text Field in a form allows users to input text elements like text character, numbers etc.


First Name:


Last Name:


The browser will show the text fields as---
First Name:
Last Name:
Here, you can insert letters, numbers etc. as text inputs.

Password Field:

Password field allows users to insert characters as password given to some element in a form.


User Name:


Password:


The browser will show this as---
Username:
Password:
Here, the input type is password in the password field. You will notice that the characters you type in the password field is visible only as bullets or asterisks, it will not be displayed to others unlike the username in the text field.

Create a Button in a Form:

A Button in a HTML form can be created as an input type element. By clicking a button users request their information to be processed.
In the following example, we create just a simple button; no specific task will be performed by it.




In the browser, it looks like---
The text "Click Me!" put as the value of the button is displayed on the button in the browser.

Submit button

A Submit button can be created as an input element by specifying the type attribute as "Submit". When an user clicks on a submit button, the information entered in the form is submitted to the server.
Take the following example---


User Name:

Password:



The browser will show this as---
Username:  Password:  
After entering username and password the user clicks on a submit button named "Login" which invokes the action attribute to submit the data to the server.

Reset button

A Reset button is used to reset the information entered in a form element to the default value or to change the information previously entered.


Enter your name:



Enter your name:  
Image as a button

We can use an image as a button. For this, the "src" attribute is added in the input element which gives the URL of an image to be set as a button. The type attribute is specified as "image" and the value as "InputTypeImage".




Username:
Password:  

Uploading a File:

To upload a file, we use the input type "File" element in HTML. This can be shown as below---




In the browser, it will be like ---
On clicking the "Browse..." button, you can upload a file from your database into the server. The URL of the file will be displayed in the text field provided.

The Hidden Input Type:

The "Hidden" input type element is used by the web authors to hide some particular form data from the users. It is useful in carrying user information from form to form as hidden input type for user applications containing several HTML documents.
In the following example, the e-mailed contents of a form is specified as "hidden" input types---





The above input fields are hidden in the web browser only, they can be still viewed in the HTML document source page.

Radio Button:

A Radio button in a form is used to allow users select only one input out of a given number of options.


Choose a vehicle:

Bike
Car
Bus

In the browser, it looks like---
Choose a vehicle:

Bike

Car

Bus
User can select only one item at a time. Here, the vehicle "bike" is made "checked" by default. If you select another value, it will become unselected.

Checkboxes:

Checkboxes are used in a form to allow users select more than one input out of a given number of options.


I've a bicycle
I've a motorbike
I've a car
I've a bus

In the browser, it looks like---
I've a bicycle

I've a motorbike

I've a car

I've a bus
User can select more than one item at a time. Here, the vehicle "motorbike" is made "checked" by default.

The Select Element

The Select element is used in HTML forms to create a drop-down box or a drop-down list. The Select element has three basic optional attributes as shown in the following table -
Attribute Name Attribute Value Description
Name A Unique Name It is used to give a unique name to the drop-down list.
Size Any Number, e.g., 1, 2, 3, ... It is used to define the size of a drop-down list.
Multiple Multiple It is used to select multiple items at a time from a drop-down list.

A Simple Drop-Down List:

The following example will show how to create a simple drop-down list---
Select a Country:

Each item to be displayed in the list is written in between the option tags .
In the Browser, it will be shown as---

Select a country: You can see the name of the countries by clicking on the list and select any one of them you wish to. When you click another name, the previous one will be replaced by it.

Size of a Drop-Down List:

By specifying a definite value to the "size" attribute in the select element, we can create a drop-down list of any size. Consider the following example -
Select a Country:

In the Browser, it will be shown as---

Select a country: Here, name of three countries will be displayed at a time in the list. You can make any one of the itmes of a drop-down list as "selected" by default. In this list "India" is displayed as "selected by default".

Multiple Selection in a Drop-Down List:

We can select more than one item at a time in a drop-down list. For this, the value of the attribute "multiple" of the select element, is specified as "multiple". Consider the following example -
Select a country:

In the Browser, it will be shown as---

Select a country: Here, you can select multiple countries at a time by "Ctrl+Click" on the desired names.

If you do not specify the size in the select element for a multiple selection, then all the items in the drop-down list will be displayed.
Select a country:


Text Area

A Text Area is an area where users can write an unlimited number of text characters. A text area is created in a form, using the
In the Browser, it will be shown as---

If you write any text in between the tags , it will be displayed in the text area by default.

CHAPTER 3 TABLES

TABLES :-

3. MAIN THINGS





BOLD TEXT SHOWS IF U USE


ONE

TWO


THREE




DONT CONFUSE BETWEEN TH AND TD... TH ONLY BOLD THE TEXT IT TABLE HEADING.


A table can have any number of rows and cells.
Attributes in a Table:
The basic attributes used in a table is described in the following table---
Attribute Name Attribute Value Description
BORDER 1, 2, 3, ... It sets the border of a table to a size specified as its value.
BORDERCOLOR Color values or Color Names It sets the border of a table to a color specified as its value.
BGCOLOR Color values or Color Names It sets the background of a table to a color specified as its value. It is also used for a specific row or a specific cell.
WIDTH 100%, 50%, 25%, ... etc. It sets the width of a table or the width of cells to a specific size.
CELLSPACING Any Number like 10, 5, 20, ... etc. It inserts a space between the cells of a table of a size specified as its value.
CELLPADDING Any Number like 10, 5, 20, ... etc. It inserts a space between the content and the border of a cell of a size specified as its value.
ALIGN Left, Middle, Right It aligns the contents of a cell as left, middle and right.
ROWSPAN 2, 3, ... It divides a cell into two or more rows, e.g., two rows when rowspan="2", three rows when rowspan="3", ... and so on.
COLSPAN 2, 3, ... It divides a cell into two or more columns, e.g., two columns when colspan="2", three columns when colspan="3", ... and so on.
The Border Attribute and Table Headings:
A table in general has a border. It is used in the opening
tag as---


We can also specify a color to a border as---

Table headings are defined by the
tag. Generally, in the first row of a table, instead of using the
tag, the
tag is used to specify headings in a table. A table data here corresponds to the content of each heading.



The following example depicts a table with three rows and three columns (i.e., three cells in each row) with table headings and a border of size "1" with a border color Red.



First Row, First Cell (Heading 1) First Row, Second Cell (Heading 2) First Row, Third Cell (Heading 3)
Second Row, First Cell (Table Data) Second Row, Second Cell (Table Data) Second Row, Third Cell (Table Data)
Third Row, First Cell (Table Data) Third Row, Second Cell (Table Data) Third Row, Third Cell (Table Data)

First Row, First Cell (Heading 1) First Row, Second Cell (Heading 2) First Row, Third Cell (Heading 3)
Second Row, First Cell (Table Data) Second Row, Second Cell (Table Data) Second Row, Third Cell (Table Data)
Third Row, First Cell (Table Data) Third Row, Second Cell (Table Data) Third Row, Third Cell (Table Data)

Specifying Width and Bgcolor to a table:
We can specify the width of a table using the WIDTH attribute in the opening tag of the table. Similarly, the width of a specific column can also be specified in the
tag.

A background color can be set to a table specifying a color value or a color name to thr BGCOLOR attribute in the
tag. Similarly, if we use bgcolor in the tag, all cells in the row will be set to the corresponding color. Using bgcolor in the
we can set a color to a specific cell.

The following example illustrates the use of WIDTH and BGCOLOR in a table---


Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

Width of the following table is 75% whether the width of the first, second, and third columns are respectively 25%, 25% and 50%. The background color of the second row is yellow and that of the second cell in the third row is red. The color of the remaining cells in the table is lightblue as specified in the opening tag of the table.
Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

The Align attribute:
The ALIGN attribute is used to align the content of a cell as left, middle and right. For instance, if we set Align="right" in a tag, contents of all the cells in that row will be aligned as right. If we set Align="middle" in a
, the content of that particular cell will be aligned as middle. However, the default alignment of the table data within a cell is left. The default alignment of the contents of a table heading is middle.

The ALIGN attribute is also used in the opening tag of a table to align the table as left, right or middle in a page. The default alignment in this case is left.
Let us take the following example---

Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

In this example, the table is aligned middle in the page. The first heading is aligned left. The contents of the cells in the second row is aligned right. The content of the second cell of the third row is aligned middle whether the contents of the remaining cells in the table is aligned left by default.
Cellspacing and Cellpadding:
CELLSPACING is used in a table to insert a space between the cells.
Table without CELLSPACING:


Data 1 Data 2
Data 3 Data 4


Data 1 Data 2
Data 3 Data 4

Table with a CELLSPACING of 10:



Data 1 Data 2
Data 3 Data 4


Data 1 Data 2
Data 3 Data 4


Table with a CELLSPACING of 0:


Data 1 Data 2
Data 3 Data 4




Data 1 Data 2
Data 3 Data 4

CELLPADDING in a table is used to insert a white space between the content and the border of the cells.
Table without CELLPADDING:


Data 1 Data 2
Data 3 Data 4




Data 1 Data 2
Data 3 Data 4


Table with a CELLPADDING of 10:



Data 1 Data 2
Data 3 Data 4


Data 1 Data 2
Data 3 Data 4


Rowspan and Colspan:
(i) ROWSPAN is used in a table to divide a cell into two or more rows.

A Table with ROWSPAN 2:


Student Name X
Subjects Physics
Maths



Student Name X
Subjects Physics
Maths

(ii) COLSPAN is used in a table to divide a cell into two or more columns.
A Table with COLSPAN 2:



Student Name Subjects
X Physics Maths
Y Physics Biology


Student Name Subjects
X Physics Maths
Y Physics Biology

CHAPTER 2

HTML Elements

In this session, you will learn more things on HTML. You will learn about the uses of some elements in HTML with a description of their attributes through examples. This includes---
  • Lists
  • Images
  • Background
  • Colors
  • Tables
  • Frames
Lists
In the previous session, we discussed briefly about the uses of different types of list in HTML. Now we will give you an idea about some of their basic attributes used.
Unordered List:
In an unordered list, the items are listed in an unordered fashion. Basically, in an unordered list, two main attributes are used, viz., ID and TYPE. The following table gives the description of these attributes---
Attribute Name Attribute Value Description
ID ID Name ID describes the identity of the list
TYPE Circle, Square, Disc Type of list, i.e., Circle bulleted, Square bulleted
or Disc bulleted list







The following example will help you know about different types of unordered list---
A Circle Bulleted List: List of some fruits


  • Apple

  • Mango

  • Orange


A Square Bulleted List: List of some fruits


  • Apple

  • Mango

  • Orange


A Disc Bulleted List: List of some fruits


  • Apple

  • Mango

  • Orange


A Circle Bulleted List: List of some fruits
  • Apple
  • Mango
  • Orange

A Square Bulleted List: List of some fruits
  • Apple
  • Mango
  • Orange

A Disc Bulleted List: List of some fruits
  • Apple
  • Mango
  • Orange













However, if you don't specify any type in an unordered list, the default type will be disc bullets.
Ordered List:
In an ordered list, items are listed in an orderly fashion. Like an unordered list, an ordered list also has the basic attributes ID and TYPE. Following table gives the description of the attributes of an ordered list---
Attribute Name Attribute Value Description
ID ID Name ID describes the identity of the list
TYPE Numbers: 1, 2, 3,...
Alphabets: A, B, C,... and a, b, c,...
Roman Letters: I, II, III,... and i, ii, iii,...
Type of list, i.e., the items are ordered in the list
according to Numbers, Alphabets or Roman Letters
START 1, 2, 3, ... It is any Number assigned to the first item of the list

Following examples explain different types of ordered list---
A Numbered List: List of some vehicles


  1. Motorbike

  2. Car

  3. Bus


Another Numbered List starting from the value "5": List of some vehicles


  1. Motorbike

  2. Car

  3. Bus


A Capital Alphabet-ordered List: List of some vehicles


  1. Motorbike

  2. Car

  3. Bus


A Lowercase Roman Letter-ordered List: List of some vehicles


  1. Motorbike

  2. Car

  3. Bus


A Numbered List: List of some vehicles
  1. Motorbike
  2. Car
  3. Bus

Another Numbered List starting from the value "5": List of some vehicles
  1. Motorbike
  2. Car
  3. Bus

A Capital Alphabet-ordered List: List of some vehicles
  1. Motorbike
  2. Car
  3. Bus

A Lowercase Roman Letter-ordered List: List of some vehicles
  1. Motorbike
  2. Car
  3. Bus

However, if you don't specify any type in an ordered list, the default type will be Numbers.
Definition List:
A Definition List is a type of list which gives a description about some items. A definition list don't have a type attribute. Following is an example of a definition list---
A Definition List:


Motorbike

A type of vehicle

Orange

A type of fruit

Tea

A type of hot drink


A Definition List:
Motorbike
A type of vehicle

Orange
A type of fruit

Tea
A type of hot drink

Here,
is Definition List tag,
is Definition Term &
is Definition Data.

Images
In the previous session, we discussed about some of the attributes of an image. Here, you will learn about some more of them. Use of images in HTML for web site development is very much important. It enhances the visual display content of a web page. Basically, an image is a JPEG or a GIF file.
Following table describes some important attributes of an image used in HTML---
 
Attribute Name Attribute Value Description
SRC "Location Path" or the "Address"
or the "URL" of the image
It describes directory path of the location of
an image file. To display an image
in a web page the SRC attribute is used.
WIDTH Width of an image, e.g., 100 pixels (100px), 80px, ... It sets the image to a size of definite width
HEIGHT Height of an image, e.g., 100px, 80px, ... It sets the image to a size of definite height
ALT A short description of the image,
e.g., "image of a boy" or "image of
a house" ... etc.
ALT attribute is used to give a short
description of an image when it is
not loaded in a page due to some reason
BORDER 1, 2, 3, ... It sets a border to an image.
Greater the value of the BORDER,
thicker is the border of the image.
ALIGN Left, middle, Right It aligns an image to the Left, Middle or Right in a web page.
VSPACE 1, 2, 3, ... It is used to insert a vertical space between
the image and any object above & below of it.
HSPACE 1, 2, 3, ... It is used to insert a horizontal space between
the image and any object left & right of it.

See the following example.
It shows footprints.
It is an image of height 100px and width 150px with a border of size 1. It is aligned right in the page.
Discussion among three people





The text in the "alt" attribute is displayed when you place the mouse cursor over the image. But in some browsers, in doesn't work.
In the above example, we can insert a vertical space between the image and the text above and below of it. For this, we assign a certain value to the attribute VSPACE as follows---

It is an image of height 100px and width 150px with a border of size 1. It is aligned left by default in the page.
Discussion among three people A vertical space has been inserted between the image and the text above and below of it.
Similarly, a horizontal space can be inserted between an image and any object left and right of it by using "HSPACE" attribute.

It is an image of height 100px andDiscussion among three peoplewidth 150px with a border of size 1.

Background
In HTML, the background of a web page can be set to any color or any image. The background attributes are shown in the following table---
Attribute Name Attribute Value Description
BGCOLOR Color Values, e.g., #ADD8E6, #E0FFFF,...
Color Names, e.g., LightBlue, LightCyan,...
It sets the background to the color specified as its value
BACKGROUND Source of an image It sets the background to the image specified as its value

These attributes are used in the Opening Tag of the Body element to set a background to a web page.

chapter 1

Here, we will introduce you to the basics of HTML. HTML stands for Hyper Text Markup Language. Using HTML we can create a Web Page which can be viewed through a Web Browser over Internet.
HTML describes the contents of a web page with Markup Tags. Tags are defined by angle brackets <>. <> is called the Opening Tag or the Start Tag. The Closing Tag or the End Tag is defined as </>. The whole HTML document is enclosed in between the opening tag and the closing
tag. An HTML file has a .html or .htm extension.

The General Structure of an HTML document

When you will open a web browser and going to the View option of the Menu bar click to view the source code of the web page, you will see the general structure of the HTML document. At the start of the document, you will find the declaration of the HTML Version being used.
An HTML document is divided mainly into two parts- Head and Body. The Head element contains the Title of the Page which is written in between ... tags. The Title of the Page will be shown in the Header of the Web Page.
The second part is the Body Element. This is the most important part of the HTML document. The Body element contains all the contents to be displayed in a web page (texts, images etc.).
Below here is the General Structure of an HTML document---
"http://www.w3.org/TR/html4/loose.dtd">
 ...... Version of HTML


...... Opening of the HTML document



...... Opening tag of the Head

My Home Page ...... Title of the document

...... Closing Head tag


...... Start of the Body
............................
........Contents of the body 
which may contain various kind
..............
of elements like text, image, link etc
................................................................
...... End of the Body element


...... End of the HTML document

Basic Elements of a Body and their Attributes

The following Basic elements are used in a body that describe the contents of the body---
  • Headings
  • Paragraph
  • Formatting Elements
  • Emphasized word
  • Image
  • Anchor
  • Lists
Each element has some properties or characteristics. These are referred to as attributes. An attribute has a specific value.


HTML Headings

In HTML, six types of headings are used, viz, H1, H2, H3, H4, H5 and H6. Headings are important in maintaining the flow of the contents, i.e., the hierarchical structure of the document. H1 is the most important and H6 is the least important heading.
Each heading has an Opening tag and a Closing tag. The use of headings can be shown as below---

This is the first heading


This is the second heading


This is the third heading


This is the fourth heading


This is the fifth heading

This is the sixth heading

In the browser, it will become like this---

This is the first heading

This is the second heading

This is the third heading

This is the fourth heading

This is the fifth heading
This is the sixth heading
The format of the text in each heading is defined as default by HTML itself.

Paragraph

Paragraphs in an HTML page are encoded within and
tags. However, the end tag is optional. The space between two paragraphs are automatically specified in HTML. We can insert a line break at any point of the document by using a
tag.
Look at the follwing example---
This is my first paragraph.

This is another paragraph. This will give you
an introduction of HTML.

The display in the web page will be as---
This is my first paragraph.
This is another paragraph. This will give you
an introduction of HTML.

Formatting Elements

There are three basic formatting elements used in HTML to make a text Bold, Italic and Underlined.
To make a text bold, and tags are used.
To make a text italic, and tags are used.
To make text underlined, and tags are used.
For example,
This text is bold.
This text is italic.
This text is underlined
The result will be---
This text is bold.
This text is italic.
This text is underlined.

An Emphasized Word

To add emphasis to a word or a group of words, we use the tag.
For example,
This is a very interestinglesson.
This is a very interesting lesson.

Image

Images are often used in a web page. To add an image in HTML, we use the tag. The path of the location of the image is written in the "src" attribute. If the image is located in the same folder as the web page then only the name of the image file is included. We can also format the size of an image by specifying its width & height.
Take the following example:

This is an image with size of width 100px and height 80px.
The ALT attribute of an image:
The Alt attribute is used to give a short description of an image in case the image is not loaded in the web page due to some reason.
picture of a boy
picture of a boy Here, in place of the image the text is displayed contained in the alt attribute of the image.

The Anchor Element

HTML provides the facility of links in a web page to other web pages. By clicking on some text as a link, we can go to a different web page. This is called Hyper Linking of web pages. This makes a web page dynamic.
The anchor tag is used for this purpose. The location path of the web page to be linked is given in the "href" attribute. Href refers to Horizontal Reference. The text which is displyed as a link to the desired page is written in between the opening and closing tags.
text as the link
For example,
Go to Roseindia will create a link to the Roseindia Web Site.
Go to Roseindia
On clicking the above link, the Roseindia Home Page will be open.

Lists in HTML

Three different types of lists are used in HTML. Unorderd list, Ordered list and Definition list.
(i) Unordered list is one in which the listing of the items is unordered. The
    tag defines an Unordered list and items are described by the
  • tag. The Bullets appear as the default style in an Unordered list. We can also specify the style format as "circle" or "square" in the type attribute.

For example,
List of some fruits:


  • Apple

  • Banana

  • Orange

  • Mango


List of some fruits:
  • Apple
  • Banana
  • Orange
  • Mango
(ii) Similarly, an Ordered list is defined by
    tag.

For example,
List of some vehicles:


  1. Bicycle

  2. Motorbike

  3. Car

  4. Bus


List of some vehicles:
  1. Bicycle
  2. Motorbike
  3. Car
  4. Bus
1,2,3,....is the default ordering style (type="1") in an Ordered list. The type of ordering can be changed by specifying the value of the type attribute as "i" for Roman, "A" for alphabets etc.

(iii) A Definition list is one in which definition or description of the items are given. A Definition list is defined by
tag. The items are encoded in
(defintion term) tag and the description of the items are encoded in
(definition data) tag.

For example,
List of some beverages:


Tea

A type hot drink

Coffee

Another hot drink


List of some beverages:

Tea

A type of hot drink

Coffee

Another hot drink
All three
    ,
      ,
      has closing tags. But
    1. is optional.