Scribd
Upload
273 views75 pages

HTML - Backgrounds: Note

The document discusses three ways to decorate webpage backgrounds in HTML: 1. Using background colors by specifying color names, hexadecimal codes, or RGB values for tags like <body> and <table>. 2. Setting background images for tags with the "background" attribute. 3. Creating patterned or transparent backgrounds using small patterned or transparent GIF/PNG images.

Uploaded by

abinash bapi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
273 views75 pages

HTML - Backgrounds: Note

The document discusses three ways to decorate webpage backgrounds in HTML: 1. Using background colors by specifying color names, hexadecimal codes, or RGB values for tags like <body> and <table>. 2. Setting background images for tags with the "background" attribute. 3. Creating patterned or transparent backgrounds using small patterned or transparent GIF/PNG images.

Uploaded by

abinash bapi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 75

HTML – Backgrounds

By default, your webpage background is


white in color. You may not like it, but no
worries. HTML provides you following two
good ways to decorate your webpage
background.
•HTML Background with Colors
•HTML Background with Images
Now let's see both the approaches one by
one using appropriate examples.

Html Background with Colors

The bgcolor attribute is used to control the


background of an HTML element, specifically
page body and table backgrounds.

Note − The bgcolor attribute
deprecated in HTML5. Do not use
this attribute.
Following is the syntax to use bgcolor
attribute with any HTML tag.
<tagname bgcolor =
"color_value"...>
This color_value can be given in any of the
following formats −
<!-- Format 1 - Use color name --
>
<table bgcolor = "lime" >

<!-- Format 2 - Use hex value -->


<table bgcolor = "#f1f1f1" >

<!-- Format 3 - Use color value


in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Example

Here are the examples to set background of


an HTML tag −

<!DOCTYPE html>
<html>
<head>
<title>HTML Background
Colors</title>
</head>

<body>
<!-- Format 1 - Use color
name -->
<table bgcolor = "yellow"
width = "100%">
<tr>
<td>
This background is
yellow
</td>
</tr>
</table>

<!-- Format 2 - Use hex


value -->
<table bgcolor = "#6666FF"
width = "100%">
<tr>
<td>
This background is
sky blue
</td>
</tr>
</table>

<!-- Format 3 - Use color


value in RGB terms -->
<table bgcolor =
"rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is
green
</td>
</tr>
</table>
</body>

</html>
This will produce the following result −

Object 1

Html Background with Images

The background attribute can also be used


to control the background of an HTML
element, specifically page body and table
backgrounds. You can specify an image to
set background of your HTML page or table.

Note − The background attribute
deprecated in HTML5. Do not use
this attribute.
Following is the syntax to use background
attribute with any HTML tag.

Note − The background attribute is
deprecated and it is recommended to
use Style Sheet for background
setting.
<tagname background = "Image
URL"...>
The most frequently used image formats are
JPEG, GIF and PNG images.
Example

Here are the examples to set background


images of a table.

<!DOCTYPE html>
<html>

<head>
<title>HTML Background
Images</title>
</head>

<body>
<!-- Set table background
-->
<table background =
"/images/html.gif" width = "100%"
height = "100">
<tr><td>
This background is
filled up with HTML image.
</td></tr>
</table>
</body>

</html>
This will produce the following result −

Object 2
Patterned & Transparent Backgrounds

You might have seen many pattern or


transparent backgrounds on various
websites. This simply can be achieved by
using patterned image or transparent image
in the background.
It is suggested that while creating patterns or
transparent GIF or PNG images, use the
smallest dimensions possible even as small
as 1x1 to avoid slow loading.
Example

Here are the examples to set background


pattern of a table −

<!DOCTYPE html>
<html>

<head>
<title>HTML Background
Images</title>
</head>

<body>
<!-- Set a table background
using pattern -->
<table background =
"/images/pattern1.gif" width =
"100%" height = "100">
<tr>
<td>
This background is
filled up with a pattern image.
</td>
</tr>
</table>

<!-- Another example on


table background using pattern --
>
<table background =
"/images/pattern2.gif" width =
"100%" height = "100">
<tr>
<td>
This background is
filled up with a pattern image.
</td>
</tr>
</table>
</body>

</html>
This will produce the following result −

Object 3
HTML – Colors

Colors are very important to give a good look


and feel to your website. You can specify
colors on page level using <body> tag or you
can set colors for individual tags
using bgcolor attribute.
The <body> tag has following attributes
which can be used to set different colors −
•bgcolor − sets a color for the
background of the page.
•text − sets a color for the body text.
•alink − sets a color for active links or
selected links.
•link − sets a color for linked text.
•vlink − sets a color for visited links − that
is, for linked text that you have already
clicked on.
HTML Color Coding Methods

There are following three different methods


to set colors in your web page −
•Color names − You can specify color
names directly like green, blue or red.
•Hex codes − A six-digit code
representing the amount of red, green,
and blue that makes up the color.
•Color decimal or percentage values −
This value is specified using the rgb( )
property.
Now we will see these coloring schemes one
by one.

HTML Colors - Color Names

You can specify direct a color name to set


text or background color. W3C has listed 16
basic color names that will validate with an
HTML validator but there are over 200
different color names supported by major
browsers.
Note − Check a complete list of HTML Color
Name.
W3C Standard 16 Colors

Here is the list of W3C Standard 16 Colors


names and it is recommended to use them.
Bl Sil W
Gr
ac ve hit
ay
k r e

Ye Fu
Li Aq
llo chs
me ua
w ia

Gr Pu
Re Bl
ee rpl
d ue
n e

M
Ol Na Te
aro
ive vy al
on
Example

Here are the examples to set background of


an HTML tag by color name −

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by
Name</title>
</head>

<body text = "blue" bgcolor =


"green">
<p>Use different color
names for for body and table and
see the result.</p>

<table bgcolor = "black">


<tr>
<td>
<font color =
"white">This text will appear
white on black background.</font>
</td>
</tr>
</table>
</body>

</html>
HTML Colors - Hex Codes

A hexadecimal is a 6 digit representation of a


color. The first two digits(RR) represent a red
value, the next two are a green value(GG),
and the last are the blue value(BB).
A hexadecimal value can be taken from any
graphics software like Adobe Photoshop,
Paintshop Pro or MS Paint.
Each hexadecimal code will be preceded by
a pound or hash sign #. Following is a list of
few colors using hexadecimal notation.
Colo
Colo
r
r
HEX

#000
 
000

#FF0
 
000

#00F
 
F00

#000
 
0FF

#FFF
 
F00

  #00F
FFF

#FF0
 
0FF

#C0
  C0C
0

#FFF
 
FFF

Example

Here are the examples to set background of


an HTML tag by color code in hexadecimal −

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by
Hex</title>
</head>

<body text = "#0000FF" bgcolor


= "#00FF00">
<p>Use different color hexa
for for body and table and see
the result.</p>

<table bgcolor = "#000000">


<tr>
<td>
<font color =
"#FFFFFF">This text will appear
white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML Colors - RGB Values

This color value is specified using


the rgb( ) property. This property takes three
values, one each for red, green, and blue.
The value can be an integer between 0 and
255 or a percentage.

Note − All the browsers does not


support rgb() property of color so it is
recommended not to use it.
Following is a list to show few colors using
RGB values.
Color
Color
RGB

rgb(0,0,
 
0)

rgb(255
 
,0,0)
rgb(0,2
 
55,0)

rgb(0,0,
 
255)

rgb(255
 
,255,0)

rgb(0,2
 
55,255)

rgb(255
 
,0,255)

rgb(192
  ,192,19
2)

rgb(255
  ,255,25
5)
Example

Here are the examples to set background of


an HTML tag by color code using rgb()
values −

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by RGB
code</title>
</head>

<body text = "rgb(0,0,255)"


bgcolor = "rgb(0,255,0)">
<p>Use different color code
for for body and table and see
the result.</p>

<table bgcolor =
"rgb(0,0,0)">
<tr>
<td>
<font color =
"rgb(255,255,255)">This text will
appear white on black
background.</font>
</td>
</tr>
</table>
</body>

</html>
Browser Safe Colors

Here is the list of 216 colors which are


supposed to be safest and computer
independent colors. These colors very from
hexa code 000000 to FFFFFF and they will
be supported by all the computers having
256 color palette.
000 000 000 000 000 000
0C
000 033 066 099 0FF
C

003
003 003 003 003 003
3C
300 333 366 399 3FF
C

006
006 006 006 006 006
6C
600 633 666 699 6FF
C

009
009 009 009 009 009
9C
900 933 966 999 9FF
C

00 00 00 00 00C 00C
CC CC CC CC CC CF
00 33 66 99 C F

00F 00F 00F 00F 00F 00F


F00 F33 F66 F99 FC FFF
C

330
330 330 330 330 330
0C
000 033 066 099 0FF
C

333
333 333 333 333 333
3C
300 333 366 399 3FF
C

336
336 336 336 336 336
6C
600 633 666 699 6FF
C

339
339 339 339 339 339
9C
900 933 966 999 9FF
C

33 33 33 33 33C 33C
CC CC CC CC CC CF
00 33 66 99 C F
33F
33F 33F 33F 33F 33F
FC
F00 F33 F66 F99 FFF
C

660
660 660 660 660 660
0C
000 033 066 099 0FF
C

663
663 663 663 663 663
3C
300 333 366 399 3FF
C

666
666 666 666 666 666
6C
600 633 666 699 6FF
C

669
669 669 669 669 669
9C
900 933 966 999 9FF
C

66 66 66 66 66C 66C
CC CC CC CC CC CF
00 33 66 99 C F

66F
66F 66F 66F 66F 66F
FC
F00 F33 F66 F99 FFF
C

990
990 990 990 990 990
0C
000 033 066 099 0FF
C

993
993 993 993 993 993
3C
300 333 366 399 3FF
C

996
996 996 996 996 996
6C
600 633 666 699 6FF
C

999
999 999 999 999 999
9C
900 933 966 999 9FF
C
99 99 99 99 99C 99C
CC CC CC CC CC CF
00 33 66 99 C F

99F
99F 99F 99F 99F 99F
FC
F00 F33 F66 F99 FFF
C

CC CC CC CC CC CC
000 003 006 009 00C 00F
0 3 6 9 C F

CC CC CC CC CC CC
330 333 336 339 33C 33F
0 3 6 9 C F

CC CC CC CC CC CC
660 663 666 669 66C 66F
0 3 6 9 C F

CC CC CC CC CC CC
990 993 996 999 99C 99F
0 3 6 9 C F

CC CC CC CC CC CC
CC CC CC CC CC CC
00 33 66 99 CC FF

CC CC CC CC CC CC
FF FF FF FF FF FFF
00 33 66 99 CC F

FF FF FF FF FF0
FF0
000 003 006 009 0C
0FF
0 3 6 9 C

FF FF FF FF FF3
FF3
330 333 336 339 3C
3FF
0 3 6 9 C

FF FF FF FF FF6
FF6
660 663 666 669 6C
6FF
0 3 6 9 C
FF FF FF FF FF9
FF9
990 993 996 999 9C
9FF
0 3 6 9 C

FF FF FF FF FF FF
CC CC CC CC CC CC
00 33 66 99 CC FF

FF FF FF FF FFF
FFF
FF FF FF FF FC
FFF
00 33 66 99 C

HTML – Fonts

Fonts play a very important role in making a


website more user friendly and increasing
content readability. Font face and color
depends entirely on the computer and
browser that is being used to view your page
but you can use HTML <font> tag to add
style, size, and color to the text on your
website. You can use a <basefont> tag to
set all of your text to the same size, face, and
color.
The font tag is having three attributes
called size, color, and face to customize
your fonts. To change any of the font
attributes at any time within your webpage,
simply use the <font> tag. The text that
follows will remain changed until you close
with the </font> tag. You can change one or
all of the font attributes within one <font> tag.

Note −The font and basefont tags are
deprecated and it is supposed to be
removed in a future version of HTML.
So they should not be used rather, it's
suggested to use CSS styles to
manipulate your fonts. But still for
learning purpose, this chapter will
explain font and basefont tags in
detail.
Set Font Size

You can set content font size


using size attribute. The range of accepted
values is from 1(smallest) to 7(largest). The
default size of a font is 3.
Example

<!DOCTYPE html>
<html>

<head>
<title>Setting Font
Size</title>
</head>

<body>
<font size = "1">Font size
= "1"</font><br />
<font size = "2">Font size
= "2"</font><br />
<font size = "3">Font size
= "3"</font><br />
<font size = "4">Font size
= "4"</font><br />
<font size = "5">Font size
= "5"</font><br />
<font size = "6">Font size
= "6"</font><br />
<font size = "7">Font size
= "7"</font>
</body>

</html>
This will produce the following result −

Object 4
Relative Font Size

You can specify how many sizes larger or


how many sizes smaller than the preset font
size should be. You can specify it like <font
size = "+n"> or <font size = "−n">
Example

<!DOCTYPE html>
<html>

<head>
<title>Relative Font
Size</title>
</head>

<body>
<font size = "-1">Font size
= "-1"</font><br />
<font size = "+1">Font size
= "+1"</font><br />
<font size = "+2">Font size
= "+2"</font><br />
<font size = "+3">Font size
= "+3"</font><br />
<font size = "+4">Font size
= "+4"</font>
</body>

</html>
This will produce the following result −

Object 5

Setting Font Face

You can set font face using face attribute but


be aware that if the user viewing the page
doesn't have the font installed, they will not
be able to see it. Instead user will see the
default font face applicable to the user's
computer.
Example

<!DOCTYPE html>
<html>

<head>
<title>Font Face</title>
</head>

<body>
<font face = "Times New
Roman" size = "5">Times New
Roman</font><br />
<font face = "Verdana" size
= "5">Verdana</font><br />
<font face = "Comic sans
MS" size =" 5">Comic Sans
MS</font><br />
<font face = "WildWest"
size = "5">WildWest</font><br />
<font face = "Bedrock" size
= "5">Bedrock</font><br />
</body>

</html>
This will produce the following result −

Object 6

Specify alternate font faces

A visitor will only be able to see your font if


they have that font installed on their
computer. So, it is possible to specify two or
more font face alternatives by listing the font
face names, separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida
Calligraphy,Comic Sans MS,Lucida
Console">
When your page is loaded, their browser will
display the first font face available. If none of
the given fonts are installed, then it will
display the default font face Times New
Roman.
Note − Check a complete list of HTML
Standard Fonts.

Setting Font Color

You can set any font color you like


using color attribute. You can specify the
color that you want by either the color name
or hexadecimal code for that color.
Note − You can check a complete list
of HTML Color Name with Codes.
Example

<!DOCTYPE html>
<html>

<head>
<title>Setting Font
Color</title>
</head>

<body>
<font color =
"#FF00FF">This text is in
pink</font><br />
<font color = "red">This
text is red</font>
</body>

</html>
This will produce the following result −
The <basefont> Element

The <basefont> element is supposed to set a


default font size, color, and typeface for any
parts of the document that are not otherwise
contained within a <font> tag. You can use
the <font> elements to override the
<basefont> settings.
The <basefont> tag also takes color, size
and face attributes and it will support relative
font setting by giving size a value of +1 for a
size larger or −2 for two sizes smaller.
Example

<!DOCTYPE html>
<html>

<head>
<title>Setting Basefont
Color</title>
</head>

<body>
<basefont face = "arial,
verdana, sans-serif" size = "2"
color = "#ff0000">
<p>This is the page's
default font.</p>
<h2>Example of the
&lt;basefont&gt; Element</h2>

<p><font size = "+2" color


= "darkgray">
This is darkgray text
with two sizes larger
</font>
</p>

<p><font face = "courier"


size = "-1" color = "#000000">
It is a courier font,
a size smaller and black in
color.
</font>
</p>
</body>

</html>
This will produce the following result −

Object 8

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 −
Sr
.
Attribute & Description
N
o

action

1 Backend script ready to process your


passed data.

method

Method to be used to upload data. The


2
most frequently used are GET and
POST methods.

3 target

Specify the target window or frame


where the result of the script will be
displayed. It takes values like _blank,
_self, _parent etc.

enctype

You can use the enctype attribute to


specify how the browser encodes the
data before it sends it to the server.
Possible values are −

4 application/x-www-form-urlencoded −
This is the standard method most forms
use in simple scenarios.

mutlipart/form-data − This is used


when you want to upload binary data in
the form of files like image, word file etc.

Note − You can refer to Perl & CGI for a


detail on how form data upload works.
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
•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 the following result −

Object 7

Attributes

Following is the list of attributes for <input>


tag for creating text field.
Sr
.
Attribute & Description
N
o

type

1 Indicates the type of input control and for


text input control it will be set to text.

2 name

Used to give a name to the control which


is sent to the server to be recognized
and get the value.

value

3 This can be used to provide an initial


value inside the control.

size

4 Allows to specify the width of the text-


input control in terms of characters.

maxlength

Allows to specify the maximum number


5
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 the following result −

Object 9

Attributes

Following is the list of attributes for <input>


tag for creating password field.
Sr
.
Attribute & Description
N
o

1 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


2
is sent to the server to be recognized
and get the value.

value

3 This can be used to provide an initial


value inside the control.

size

4 Allows to specify the width of the text-


input control in terms of characters.
maxlength

Allows to specify the maximum number


5
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 the following result −

Object 10
Attributes

Following is the list of attributes for


<textarea> tag.
Sr
.
Attribute & Description
N
o

name

Used to give a name to the control which


1
is sent to the server to be recognized
and get the value.

rows

2 Indicates the number of rows of text area


box.

3 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 the following result −

Attributes

Following is the list of attributes for


<checkbox> tag.
Sr Attribute & Description
.
N
o

type

Indicates the type of input control and for


1
checkbox input control it will be set
to checkbox..

name

Used to give a name to the control which


2
is sent to the server to be recognized
and get the value.

value

3 The value that will be used if the


checkbox is selected.

4 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 the following result −

Object 12
Attributes

Following is the list of attributes for radio


button.
Sr
.
Attribute & Description
N
o

type

Indicates the type of input control and for


1
checkbox input control it will be set to
radio.

name

Used to give a name to the control which


2
is sent to the server to be recognized
and get the value.
value

3 The value that will be used if the radio


box is selected.

checked

4 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 b
<!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 the following result −
Attributes

Following is the list of important attributes of


<select> tag −
Sr
.
Attribute & Description
N
o

name

Used to give a name to the control which


1
is sent to the server to be recognized
and get the value.

size

2 This can be used to present a scrolling


list box.

3 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 −
Sr
.
Attribute & Description
N
o

value

1 The value that will be used if an option in


the select box box is selected.

selected

Specifies that this option should be the


2
initially selected value when the page
loads.
label
3
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>
<input type = "file"
name = "fileupload" accept =
"image/*" />
</form>
</body>

</html>
This will produce the following result −

Object 14

Attributes

Following is the list of important attributes of


file upload box −
Sr
.
Attribute & Description
N
o

name

Used to give a name to the control which


1
is sent to the server to be recognized
and get the value.

accept

2 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 −
Sr
.
Type & Description
N
o

submit

1 This creates a button that automatically


submits a form.

reset

2 This creates a button that automatically


resets form controls to their initial values.

3 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


4
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>
<title>File Upload
Box</title>
</head>
<body>
<form>
<input type = "submit"
name = "submit" value = "Submit"
/>
<input type = "reset"
name = "reset" value = "Reset"
/>
<input type = "button"
name = "ok" value = "OK" />
<input type = "image"
name = "imagebutton" src =
"/html/images/logo.png" />
</form>
</body>

</html>
This will produce the following result −
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 will 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>

</html>
This will produce the following result −
Object 16

You might also like