Scribd
Upload
17 views

HTML

Uploaded by

Sri Krishna teja Aradhyula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

HTML

Uploaded by

Sri Krishna teja Aradhyula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

HTML Basics

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-
up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between
researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML
language.

HTML Document Structure

In its simplest form, following is an example of an HTML document:


<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
All body related tags are presented here
</body>
</html>

Save it in an HTML file Sample.htm/Sample.html using your favorite text editor like Notepad or Notepad
++ etc. Finally open it using a web browser like Internet Explorer or Google Chrome, or Firefox etc.

HTML Basic Tags

As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags
are enclosed within angle braces <Tag Name>/ <Tag Element>. Except few tags, most of the tags have
their corresponding closing tags. For example, <html> has its closing tag</html> and <body> tag has its
closing tag </body> tag etc.

1
Tag Description
This tag defines the document type and HTML
<!DOCTYPE...>
version.
This tag encloses the complete HTML document
and mainly comprises of document header which
<html> is represented by <head>...</head> and document
body which is represented by <body>...</body>
tags.
This tag represents the document's header which
<head> can keep other HTML tags like <title>, <link>
etc.
The <title> tag is used inside the <head> tag to
<title> mention the document title.
This tag represents the document's body which
<body> keeps other HTML tags like <h1>, <div>, <p>
etc.

HTML Text Formatting Tags

1. Bold Text tag: <b>...</b>


Anything that appears within <b>...</b> element, is displayed in bold.
2. Strong Text tag: <strong>...</strong>
Anything that appears within <strong>...</strong> element is displayed as important text.
3. Italic Tag: <i>...</i>
<i> tag is used to display the content in italic.
4. Emphasized Text tag: <em>...</em>
Anything that appears within <em>...</em> element is displayed as emphasized text.
5. Underline tag: <u>...</u>:
The HTML <u> tag is used to underline a text.
6. Marked Text tag: <mark>...</mark>
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
7. Strike Text tag: <strike>...</strike> or <del>...<del>
Anything that appears within <strike>...</strike> or <del>...</del>element is displayed with
strikethrough, which is a thin line through the text
8. Computer Code tag: <code>...</code>
Any programming code to appear on a Web page should be placed inside <code>...</code>tags.
Usually the content of the <code> element is presented in a monospaced font, just like the code in most
programming books.
9 Short Quotations tag: <q>...</q>
The <q>...</q> element is used when you want to add a double quote within a sentence.

2
10. Blink tag : <blink> ... </blink>
The HTML <blink> tag is used to enclose a text to make it blink. This tag was supported by
Netscape and now this is obsolete.
11. Preformatted text tag: <pre> ... </pre>
The HTML <pre> tag is used for indicating preformatted text. The code tag surrounds the code being
marked up.
Browsers normally render pre text in a fixed-pitched font, with whitespace intact, and without word wrap.

Examples:
1. Bold Text tag: <b> .. </b>
Anything that appears within <b> .. </b> element, is displayed in bold.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
The following word uses a <b>bold</b> typeface.
</body>
</html>

This will produce the following result:


The following word uses a bold typeface.

2. Strong Text tag: <strong>...</strong>


Anything that appears within <strong>...</strong> element is displayed as important text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
The following word uses a <strong>strong</strong> typeface.
</body>
</html>
This will produce the following result:
The following word uses a strong typeface.

3
3. Italic Tag: <i>...</i>

<i> tag is used to display the content in italic.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML i Tag</title>
</head>
<body>
The text displayed in <i> Italic</i> fashion.
</body>
</html>
This will produce the following result:
The text displayed in Italic fashion.

4. Emphasized Text tag: <em>...</em>


Anything that appears within <em>...</em> element is displayed as emphasized text.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
The following word uses a <em>emphasized</em> typeface.
</body>
</html>
This will produce the following result:
The following word uses an emphasized typeface.

5. Marked Text tag: <mark>...</mark>


Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
Example
<!DOCTYPE html>
<html>
<head>

4
<title>Marked Text Example</title>
</head>
<body>
The following word has been <mark>marked</mark> with yellow

</body>

</html>
This will produce the following result:
The following word has been marked with yellow.

6. Underline tag: <u>...</u>:

The HTML <u> tag is used to underline a text.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML u Tag</title>
</head>
<body>
<u>This is Underlined text</u>
</body>
</html>

This will produce the following result:

This is Underlined text

7. Strike Text tag: <strike>...</strike> or <del>...<del>


Anything that appears within <strike>...</strike> or <del>...</del>element is displayed with strikethrough,
which is a thin line through the text.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>

5
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a strikethrough typeface.

8. Computer Code tag: <code>...</code>


Any programming code to appear on a Web page should be placed inside <code>...</code>tags.
Usually the content of the <code> element is presented in a monospaced font, just like the code in most
programming books.

Example
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
This will produce the following result:
Regular text. This is code. Regular text.
9 Short Quotations tag: <q>...</q>
The <q>...</q> element is used when you want to add a double quote within a sentence.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML blockquote Tag</title>
</head>
<body>
<q>Welcome to html </q>
</body>
</html>
This will produce the following result:
“Welcome to html”

6
10. Blink tag : <blink> ... </blink>
The HTML <blink> tag is used to enclose a text to make it blink. This tag was supported by
Netscape and now this is obsolete.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML blink Tag</title>
</head>
<body>
<blink>This text will blink in Netscape Version 5.0</blink>
</body>
</html>
This will produce the following result:
This text will blink in Netscape Version 5.0

11. Preformatted text tag: <pre> </pre>


The HTML <pre> tag is used for indicating preformatted text. The code tag surrounds the code being
marked up. Browsers normally render pre text in a fixed-pitched font, with whitespace intact, and without
word wrap.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML pre Tag</title>
</head>
<body>
<pre>
This text is
in a fixed-pitch
font, and it preserves
both spaces and line breaks
</pre>
</body>
</html>

7
This will produce the following result:
This text is
in a fixed-pitch
font, and it preserves
both spaces and line breaks

HTML <marquee> Tag


Description
The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or
vertically down your web site page depending on the settings.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction=”up” behavior=”slide”>This is basic example of marquee scrolling from
bottom to up with slide fashion</marquee>
</body>
</html>
This will produce the following result:
This is basic example of marquee is in scrolling manner.
This is basic example of marquee scrolling from bottom to up with slide fashion
Marquee tag attributes:

Attribute Value Description

scroll
behavior slide Defines the type of scrolling.
alternate

rgb(x,x,x)
bgcolor #xxxxxx Deprecated-Defines the direction of scrolling the content.
colorname

up
down
direction Defines the direction of scrolling the content.
left
right

8
height pixels or % Defines the height of marquee.

hspace pixels Specifies horizontal space around the marquee.

Specifies how many times to loop. The default value is


loop number
INFINITE, which means that the marquee loops endlessly.

scrolldelay seconds Defines how long to delay between each jump.

scrollamount number Defines how how far to jump.

width pixels or % Defines the width of marquee.

vspace pixels Specifies vertical space around the marquee.

Linking Documents: <a>…..</a> (Hyper Links)


A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening
<a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked
document. Following is the simple syntax to use <a> tag.
Syntax:
<a href="Document URL" ... attributes-list>Link Text</a>
Example
Let's try following example which links http://www.google.com at your page:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.google.com" target="_self">Go to Google</a>
</body>
</html>
This will produce the following result, where you can click on the link generated to reach to the home page
of Google (in this example).

9
Click following link
Go to Google
The target Attribute
We have used target attribute in our previous example. This attribute is used to specify the location where
linked document is opened. Following are the possible options:

Option Description

_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

targetframe Opens the linked document in a named targetframe.

Example
Try following example to understand basic difference in few options given for target attribute.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href="sample.html" target="_blank">Opens in New</a> |
<a href="sample.html" target="_self">Opens in Self</a> |
<a href=" sample.html" target="_parent">Opens in Parent</a> |
<a href="sample.html" target="_top">Opens in Body</a>
</body>
</html>
This will produce the following result, where you can click on different links to understand the difference
between various options given for target attribute.
Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body

10
Insert Image: <img>….</img>
You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this
tag.

<img src="Image URL" ... attributes-list/>

The <img> tag is an empty tag, which means that it can contain only list of attributes and it has no closing
tag.

Example
To try following example, let's keep our HTML file test.html and image file test.jpg in the same directory:

<!DOCTYPE html>

<html>

<head>

<title>Using Image in Webpage</title>

</head>

<body>

<p>Simple Image Insert</p>

<img src="/html/images/test.jpg" alt="Test Image" />

</body>

</html>

This will produce the following result:

You can use PNG, JPG or GIF image file based on your comfort but make sure you specify correct image
file name in src attribute. Image name is always case sensitive.

11
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot
be displayed.

Set Image Width/Height


You can set image width and height based on your requirement using width and height attributes. You can
specify width and height of the image in terms of either pixels or percentage of its actual size.

Example

<!DOCTYPE html>

<html>

<head>

<title>Set Image Width and Height</title>

</head>

<body>

<p>Setting image width and height</p>

<img src="/html/images/test.png" alt="Test Image" width="150" height="100"/>

</body>

</html>

Image <img> attributes:

Attribute Value Description

align top Deprecated-Specifies the alignment for the image.


bottom
middle
left
right

alt text Specifies alternate text

border pixels Deprecated - Specifies the width of the image border.

height pixels or % Specifies the height of the image.

12
hspace pixels Deprecated - Amount of white space to be inserted to
the left and right of the object.

src URL the url of an image

vspace pixels Deprecated - Amount of white space to be inserted to


the top and bottom of the object.

width pixels or % Sets the width of an image in pixels or in %.

HTML Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more
list elements. Lists may contain:

 <ul> - An unordered list. This will list items using plain bullets.

 <ol> - An ordered list. This will use different schemes of numbers to list your items.

 <dl> - A definition list. This arranges your items in the same way as they are arranged in a
dictionary.

HTML Unordered Lists


An unordered list is a collection of related items that have no special order or sequence. This list is created
by using HTML <ul> tag. Each item in the list is marked with a bullet.
Example

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

13
This will produce following result:

 Beetroot
 Ginger
 Potato
 Radish

The type Attribute


 You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc.
Following are the possible options:

 <ul type="square">
 <ul type="disc">
 <ul type="circle">

Example
Following is an example where we used <ul type="square">

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

 Beetroot
 Ginger
 Potato
 Radish

14
Example
Following is an example where we used <ul type="disc"> :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
This will produce following result:

 Beetroot
 Ginger
 Potato
 Radish

Example
Following is an example where we used <ul type="circle"> :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>

15
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

o Beetroot
o Ginger
o Potato
o Radish

HTML Ordered Lists


If you are required to put your items in a numbered list instead of bulleted then HTML ordered list will be
used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>.
Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:
1. Beetroot
2. Ginger
3. Potato
4. Radish

16
The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number.
Following are the possible options:

<ol type="1"> - Default-Case Numerals.

<ol type="I"> - Upper-Case Numerals.

<ol type="i"> - Lower-Case Numerals.

<ol type="a"> - Lower-Case Letters.

<ol type="A"> - Upper-Case Letters.

Example
Following is an example where we used <ol type="1">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:

1. Beetroot
2. Ginger
3. Potato
4. Radish

17
Example
Following is an example where we used <ol type="I">

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<ol type="I">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

This will produce following result:

I. Beetroot
II. Ginger
III. Potato
IV. Radish

Example
Following is an example where we used <ol type="i">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>

18
</head>
<body>
<ol type="i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

i. Beetroot
ii. Ginger
iii. Potato
iv. Radish

Example
Following is an example where we used <ol type="A">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

19
A. Beetroot
B. Ginger
C. Potato
D. Radish

Example
Following is an example where we used <ol type="a">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:

a. Beetroot
b. Ginger
c. Potato
d. Radish

The start Attribute


You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are
the possible options:

<ol type="1" start="4"> - Numerals starts with 4.

<ol type="I" start="4"> - Numerals starts with IV.

<ol type="i" start="4"> - Numerals starts with iv.

20
<ol type="a" start="4"> - Letters starts with d.

<ol type="A" start="4"> - Letters starts with D.

Example
Following is an example where we used <ol type="i" start="4" >

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:

iv. Beetroot
v. Ginger
vi. Potato
vii. Radish

HTML Definition Lists


HTML and XHTML support a list style which is called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other
name/value list.

Definition List makes use of following three tags.

 <dl> - Defines the start of the list

 <dt> - A term

 <dd> - Term definition

21
 </dl> - Defines the end of the list

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

This will produce following result:

HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol

HTML Tables:

22
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and
columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not
need a border then you can use border="0".

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to
represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise
you can use <th> element in any row.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>

23
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes

There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in
your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the
distance between cell borders and the content within a cell.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

24
This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column. Similar
way you will use rowspan if you want to merge two or more rows.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td></tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

25
Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Table Header, Body, and Footer


Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar
to headers and footers in a word-processed document that remain the same for every page, while the body
is the main content holder 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
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
</table>
</body>
</html>
This will produce following result:

This is the head of the table

Cell 1 Cell 2 Cell 3 Cell 4

This is the foot of the table

26
HTML Forms

HTML Forms are required when you want to collect some data from the site visitor. For example during
user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP
Script or PHP script etc. The back-end application will perform required processing on the passed data
based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax:

<form action="Script URL" method="GET|POST">


form elements like input, textarea etc.
</form>

Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes:

Attribute Description

action Backend script ready to process your passed data.

method Method to be used to upload data. The most frequently used are GET and POST
methods.

target Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.

HTML Form Controls


There are different types of form controls that you can use to collect data using HTML form:

 Text Input Controls


 Checkboxes Controls
 Radio Box Controls
 Select Box Controls

27
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

Text Input Controls

There are three types of text input used on forms:

 Single-line text input controls - This control is used for items that require only one line of user
input, such as search boxes or names. They are created using HTML <input> tag.

 Password input controls - This is also a single-line text input but it masks the character as soon as
a user enters it. They are also created using HTMl <input> tag.

 Multi-line text input controls - This is used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or names. They
are created using HTML <input> tag.

Example
Here is a basic example of a single-line text input used to take first name and last name:

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form>
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>

This will produce following result:

First name:
Last name:

Attributes
Following is the list of attributes for <input> tag for creating text field.

28
Attribute Description

type Indicates the type of input control and for text input control it will be
set to text.

name Used to give a name to the control which is sent to the server to be
recognized and get the value.

value This can be used to provide an initial value inside the control.

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


characters.

maxlength Allows to specify the maximum number of characters a user can enter
into the text box.

Password input controls


This is also a single-line text input but it masks the character as soon as a user enters it. They are also
created using HTML <input> tag but type attribute is set to password.

Example
Here is a basic example of a single-line password input used to take user password:

<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>

This will produce following result:

User ID :
Password:

Attributes
Following is the list of attributes for <input> tag for creating password field.

29
Attribute Description

Type Indicates the type of input control and for password input control it
will be set to password.

Name Used to give a name to the control which is sent to the server to be
recognized and get the value.

Value This can be used to provide an initial value inside the control.

Size Allows to specify the width of the text-input control in terms of


characters.

Maxlength Allows to specify the maximum number of characters a user can enter
into the text box.

Multiple-Line Text Input Controls


This is used when the user is required to give details that may be longer than a single sentence. Multi-line
input controls are created using HTML <textarea> tag.
Example
Here is a basic example of a multi-line text input used to take item description:

<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>

This will produce following result:

Description :

30
Attributes
Following is the list of attributes for <textarea> tag.

Attribute Description

name Used to give a name to the control which is sent to the server to be
recognized and get the value.

rows Indicates the number of rows of text area box.

cols Indicates the number of columns of text area box

Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are
also created using HTML <input> tag but type attribute is set to checkbox.

Example
Here is an example HTML code for a form with two checkboxes:

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>

This will produce following result:

Maths Physics

Attributes
Following is the list of attributes for <checkbox> tag.

31
Attribute Description

type Indicates the type of input control and for checkbox input control it
will be set to checkbox.

name Used to give a name to the control which is sent to the server to be
recognized and get the value.

value The value that will be used if the checkbox is selected.

checked Set to checked if you want to select it by default.

Radio Button Control


Radio buttons are used when out of many options, just one option is required to be
selected. They are also created using HTML <input> tag but type attribute is set
to radio.

Example
Here is example HTML code for a form with two radio buttons:

<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>

This will produce following result:

Maths Physics

Attributes
Following is the list of attributes for radio button.

32
Attribute Description

Type Indicates the type of input control and for checkbox input control it
will be set to radio.

Name Used to give a name to the control which is sent to the server to be
recognized and get the value.

Value The value that will be used if the radio box is selected.

Checked Set to checked if you want to select it by default.

Select Box Control


A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more
options.

Example
Here is example HTML code for a form with one drop down box

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>

This will produce following result:

Maths

Attributes
Following is the list of important attributes of <select> tag:

33
Attribute Description

name Used to give a name to the control which is sent to the server to be
recognized and get the value.

size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select multiple items from the
menu.

Following is the list of important attributes of <option> tag:

Attribute Description

value The value that will be used if an option in the select box box is
selected.

selected Specifies that this option should be the initially selected value when
the page loads.

label An alternative way of labeling options

File Upload Box


If you want to allow a user to upload a file to your web site, you will need to use a
file upload box, also known as a file select box. This is also created using the
<input> element but type attribute is set to file.

Example
Here is example HTML code for a form with one file upload box:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>

34
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

This will produce following result:

Attributes
Following is the list of important attributes of file upload box:

Attribute Description

name Used to give a name to the control which is sent to the server to be
recognized and get the value.

accept Specifies the types of files that the server accepts.

Button Controls
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input> tag by setting its type attribute to button. The type
attribute can take the following values:

Type Description

submit This creates a button that automatically submits a form.

reset This creates a button that automatically resets form controls to their
initial values.

button This creates a button that is used to trigger a client-side script when the
user clicks that button.

image This creates a clickable button but we can use an image as background of
the button.

Example
Here is example HTML code for a form with three types of buttons:

<!DOCTYPE html>
<html>
<head>

35
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>

This will produce following result:

Submit Reset

Hidden Form Controls


Hidden form controls are used to hide data inside the page which later on can be
pushed to the server. This control hides inside the code and does not appear on the
actual page. For example, following hidden form is being used to keep current page
number. When a user will click next page then the value of hidden control will be
sent to the web server and there it will decide which page has be displayed next
based on the passed current page.

Example
Here is example HTML code to show the usage of hidden control:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>

36
</html>

This will produce following result:

This is page 10

Submit Reset

Example Student Registration Form in table format

<html>
<head>
<title>Forms</title>
</head>
<body>
<form>
<table border=1 align="center">
<tr>
<th colspan="2"><h3>Student Registration Form</h3></th>
</tr>
<tr>
<td>Enter Your Name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Enter your password:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" name="gender" value="Male">
<input type="radio" name="gender" value="Female"></td>
</tr>
<tr>
<td>Languages Known:</td>
<td><input type="checkbox" name="Languages" value="Telugu">Telugu
<input type="checkbox" name="languages" value="English">English
<input type="checkbox" name="hobbies" value="Hindi">Hindi</td>
</tr>
<tr>
<td>Choose ur country</td>
<td><select>
<option>India</option>
<option>Australia</option>
<option>England</option>
</select>
</td>
</tr>
<tr>
<td>Give your feedback</td>
<td><textarea rows="4">please enter your feedback</textarea>
</td>
</tr>
<tr>

37
<td>Enter your DOB:</td>
<td><input type="date" name="dob" value="DOB"></td>
</tr>
<tr>
<td>Choose ur best color:</td>
<td><input type="color" name="color" value="color"></td>
</tr>
<tr>
<td>Choose ur file:</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit">
<input type="Reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>

Output:

HTML Frames
HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as a
frameset. The window is divided into frames in a similar way the tables are organized: into rows and
columns.

38
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your WebPages:

 Some smaller devices cannot cope with frames often because their screen is not big enough to be
divided up.

 Sometimes your page will be displayed differently on different computers due to different screen
resolution.

 The browser's back button might not work as the user hopes.

 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines
how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.

Following is the example to create three horizontal frames:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="top.html" />
<frame name="main" src="middle.html" />
<frame name="bottom" src="bottom.html" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

This will produce following result:

39
Example
Let's put above example as follows, here we replaced rows attribute by cols and changed their width. This
will create all the three frames vertically:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="left.html" />
<frame name="center" src="middle.html" />
<frame name="right" src="right.html" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

This will produce following result:

The <frameset> Tag Attributes


Following are important attributes of the <frameset> tag:

Attribute Description

40
Cols specifies how many columns are contained in the frameset and the size of
each column. You can specify the width of each column in one of four ways:

 Absolute values in pixels. For example to create three vertical


frames, use cols="100, 500,100".

 A percentage of the browser window. For example to create three


vertical frames, use cols="10%, 80%,10%".

 Using a wildcard symbol. For example to create three vertical


frames, use cols="10%, *,10%". In this case wildcard takes
remainder of the window.

 As relative widths of the browser window. For example to create


three vertical frames, use cols="3*,2*,1*". This is an alternative to
percentages. You can use relative widths of the browser window.
Here the window is divided into sixths: the first column takes up
half of the window, the second takes one third, and the third takes
one sixth.

Rows This attribute works just like the cols attribute and takes the same values,
but it is used to specify the rows in the frameset. For example to create two
horizontal frames, use rows="10%, 90%". You can specify the height of
each row in the same way as explained above for columns.

border This attribute specifies the width of the border of each frame in pixels. For
example border="5". A value of zero means no border.

frameborder This attribute specifies whether a three-dimensional border should be


displayed between frames. This attrubute takes value either 1 (yes) or 0
(no). For example frameborder="0" specifies no border.

framespacing This attribute specifies the amount of space between frames in a frameset.
This can take any integer value. For example framespacing="10" means
there should be 10 pixels spacing between each frames.

The <frame> Tag Attributes


Following are important attributes of <frame> tag:

Attribute Description

41
Src This attribute is used to give the file name that should be loaded in the frame.
Its value can be any URL. For example, src="/html/top_frame.htm" will load an
HTML file available in html directory.

Name This attribute allows you to give a name to a frame. It is used to indicate which
frame a document should be loaded into. This is especially important when you
want to create links in one frame that load pages into an another frame, in
which case the second frame needs a name to identify itself as the target of the
link.

frameborder This attribute specifies whether or not the borders of that frame are shown; it
overrides the value given in the frameborder attribute on the <frameset> tag if
one is given, and this can take values either 1 (yes) or 0 (no).

marginwidth This attribute allows you to specify the width of the space between the left and
right of the frame's borders and the frame's content. The value is given in
pixels. For example marginwidth="10".

marginheight This attribute allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents. The value is given in pixels. For
example marginheight="10".

noresize By default you can resize any frame by clicking and dragging on the borders of
a frame. The noresize attribute prevents a user from being able to resize the
frame. For example noresize="noresize".

scrolling This attribute controls the appearance of the scrollbars that appear on the
frame. This takes values either "yes", "no" or "auto". For example
scrolling="no" means it should not have scroll bars.

Browser Support for Frames


If a user is using any old browser or any browser which does not support frames then <noframes> element
should be displayed to the user.

So you must place a <body> element inside the <noframes> element because the <frameset> element is
supposed to replace the <body> element, but if a browser does not understand <frameset> element then it
should understand what is inside the <body> element which is contained in a <noframes> element.

You can put some nice message for your user having old browsers. For example Sorry!! your browser does
not support frames. as shown in the above example.

Frame's name and target attributes

42
One of the most popular uses of frames is to place navigation bars in one frame and then load main pages
into a separate frame.

Let's see following example where a test.html file has following code:

<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="20%, *">
<frame src="menu.html" name="menu_page" />
<frame src="main.html" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

Here we have created two columns to fill with two frames. The first frame is 200 pixels wide and
will contain the navigation menubar implemented by menu.html file. The second column fills in remaining
space and will contain the main part of the page and it is implemented by main.html file. For all the three
links available in menubar, we have mentioned target frame as main_page, so whenever you click any of
the links in menubar, available link will open in main_page.

Following is the content of menu.html file

<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
<a href="https://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="https://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
<a href="https://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
</html>

Following is the content of main.html file:

43
<!DOCTYPE html>
<html>
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>

When we load test.html file, it produces following result:

Now you can try to click links available in the left panel and see the result. The target attribute can also
take one of the following values:

Option Description

_self Loads the page into the current frame.

_blank Loads a page into a new browser window.opening a new window.

_parent Loads the page into the parent window, which in the case of a single frameset is the main
browser window.

_top Loads the page into the browser window, replacing any current frames.

targetframe Loads the page into a named targetframe.

44

You might also like