Scribd
Upload
0 views

HTML Notes

HTML (Hypertext Markup Language) is the standard language for creating web pages, utilizing tags to structure content. It includes various elements such as headings, paragraphs, images, and tables, each with specific tags and attributes to define their appearance and behavior. The document provides examples of basic HTML syntax, formatting, and how to create lists, tables, and insert images.

Uploaded by

entertainmentj007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

HTML Notes

HTML (Hypertext Markup Language) is the standard language for creating web pages, utilizing tags to structure content. It includes various elements such as headings, paragraphs, images, and tables, each with specific tags and attributes to define their appearance and behavior. The document provides examples of basic HTML syntax, formatting, and how to create lists, tables, and insert images.

Uploaded by

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

HTML

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

Basic HTML Document

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


<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

HTML Tags

HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within
angle braces <Tag Name>. 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.
Above example of HTML document uses the following tags:
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly comprises
of document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags like <title>,
<link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.
<body> This tag represents the document's body which keeps other HTML tagslike <h1>, <div>, <p>
<h1> This tag represents the heading.
<p> This tag represents a paragraph.

The <!DOCTYPE> Declaration:

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the
document. Current version of HTML is 5 and it makes use of the following declaration:

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of
headings, which use the elements <h1>, <h2>, <h3>, <h4>,<h5>, and <h6>. While displaying any heading,
browser adds one line before and one line after that heading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body> </html>
Paragraph Tag:

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in
between an opening <p> and a closing </p> tag as shown below in the example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

Line Break Tag:

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an
empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Centering Content:

You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

Nonbreaking Spaces:

Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the "12, Angry"
and "Men" across two lines. In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity &nbsp; instead of a normal space. For example, when coding the "12 Angry Men" in a
paragraph, you should use something similar to the following code:
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>
HTML ATTRUBUTES

Most of the HTML tags can also have attributes, which are extra bits of information. An attribute is used to define
the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of
two parts: a name and a value:
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

5. HTML – FORMATTING

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses a <i>italicized</i> typeface.</p>
<p>The following word uses a <u>underlined</u> typeface.</p>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

</body>
</html>

Grouping Content:

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a
page. For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all
of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div>
element so that they appear using a special set of style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
HTML
24
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
HTML – IMAGES

Images are very important to beautify as well as to depict many complex concepts in simple way on your web page.
This tutorial will take you through simple steps to use images in your web pages. Insert Image 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.htm and image file test.png in the
same directory:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" width="150" height="100"/>
</body>
</HTML>
Set Image Border:

By default, image will have a border around it, you can specify border thickness in terms of pixels using border
attribute. A thickness of 0 means, no border around the picture.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="test.png" alt="Test Image" border="3"/>
</body>
</html>

Set Image Alignment

By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>
10. HTML – TABLES
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>

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>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Cellpadding and Cellspacing Attributes


There are two attributes 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>

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>
Tables Backgrounds
You can set table background using one of the following two ways:
 bgcolor attribute - You can set background color for whole table or just for one cell.
 background attribute - You can set background image for whole table or just for one cell.
You can also set border color also using border color attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<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>
Here is an example of using background attribute. Here we will use an image available in /images directory.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<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>

Table Height and Width


You can set a table width and height using width and height attributes. You can specify table width or height in
terms of pixels or in terms of percentage of available screen area.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<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>

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top
of the table. This tag is deprecated in newer version of HTML/XHTML.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<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>

Nested Tables
You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag
<td>.
Example
Following is the example of using another table and other tags inside a table cell.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<table border="1" width="100%">
HTML
59
<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>
</td>
</tr>
</table>
</body>
</html>

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
<!DOCTYPE html>
<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>
HTML – LISTS

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>
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>
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>
<li>Radish</li>
</ul>
</body>
</html>
This will produce the following result:
 Beetroot
 Ginger
 Potato
 Radish
Definition Lists
HTML and XHTML supports 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
 </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>
HTML – TEXT LINKS
A webpage can contain various links that take you directly to other pages and even specific parts of a given page.
These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on
words, phrases, and
images.
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.
<a href="Document URL" ... attributes-list>Link Text</a>
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>
</body>
</html>

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.
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.
Example
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="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

Let's put the 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="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Following are important attributes of the <frameset> tag:
Attribute Description:
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 the four ways:
1. Absolute values in pixels. For example, to create three vertical frames, use cols="100, 500,100".
2. A percentage of the browser window. For example, to create three vertical frames, use cols="10%,
80%,10%".
3. Using a wildcard symbol. For example, to create three vertical frames, use cols="10%, *,10%". In this case
wildcard takes remainder of the window.
4. As relative widths of the browser window. For example, to create three vertical frames, use
cols="3*,2*,1*".

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
Html Background with Colors
The bgcolor attribute is used to control the background of an HTML element, specifically page body and table
backgrounds. Following is the syntax to use bgcolor attribute with any HTML tag.
<tagname bgcolor="color_value"...>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<table bgcolor="yellow" width="100%">
<tr><td>
This background is yellow
</td></tr>
</table>
<table bgcolor="#6666FF" width="100%">
<tr><td>
This background is sky blue
</td></tr>
</table>
<table bgcolor="rgb(255,0,255)" width="100%">
<tr><td>
This background is green
</td></tr>
</table>
</body>
</html>
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. Following is the
syntax to use background attribute with any HTML tag.
<tagname background="Image URL"...>
The most frequently used image formats are JPEG, GIF and PNG images.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<table background="/images/html.gif" width="100%" height="100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>
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>

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
<!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>

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.

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

<!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>

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

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

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>
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.
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

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

</html>

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.N
Type & Description
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.

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

4 image
This creates a clickable button but we can use an image as background
of the button.
<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>

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.

<!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>

You might also like