HTML
------------------------------------------------------------------------------------------------------------
Hyper Text Markup Language
(HTML)
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
INDEX
Topics Page No
1. What is HTML and why is it used? 3
2. Basic HTML Page Structure 3
3. HTML Head Section
3.1. Meta 4
3.2. Doctype 5
3.3. Link 6
4. HTML Paragraph 7
5. HTML Hyperlinks 10
6. HTML Images 11
7. HTML Tables 15
7.1. Cellpadding 20
7.2. Cellspacing 21
8. Special Characters 22
9. Ordered and Unordered Lists 23
10. HTML Forms 24
11. HTML Input Fields
11.1. Textbox 24
11.2. Radio Button 25
11.3. Checkboxes 25
11.4. Password 26
11.5. Combo Box 27
11.6. Textarea 28
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
What is HTML?
HTML is a language for describing web pages.
● HTML stands for Hyper Text Markup Language
● HTML is not a programming language, it is a markup language
● A markup language is a set of markup tags
● HTML uses markup tags to describe web pages
BASIC HTML Page Structure
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>
Page Content
</p>
</body>
</html>
HTML Head
The Head Element
The head element contains general information, also called
meta-information, about a document. Meta means "information about".
You can say that meta-data means information about data, or
meta-information means information about information.
Information Inside the Head Element
The elements inside the head element should not be displayed by a
browser.
According to the HTML standard, only a few tags are legal inside the head
section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>.
Look at the following illegal construct:
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<head>
<p>This is some text</p>
</head>
In this case the browser has two options:
● Display the text because it is inside a paragraph element
● Hide the text because it is inside a head element
If you put an HTML element like <h1> or <p> inside a head element like
this, most browsers will display it, even if it is illegal.
Should browsers forgive you for errors like this? We don't think so.
Others do.
Head Tags
Tag Description
<head> Defines information about the document
<title> Defines the document title
s<link> Defines a resource reference
<meta> Defines meta information
Tag Description
<!DOCTYPE> Defines the document type. This tag goes before the <html> start tag.
HTML Meta
The head element contains general information (meta-information) about a
document.
HTML also includes a meta element that goes inside the head element. The
purpose of the meta element is to provide meta-information about the
document.
Most often the meta element is used to provide information that is
relevant to browsers or search engines like describing the content of
your document.
Keywords for Search Engines
Some search engines on the WWW will use the name and content attributes
of the meta tag to index your pages.
This meta element defines a description of your page:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML,
and XHTML" />
This meta element defines keywords for your page:
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript"
/>
The intention of the name and content attributes is to describe the
content of a page.
HTML <!DOCTYPE> Declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Definition and Usage
The doctype declaration should be the very first thing in an HTML document, before the <html>
tag.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what
version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules
for the markup language, so that the browsers can render the content correctly.
Doctypes Available in the W3C Recommendations
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does not include presentational or
deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, including presentational and deprecated
elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does not include presentational or
deprecated elements (like font). Framesets are not allowed. The markup must also be written as
well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
XHTML 1.0 Transitional
This DTD contains all HTML elements and attributes, including presentational and deprecated
elements (like font). Framesets are not allowed. The markup must also be written as well-formed
XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]
XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide
ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[Link]
HTML <link> tag
The <link> tag defines the relationship between a document and an
external resource.
The <link> tag is most used to link to style sheets.
HTML <title> tag
Definition and Usage
The <title> tag defines the title of the document.
The title element is required in all HTML/XHTML documents.
The title element:
● defines a title in the browser toolbar
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
● provides a title for the page when it is added to favorites
● displays a title for the page in search-engine results
HTML Tags
HTML markup tags are usually called HTML tags
● HTML tags are keywords surrounded by angle brackets like
<html>
● HTML tags normally come in pairs like <b> and </b>
● The first tag in a pair is the start tag, the second tag
is the end tag
● Start and end tags are also called opening tags and closing
tags.
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or
the .html extension.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Links
HTML links are defined with the <a> tag.
Example:
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<a href="[Link] is a link</a>
HTML Images
HTML images are defined with the <img> tag.
Example:
<img src="[Link]" width="104" height="142" />
HTML Comments
Comments can be inserted in the HTML code to make it more
readable and understandable. Comments are ignored by the
browser and are not displayed.
Comments are written like this:
Example:- <!-- This is a comment -->
Note: There is an exclamation point after the opening
bracket, but not before the closing bracket.
HTML Tip - How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they
do that?"
To find out, click the VIEW option in your browser's
toolbar and select SOURCE or PAGE SOURCE. This will open a
window that shows you the HTML code of the page.
HTML Line Breaks
Use the <br /> tag if you want a line break (a new line)
without starting a new paragraph:
Example:-
<p>This is<br />a para<br />graph with line breaks</p>
The <br /> element is an empty HTML element. It has no end
tag.
<br> or <br />
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
In XHTML, XML, and future versions of HTML, HTML elements with no
end tag (closing tag) are not allowed.
Even if <br> works in all browsers, writing <br /> instead
is more future proof.
HTML Text Formatting
This text is bold
This text is big
This text is italic
This is computer output
This is subscript
and superscript
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like
bold or italic text.
These HTML tags are called formatting tags.
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead
HTML Links
Hyperlinks, Anchors, and Links
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
In web terms, a hyperlink is a reference (an address) to a
resource on the web.
Hyperlinks can point to any resource on the web: an HTML
page, an image, a sound file, a movie, etc.
An anchor is a term used to define a hyperlink destination
inside a document.
The HTML anchor element <a> is used to define both
hyperlinks and anchors.
We will use the term HTML link when the <a> element points
to a resource, and the term HTML anchor when the <a>
elements defines an address inside a document..
An HTML Link
Link syntax:
<a href="url">Link text</a>
The start tag contains attributes about the link.
The element content (Link text) defines the part to be
displayed.
Note: The element content doesn't have to be text. You can
link from an image or any other HTML element.
The href Attribute
The href attribute defines the link "address".
This <a> element defines a link to Infinitech:
<a href="[Link] Infinitech Web
Site!</a>
The target Attribute
The target attribute defines where the linked document will
be opened.
The code below will open the document in a new browser
window:
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Example
<a href="[Link]
target="_blank">Visit Infinitech Website!</a>
The name Attribute
When the name attribute is used, the <a> element defines a
named anchor inside a HTML document.
Named anchor are not displayed in any special way. They are
invisible to the reader.
Named anchor syntax:
<a name="label">Any content</a>
The link syntax to a named anchor:
<a href="#label">Any content</a>
The # in the href attribute defines a link to a named
anchor.
Example:
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
A link to the Useful Tips Section from the same document:
<a href="#tips">
Jump to the Useful Tips Section</a>
A link to the Useful Tips Section from another document:
<a href="[Link]
Jump to the Useful Tips Section</a>
HTML IMAGES :
Inserting Images:
<html>
<body>
<p>
An image:
<img src="[Link]"
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
width="144" height="50">
</p>
<p>
A moving image:
<img src="[Link]"
width="48" height="48">
</p>
<p>
Note that the syntax of inserting a moving image is no different from
that of a non-moving image.
</p>
</body>
</html>
Insert Images From Different Locations:
<html>
<body>
<p>An image from SMGSM:</p>
<img src="[Link]
</body>
</html>
The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains
attributes only and it has no closing tag.
To display an image on a page, you need to use the src
attribute. Src stands for "source". The value of the src
attribute is the URL of the image you want to display on
your page.
The syntax of defining an image:
<img src="url" />
The URL points to the location where the image is stored.
An image named "[Link]" located in the directory "images"
on "[Link]" has the URL:
[Link]
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
The browser puts the image where the image tag occurs in
the document. If you put an image tag between two
paragraphs, the browser shows the first paragraph, then the
image, and then the second paragraph.
The Alt Attribute
The alt attribute is used to define an "alternate text" for
an image. The value of the alt attribute is an
author-defined text:
<img src="[Link]" alt="Big Boat" />
The "alt" attribute tells the reader what he or she is
missing on a page if the browser can't load images. The
browser will then display the alternate text instead of the
image. It is a good practice to include the "alt" attribute
for each image on a page, to improve the display and
usefulness of your document for people who have text-only
browsers.
Basic Notes - Useful Tips
If an HTML file contains ten images - eleven files are
required to display the page right. Loading images take
time, so my best advice is: Use images carefully.
Background Images:
<html>
<body background="[Link]">
<h3>Look: A background image!</h3>
<p>If the image is smaller than the page, the image will repeat
itself.</p>
</body>
</html>
Alignment of Image:
<html>
<body>
<p>
An image
<img src="[Link]"
align="bottom" width="48" height="48">
in the text
</p>
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<p>
An image
<img src ="[Link]"
align="middle" width="48" height="48">
in the text
</p>
<p>
An image
<img src ="[Link]"
align="top" width="48" height="48">
in the text
</p>
<p>Note that bottom alignment is the default alignment</p>
<p>
An image
<img src ="[Link]"
width="48" height="48">
in the text
</p>
<p>
<img src ="[Link]"
width="48" height="48">
An image before the text
</p>
<p>
An image after the text
<img src ="[Link]"
width="48" height="48">
</p>
</body>
</html>
Image Float , Size, Hyperlink of Image and ALT tag:
<html>
<body>
<p>
<img src ="[Link]"
align ="left" width="48" height="48" alt=”An Image”>
A paragraph with an image. The align attribute of the image is set to
"left". The image will float to the left of this text.
</p>
<p>
<img src ="[Link]"
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
align ="right" width="58" height="58" alt=”An Image”>
A paragraph with an image. The align attribute of the image is set to
"right". The image will float to the right of this text.
</p>
<p>
You can also use an image as a link:
<a href="[Link]">
<img border="0" src="[Link]" width="65" height="38">
</a>
</p>
</body>
</html>
Note: You can make a picture larger or smaller changing the values in the
"height" and "width" attributes of the img tag.
ALT Tag: The "alt" attribute tells the reader what he or she is missing
on a page if the browser can't load images. It is a good practice to
include the "alt" attribute for each image on a page.
HTML TABLES
Table and Border:
Tables are defined with the <table> tag. A table is divided into rows
(with the <tr> tag), and each row is divided into data cells (with the
<td> tag). The letters td stands for "table data," which is the content
of a data cell. A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
If you do not specify a border attribute the table will be displayed
without any borders. Sometimes this can be useful, but most of the time,
you want the borders to show.
To display a table with borders, you will have to use the
border attribute:
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="4">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="8">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Empty Cells in a Table
Table cells with no content are not displayed very well in
most browsers.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1
Note that the borders around the empty table cell are
missing (NB! Mozilla Firefox displays the border).
To avoid this, add a non-breaking space ( ) to empty
data cells, to make the borders visible:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1
Basic Notes - Useful Tips
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad
browser support. Expect this to change in future versions of XHTML.
Table with no border
Make border = “0”
Headings in a table
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
</tr>
<tr>
<td>Bill Gates</td>
</tr>
</table>
</body>
</html>
Empty cells
To avoid empty cells insert in a cell
Table with a caption
<html>
<body>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output:
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
My Caption
100 200 300
400 500 600
Table cells that span more than one row/column
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Output:
Name Telephone
Bill Gates 555 77 854 555 77 855
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
First Name: Bill Gates
555 77 854
Telephone:
555 77 855
Tags inside a table
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
Cell padding
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Without cellpadding:
First Row
Second Row
With cellpadding:
First Row
Second Row
Cell spacing
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
Without cellspacing:
First Row
Second Row
With cellspacing:
First Row
Second Row
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Add a background color or a background image to a table
<h4>A background color:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1"
background="[Link]">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
A background color:
First Row
Second Row
Add a background color or a background image to a table
cell
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="[Link]">
Second</td>
<td>Row</td>
</tr>
</table>
Cell backgrounds:
First Row
Second Row
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Special Characters
Code Symbol Description
™ ™ Trademark
& & Ampersand
® ® Registered trademark
© © Copyright
† † Dagger
» » Right pointing double angle
quotation mark
« « Left pointing double angle
quotation mark
— — Em-dash
° 30° Degree
¼ ¼ Quarter
½ ½ Half
¾ ¾ Three quarters
· · Middle dot
¡ ¡ Inverted exclamation mark
Ordered and Unordered List in HTML
Unordered Lists
An unordered list is a list of items. The list items are
marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:
● Coffee
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
● Milk
Inside a list item you can put paragraphs, line breaks,
images, links, other lists, etc.
Ordered Lists
An ordered list is also a list of items. The list items are
marked with numbers.
An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Here is how it looks in a browser:
1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks,
images, links, other lists, etc.
HTML Code for Forms and Input Fields
Forms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter
information (like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
<form>
.
input elements
.
</form>
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Input
The most used form tag is the <input> tag. The type of
input is specified with the type attribute. The most
commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type
letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
How it looks in a browser:
First name:
Last name:
Note that the form itself is not visible. Also note that in
most browsers, the width of the text field is 20 characters
by default.
Radio Buttons
Radio Buttons are used when you want the user to select one
of a limited number of choices.
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
How it looks in a browser:
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Male
Female
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or
more options of a limited number of choices.
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
How it looks in a browser:
I have a bike:
I have a car:
I have an airplane:
The Form's Action Attribute and the
Submit Button
When the user clicks on the "Submit" button, the content of
the form is sent to the server. The form's action attribute
defines the name of the file to send the content to. The
file defined in the action attribute usually does something
with the received input.
<form name="input" action="html_form_submit.asp"
method="get">
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Input Type Password in HTML
Note that when you type characters in a password field, the
browser displays asterisks or bullets instead of the
characters.
Example:
<html>
<body>
<form action="">
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
</body>
</html>
Output:
Simple Dropdown List in HTML
Example:
<select name="cars">
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Output:
Note : If in option tag selected =”selected” is specified then specific
value will be selected by default.
Example:
<option value="fiat" selected="selected">Fiat</option>
Output:
Textarea in HTML
Example:
<textarea rows=”10” cols=”5”>
Welcome to our Website
</textarea>
Output:
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------