Scribd
Upload
14 views85 pages

HTML

HTML Notes

Uploaded by

Nandini Tibrewal
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
14 views85 pages

HTML

HTML Notes

Uploaded by

Nandini Tibrewal
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/ 85

Introduction To HTML:-

o HTML stands for HyperText Markup Language.


o HTML is used to create web pages and web applications.
o HTML is widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming language.

HTML Example with HTML Editor


In this tutorial, you will get a lot of HTML examples, at least one example for each topic
with explanation. You can also edit and run these examples, with our online HTML
editor. Learning HTML is fun, and it's very easy to learn.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
World Wide Web:-
World Wide Web, which is also known as a Web, is a collection of websites or web
pages stored in web servers andS connected to local computers through the internet.
These websites contain text pages, digital images, audios, videos, etc. Users can access
the content of these sites from any part of the world over the internet using their
devices such as computers, laptops, cell phones, etc. The WWW, along with internet,
enables the retrieval and display of text and media to your device.

1. Internet :
The internet is a globally connected network system facilitating worldwide
communication and access to data resources through a huge collection of personal,
public, business, academic and government networks. it’s governed by agencies just
like Internet Assigned Numbers Authority (or IANA) that establish universal
protocols.

2. World Wide Web (WWW):


World Wide Web (WWW), byname Web, is leading information retrieval service of
web (the worldwide computer network). Online gives users access to a huge array of
documents that are connected to every other by means of hypertext or hypermedia
links—i.e., hyperlinks, electronic connections that link related pieces of data so as to
permit a user quick access to them. Hypertext allows the user to pick a word or
phrase from text and thereby access other documents that contain additional
information concerning that word or phrase.

WWW stands for World Wide Web. A technical definition of the World Wide Web is
: all the resources and users on the Internet that are using the Hypertext Transfer
Protocol (HTTP).
A broader definition comes from the organization that Web inventor Tim Berners-
Lee helped found, the World Wide Web Consortium (W3C).
The World Wide Web is the universe of network-accessible information, an
embodiment of human knowledge.
In simple terms, The World Wide Web is a way of exchanging information between
computers on the Internet, tying them together into a vast collection of interactive
multimedia resources.
HTML text Editors
o An HTML file is a text file, so to create an HTML file we can use any text editors.

o Text editors are the programs which allow editing in a written text, hence to create a
web page we need to write our code in some text editor.
o There are various types of text editors available which you can directly download, but
for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
o After learning the basics, you can easily use other professional text editors which
are, Notepad++, Sublime Text, Vim, etc.
o In our tutorial, we will use Notepad and sublime text editor. Following are some easy
ways to create your first web page with Notepad, and sublime text.

A. HTML code with Notepad. (Recommended for Beginners)


Notepad is a simple text editor and suitable for beginners to learn HTML. It is available
in all versions of Windows, from where you easily access it.

Step 1: Open Notepad (Windows)


Step 2: Write code in HTML

Step 3: Save the HTML file with .htm or .html extension.

Step 4: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have saved the
file and then either double-click on file or click on open with option
B. HTML code with Sublime Text-editor.(Recommended after
learning basics of HTML)
When you will learn the basics of HTML, then you can use some professional text
editors, which will help you to write an efficient and fast code. So to use Sublime Text
editors, first it needs to download and install from internet. You can easily download
it from this https://www.sublimetext.com/download link and can install in your PC.
When installation of Sublime text editor done then you can follow the simple steps to
use it:

Step 1: Open Sublime Text editor(Windows 8):


To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏ Open it. To
open a new page press CTRL+N.

Step 2: Save the page before writing any code.

To save your page in Sublime Text press Ctrl+S or go to File option ⤏ save, to save a
file use extension .htm or .html. We recommend to save the file first then write the
code because after saving the page sublime text editor will give you suggestions to
write code.
Step 3: Write the code in Sublime Text editor

Step 4: Open the HTML page in your Browser

To execute or open this page in Web browser just right click by mouse on sublime
text page and click on Open in Browser.
Building blocks of HTML
An HTML document consist of its basic building blocks which are:

o Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.
o Attribute: An attribute in HTML provides extra information about the element, and it
is applied within the start tag. An HTML attribute contains two fields: name & value.

Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>
o Elements: An HTML element is an individual component of an HTML file. In an HTML
file, everything written within tags are termed as HTML elements.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of paragraph tag</p>
10. <span>The element contains tag, attribute and content</span>
11. </body>
12. </html>

Output:

The building blocks


This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content


HTML Tags
HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between an
HTML content and a simple content. HTML tags contain three main parts: opening tag,
content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom
and left to right. HTML tags are used to create HTML documents and render their
properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text. You can use as many tags you want as per your
code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except
some tags)

Syntax
<tag> content </tag>

HTML Tag Examples


Note: HTML Tags are always written in lowercase letters. The basic HTML tags are
given below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>


<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>


Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.

HTML Meta Tags


DOCTYPE, title, link, meta and style

HTML Text Tags


<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>,
<kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags


<a> and <base>

HTML Image and Object Tags


<img>, <area>, <map>, <param> and <object>

HTML List Tags


<ul>, <ol>, <li>, <dl>, <dt> and <dd>
Tag name Description

<!-- --> This tag is used to apply comment in an HTML document.

<!DOCTYPE> This tag is used to specify the version of HTML

A
<a> It is termed as anchor tag and it creates a hyperlink or link.

<abbr> It defines an abbreviation for a phrase or longer word.

<acronym> It defines acronym for a word. (Not supported in HTML5)

<address> It defines the author's contact information of the HTML article

<applet> It defines an embedded Java applet. (Not supported in HTML5)

<area> It defines the area of an image map.

<article> It defines the self-contained content.

<aside> It defines content aside from main content. Mainly represented as


sidebar.

<audio> It is used to embed sound content in HTML document.

B
<b> It is used to make a text bold.

<base> This tag defines the base URL for all relative URL within the document.

<basefont> This tag is used to set default font, size and color for all elements of
document. (Not supported in HTML5)

<bdi> This tag is used to provide isolation for that part of text which may be
formatted in different directions from its surrounding text.
<bdo> It is used to override the current text direction.

<big> This tag is used to make font size one level larger than its surrounding
content. (Not supported in HTML5)

<blockquote> It is used to define a content which is taken from another source.

<body> It is used to define the body section of an HTML document.

<br> It is used to apply single line break.

<button> It is used to represent a clickable button

<canvas> It is used to provide a graphics space within a web document.

<caption> It is used to define a caption for a table.

<center> It is used to align the content in center. (Not supported in HTML5)

<cite> It is used to define the title of the work, book, website, etc.

<code> It is used to display a part of programming code in an HTML document.

<col> It defines a column within a table which represent common properties


of columns and used with the <colgroup> element.

<colgroup> It is used to define group of columns in a table.

<data> It is used to link the content with the machine-readable translation.

<datalist> It is used to provide a predefined list for input option.


<dd> It is used to provide definition/description of a term in description list.

<del> It defines a text which has been deleted from the document.

<details> It defines additional details which user can either view or hide.

<dfn> It is used to indicate a term which is defined within a sentence/phrase.

<dialog> It defines a dialog box or other interactive components.

<dir> It is used as container for directory list of files. (Not supported in


HTML5)

<div> It defines a division or section within HTML document.

<dl> It is sued to define a description list.

<dt> It is used to define a term in description list.

E
<em> It is used to emphasis the content applied within this element.

<embed> It is used as embedded container for external file/application/media,


etc.

F
<fieldset> It is used to group related elements/labels within a web form.

<figcaption> It is used to add a caption or explanation for the <figure> element.

<figure> It is used to define the self-contained content, and s mostly refer as


single unit.
<font> It defines the font, size, color, and face for the content. (Not supported
in HTML5)

<footer> It defines the footer section of a webpage.

<form> It is used to define an HTML form.

<frame> It defines a particular area of webpage which can contain another


HTML file. (Not supported in HTML5)

<frameset> It defines group of Frames. (Not supported in HTML5)

H
<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.

<head> It defines the head section of an HTML document.

<header> It defines the header of a section or webpage.

<hr> It is used to apply thematic break between paragraph-level elements.

<html> It represents root of an HTML document.

I
<i> It is used to represent a text in some different voice.

<iframe> It defines an inline frame which can embed other content.

<img> It is used to insert an image within an HTML document.

<input> It defines an input field within an HTML form.

<ins> It represent text that has been inserted within an HTML document.
<isindex> It is used to display search string for current document. (Not
supported in HTML5)

K
<kbd> It is used to define keyboard input.

L
<label> It defines a text label for the input field of form.

<legend> It defines a caption for content of <fieldset>

<li> It is used to represent items in list.

<link> It represents a relationship between current document and an external


resource.

<main> It represents the main content of an HTML document.

<map> It defines an image map with active areas.

<mark> It represents a highlighted text.

<marquee> It is used to insert the scrolling text or an image either horizontally or


vertically. (Not supported in HTML5)

<menu> It is used for creating a menu list of commands.

<meta> It defines metadata of an HTML document.

<meter> It defines scalar measurement with known range or fractional value.


N

<nav> It represents section of page to represent navigation links.

<noframes> It provides alternate content to represent in browser which does not


support the <frame> elements. (Not supported in HTML5)

<noscript> It provides an alternative content if a script type is not supported in


browser.

O
<object> It is used to embed an object in HTML file.

<ol> It defines an ordered list of items.

<optgroup> It is used to group the options of a drop-down list.

<option> It is used to define options or items in a drop-down list.

<output> It is used as container element which can show result of a calculation.

P
<p> It represents a paragraph in an HTML document.

<param> It defines parameter for an <object> element

<picture> It defines more than one source element and one image element.

<pre> It defines preformatted text in an HTML document.

<progress> It defines the progress of a task within HTML document.

Q
<q> It defines short inline quotation.

R
<rp> It defines an alternative content if browser does not supports ruby
annotations.

<rt> It defines explanations and pronunciations in ruby annotations.

<ruby> It is used to represent ruby annotations.

S
<s> It render text which is no longer correct or relevant.

<samp> It is used to represent sample output of a computer program.

<script> It is used to declare the JavaScript within HTML document.

<section> It defines a generic section for a document.

<select> It represents a control which provides a menu of options.

<small> It is used to make text font one size smaller than document?s base font
size.

<source>> It defines multiple media recourses for different media element such
as <picture>, <video>, and <audio> element.

<span> It is used for styling and grouping inline.

<strike> It is used to render strike through the text. (Not supported in HTML5)

<strong> It is used to define important text.

<style> It is used to contain style information for an HTML document.


<sub> It defines a text which displays as a subscript text.

<summary> It defines summary which can be used with <details> tag.

<sup> It defines a text which represent as superscript text.

<svg> It is used as container of SVG (Scalable Vector Graphics).

T
<table> It is used to present data in tabular form or to create a table within
HTML document.

<tbody> It represents the body content of an HTML table and used along with
<thead> and <tfoot>.

<td> It is used to define cells of an HTML table which contains table data

<template> It is used to contain the client side content which will not display at
time of page load and may render later using JavaScript.

<textarea> It is used to define multiple line input, such as comment, feedback, and
review, etc.

<tfoot> It defines the footer content of an HTML table.

<th> It defines the head cell of an HTML table.

<thead> It defines the header of an HTML table. It is used along with <tbody>
and <tfoot> tags.

<time> It is used to define data/time within an HTML document.

<title> It defines the title or name of an HTML document.

<tr> It defines the row cells in an HTML table


<track> It is used to define text tracks for <audio> and <video> elements.

<tt> It is used to define teletype text. (Not supported in HTML5)

U
<u> It is used to render enclosed text with an underline.

<ul> It defines unordered list of items.

V
<var> It defines variable name used in mathematical or programming
context.

<video> It is used to embed a video content with an HTML document

<wbr> It defines a position within text where break line is possible.

HTML Table Tags


table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags


form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags


script and noscript
Note: We will see examples using these tags in later charters.

HTML Tags List


Following is the complete list of HTML tags with the description which are arranged
alphabetically.

Note: Here represents newly added Elements in HTML5.


HTML Tags by Alphabets
ABCDEFGHIJKLMNOPQRSTUVWXYZ
HTML Elements
An HTML file is made of elements. These elements are responsible for creating web
pages and define content in that webpage. An element in HTML usually consist of a
start tag <tag name>, close tag </tag name> and content inserted between
them. Technically, an element is a collection of start tag, attributes, end tag,
content between them.

Note: Some elements does not have end tag and content, these elements are termed
as empty elements or self-closing element or void elements.

Such as:

1. <p> Hello world!!! </p>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10. </body>
11. </html>
Test it
Now

o All the content written between body elements are visible on web page.

Void element: All the elements in HTML do not require to have start tag and end tag,
some elements does not have content and end tag such elements are known as Void
elements or empty elements. These elements are also called as unpaired tag.

Some Void elements are <br> (represents a line break) , <hr>(represents a


horizontal line), etc.

Nested HTML Elements: HTML can be nested, which means an element can contain
another element.

Block-level and Inline HTML elements


For the default display and styling purpose in HTML, all the elements are divided into
two categories:

o Block-level element

o Inline element
Block-level element:
o These are the elements, which structure main part of web page, by dividing a page into
coherent blocks.
o A block-level element always start with new line and takes the full width of web page,
from left to right.

o These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,


<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>,
<li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul> and <video>.

Note: All these elements are described in later chapters.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <div style="background-color: lightblue">This is first div</div>
7. <div style="background-color: lightgreen">This is second div</div>
8. <p style="background-color: pink">This is a block level element</p>
9. </body>
10. </html>
Test it Now

Output:
In the above example we have used

tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and the
background color are showing that it's a block level element.

Inline elements:
o Inline elements are those elements, which differentiate the part of a given text and
provide it a particular function.
o These elements does not start with new line and take width as per requirement.

o The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>,
<samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>,
<time>, <tt>, <var>.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
7. <span style="background-color: lightblue">this is inline element</span>
8. <p>This will take width of text only</p>
9. </body>
10. </html>

Output:
Following is the list of the some main elements used in HTML:

Start tag Content End tag Description

<h1> ...... <h6> These are headings of </h1>??..</h6> These elements are used
HTML to provide the headings of
page.

<p> This is the paragraph </p> This element is used to


display a content in form
of paragraph.

<div> This is div section </div> This element is used to


provide a section in web
page.

<br> This element is used to


provide a line break. ( void
element)

<hr> This element is used to


provide a horizontal line.
(void element)
HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting tags
in HTML. These tags are used to make text bold, italicized, or underlined. There are
almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.

o Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual
appearance, but they will be different in semantics.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML
formatting text.

Element name Description

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in H

<sup> It displays the content slightly above the normal line.


<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

1) Bold Text
HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font, without any
logical importance. If you write anything within <b>............</b> element, is shown in
bold letters.

See this example:

1. <p> <b>Write Your First Paragraph in bold text.</b></p>


Test it Now

Output:

Write Your First Paragraph in bold text.

The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance. If you write anything between
<strong>???????. </strong>, is shown important text.

See this example:

1. <p><strong>This is an important content</strong>, and this is normal content</p>


Test it Now

Output:

This is an important content, and this is normal content


Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal content</p>
9. </body>
10. </html>
Test it Now

2) Italic Text
HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed content in italic
font, without any added importance. If you write anything within <i>............</i>
element, is shown in italic letters.

See this example:

1. <p> <i>Write Your First Paragraph in italic text.</i></p>


Test it Now

Output:

Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed content in
italic font, with added semantics importance.

See this example:

1. <p><em>This is an important content</em>, which displayed in italic font.</p>


Test it Now

Output:

This is an important content, which displayed in italic font.


1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font.</p>
9. </body>
10. </html>
Test it Now

3) HTML Marked formatting


If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

See this example:

1. <h2> I want to put a <mark> Mark</mark> on your face</h2>


Test it Now

Output:

I want to put a Mark on your face

4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

1. <p> <u>Write Your First Paragraph in underlined text.</u></p>


Test it Now

Output:

Write Your First Paragraph in underlined text.


5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.

See this example:

1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>


Test it Now

Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
If you want that each letter has the same width then you should write the content
within <tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because
different letters have different width. (for example: 'w' is wider than 'i'). Monospaced
Font provides similar space among every letter.

See this example:

1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>


Test it Now

Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript;
means it is displayed half a character's height above the other characters.

See this example:


1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Test it Now

Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ;
means it is displayed half a character's height below the other characters.

See this example:

1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>


Test it Now

Output:

Hello Write Your First Paragraph in subscript.

9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.

See this example:

1. <p>Hello <del>Delete your first paragraph.</del></p>


Test it Now

Output:

Hello

10) Inserted Text


Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:


1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
Test it Now

Output:

Delete your first paragraph.Write another paragraph.

11) Larger Text


If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.

See this example:

1. <p>Hello <big>Write the paragraph in larger font.</big></p>


Test it Now

Output:

Hello Write the paragraph in larger font.

12) Smaller Text


If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.

See this example:

1. <p>Hello <small>Write the paragraph in smaller font.</small></p>


Test it Now

Output:

Hello Write the paragraph in smaller font.


HTML Image:-
HTML img tag is used to display image on the web page. HTML img tag is an empty
tag that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>


2. <img src="good_morning.jpg" alt="Good Morning Friends"/>
Test it Now

Output:

Attributes of HTML img tag


The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below.

1) src:- It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt:- The alt attribute defines an alternate text for the image, if it can't be displayed.
The value of the alt attribute describe the image in words. The alt attribute is considered good
for SEO prospective.
3) width:- It is an optional attribute which is used to specify the width to display the
image. It is not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.
Use of height and width attribute with img tag
You have learnt about how to insert an image in your web page, now if we want to
give some height and width to display image according to our requirement, then we
can set it with height and width attributes of image.

Example:
1. <img src="animal.jpg" height="180" width="300" alt="animal image">

HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.

We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table
to manage the layout of the page .
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for
formatting.
<col> It is used with <colgroup> element to specify column
properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

HTML Table Example


Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
HTML Ordered List | HTML Numbered List
HTML Ordered List or Numbered List displays elements in numbered format. The
HTML ol tag is used for ordered list. We can use ordered list to represent items either
in numerical order format or alphabetical order format, or any format where an order
is emphasized. There can be different types of numbered list:

o Numeric Number (1, 2, 3)


o Capital Roman Number (I II III)
o Small Romal Number (i ii iii)

o Capital Alphabet (A B C)

o Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description

Type "1" This is the default type. In this type, the list items are numbered with
numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.

Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example


Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here
we are not defining type="1" because it is the default type.

1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

1. HTML
2. Java
3. JavaScript

4. SQL

ol type="I"
Let's see the example to display list in roman number uppercase.

1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

I. HTML
II. Java

III. JavaScript

IV. SQL

ol type="i"
Let's see the example to display list in roman number lowercase.

1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

i. HTML
ii. Java
iii. JavaScript

iv. SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

A. HTML
B. Java
C. JavaScript

D. SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.
1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

a. HTML
b. Java

c. JavaScript

d. SQL

start attribute
The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

1. <ol type="i" start="5">


2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

v. HTML
vi. Java
vii. JavaScript

viii. SQL

reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you
use the reversed attribute with

tag then it will numbered the list in descending order (7, 6, 5, 4......1).

Example:
1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:
HTML Unordered List | HTML Bulleted List
HTML Unordered List or Bulleted List displays elements in bulleted format . We can
use unordered list where we do not need to display items in any particular order. The
HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:

o disc
o circle
o square

o none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description

Type "disc" This is the default style. In this style, the list items are marked
with bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

HTML Unordered List Example


1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java
o JavaScript

o SQL

ul type="circle"
1. <ul type="circle">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java
o JavaScript

o SQL

ul type="square"
1. <ul type="square">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java
o JavaScript

o SQL

ul type="none"
1. <ul type="none">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java

o JavaScript

o SQL

Note: The type attribute is not supported in HTML5, instead of type you can use
CSS property of list-style-type. Following is the example to show the CSS property
for ul tag.
1. <ul style="list-style-type: square;">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2>The type attribute with CSS property</h2>
7. <ul style="list-style-type: square;">
8. <li>HTML</li>
9. <li>Java</li>
10. <li>JavaScript</li>
11. <li>SQL</li>
12. </ul>
13. </body>
14. </html>
Test it Now

Output:
HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent
to the given address.

HTML Form Syntax


1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags


Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.


<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags


Let's see the list of HTML 5 form tags.

Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element


The HTML <form> element provide a document section to take input from user. It
provides various interactive controls for submitting information to web server such as
text field, text area, password field, etc.

Syntax:

1. <form>
2. //Form elements
3. </form>
HTML <input> element
The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different
information form user. Following is the example to show the simple text input.

Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>

Output:

HTML TextField Control


The type="text" attribute of input tag creates textfield control also known as single
line textfield control. The name attribute is optional, but it is required for the server
side component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Output:
Note: If you will omit 'name' attribute then the text filed input will not be submitted
to server.

HTML <textarea> tag in form


The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>

Output:

Label Tag in Form


It is considered better to have label in form. As it makes the code parser/browser/user
friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have
for attribute in label tag that must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will
use it, then it will provide a focus when you tap or click on label tag. It is more
worthy with touchscreens.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>

Output:

HTML Password Field Control


The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>

Output:
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

Radio Button Control


The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected
at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>

5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
Note: These are similar to radio button except it can choose multiple options at a
time and radio button can select one button at a time, and its display.

Output:

Submit button control


HTML <input type="submit"> are used to add a submit button on web page. When
user clicks on submit button, then form get submit to the server.
Syntax:

1. <input type="submit" value="submit">

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>

Output:

HTML <fieldset> element:


The <fieldset> element in HTML is used to group the related information of a form.
This element is used with <legend> element which provide caption for the grouped
elements.

Example:

1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/form>

Output:

HTML Form Example


Following is the example for a simple form of registration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
Test it Now

Output:

HTML Form Example


Let's see a simple example of creating HTML form.

1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td
>
5. <td><input type="text" name="name" value="" id="register_name" style="width:160px"
/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">Enter password:</lab
el></td>
9. <td><input type="password" name="password" id="register_password" style="width:16
0px"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td
>
13. <td
14. ><input type="email" name="email" value="" id="register_email" style="width:160px"/></
td>
15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label><
/td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">Select Country:</label>
</td>
27. <td><select name="country" id="register_country" style="width:160px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34. </td>
35. </tr>
36. <tr>
37. <td colspan="2"><div align="right"><input type="submit" id="register_0" value="regist
er"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>
HTML Form Input Types
In HTML <input type=" "> is an important element of HTML form. The "type" attribute
of input element can be various types, which defines information field. Such as <input
type="text" name="name"> gives a text box.

Following is a list of all types of <input> element of HTML.

type=" " Description

text Defines a one-line text input field

password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

button Defines a simple push button, which can be programmed to perform


a task on an event.

file Defines to select the file from device storage.

image Defines a graphical submit button.


HTML5 added new types on <input> element. Following is the list of types of
elements of HTML5

type=" " Description

color Defines an input field with a specific color.

date Defines an input field for selection of date.

datetime-local Defines an input field for entering a date without


time zone.

email Defines an input field for entering an email address.

month Defines a control with month and year, without


time zone.

number Defines an input field to enter a number.

url Defines a field for entering URL

week Defines a field to enter the date with week-year,


without time zone.

search Defines a single line text field for entering a search


string.

tel Defines an input field for entering the telephone


number.

Following is the description about types of <input> element with examples.

1. <input type="text">:
<input> element of type "text" are used to define a single-line input text field.
Example:
1. <form>
2. <label>Enter first name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter last name</label><br>
5. <input type="text" name="lastname"><br>
6. <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>
7. </form>
Test it Now

Output:

Input "text" type:

The "text"field defines a sinlge line input text field.

Enter first name

Enter last name

Note:The default maximum cahracter lenght is 20.

2. <input type="password">:
The <input> element of type "password" allow a user to enter the password securely
in a webpage. The entered text in password filed converted into "*" or ".", so that it
cannot be read by another user.

Example:
1. <form>
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
Test it Now
Output:

Input "password" type:

The "password"field defines a sinlge line input password field to enter the password
securely.

Enter User name

Enter Password

3. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit the form to
the server when the "click" event occurs.

Example:
1. <form action="https://www.javatpoint.com/html-tutorial">
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
Test it Now

Output:

Input "submit" type:


Enter User name

Enter Password
After clicking on submit button, this will submit the form to server and will redirect the
page to action value.We will learn about "action" attribute in later chapters

4. <input type="reset">:
The <input> type "reset" is also defined as a button but when the user performs a click
event, it by default reset the all inputted values.

Example:
1. <form>
2. <label>User id: </label>
3. <input type="text" name="user-id" value="user">
4. <label>Password: </label>
5. <input type="password" name="pass" value="pass"><br><br>
6. <input type="submit" value="login">
7. <input type="reset" value="Reset">
8. </form>
Test it Now

Output:

Input "reset" type:


User id: Password:

Try to change the input values of user id and password, then when you click on reset,
it will reset input fields with default values.

5. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing an option
between a set of related options. At a time only one radio button option can be
selected at a time.

Example:
1. <form>
2. <p>Kindly Select your favorite color</p>
3. <input type="radio" name="color" value="red"> Red <br>
4. <input type="radio" name="color" value="blue"> blue <br>
5. <input type="radio" name="color" value="green">green <br>
6. <input type="radio" name="color" value="pink">pink <br>
7. <input type="submit" value="submit">
8. </form>
Test it Now

Output:

Input "radio" type

Kindly Select your favorite color

Red
blue
green
pink

6. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be checked or
unchecked to select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an important
difference between both types: radio buttons allow the user to select only one
option at a time, whereas checkbox allows a user to select zero to multiple options
at a time.
Example:
1. <form>
2. <label>Enter your Name:</label>
3. <input type="text" name="name">
4. <p>Kindly Select your favourite sports</p>
5. <input type="checkbox" name="sport1" value="cricket">Cricket<br>
6. <input type="checkbox" name="sport2" value="tennis">Tennis<br>
7. <input type="checkbox" name="sport3" value="football">Football<br>
8. <input type="checkbox" name="sport4" value="baseball">Baseball<br>
9. <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
10. <input type="submit" value="submit">
11. </form>
Test it Now

Output:

Input "checkbox" type

Registration Form
Enter your Name:

Kindly Select your favorite sports

Cricket
Tennis
Football
Baseball
Badminton

7. <input type="button">:
The <input> type "button" defines a simple push button, which can be programmed
to control a functionally on any event such as, click event.

Note: It mainly works with JavaScript.


Example:
1. <form>
2. <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
3. </form>
Test it Now

Output:

Input "button" type.


Click the button to see the result:
Note: In the above example we have used the "alert" of JS, which you will learn in
our JS tutorial. It is used to show a pop window.

8. <input type="file">:
The <input> element with type "file" is used to select one or more files from user
device storage. Once you select the file, and after submission, this file can be uploaded
to the server with the help of JS code and file API.

Example:
1. <form>
2. <label>Select file to upload:</label>
3. <input type="file" name="newfile">
4. <input type="submit" value="submit">
5. </form>
Test it Now

Output:

Input "file" type.


We can choose any type of file until we do not specify it! The selected file will appear
at next to "choose file" option

Select file to upload:

9. <input type="image">:
The <input> type "image" is used to represent a submit button in the form of image.

Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Input "image" type.</h2>
5. <p>We can create an image as submit button</p>
6. <form>
7. <label>User id:</label><br>
8. <input type="text" name="name"><br><br>
9. <input type="image" alt="Submit" src="login.png" width="100px">
10. </form>
11.
12. </body>
13. </html>

HTML5 newly added <input> types element


1. <input type="color">:
The <input> type "color" is used to define an input field which contains a colour. It
allows a user to specify the colour by the visual colour interface on a browser.

Note: The "color" type only supports color value in hexadecimal format, and the
default value is #000000 (black).
Example:
1. <form>
2. Pick your Favorite color: <br><br>
3. <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>
4. <input type="color" name="downclick" value="#f5f5dc"> Downclick
5. </form>

Output:

Input "color" types:


Pick your Favorite color:

Up-click

Down-click

Note:The default value of "color" type is #000000 (black). It only supports color value
in hexadecimal format.

2. <input type="date">:
The <input> element of type "date" generates an input field, which allows a user to
input the date in a given format. A user can enter the date by text field or by date
picker interface.
Example:
1. <form>
2. Select Start and End Date: <br><br>
3. <input type="date" name="Startdate"> Start date:<br><br>
4. <input type="date" name="Enddate"> End date:<br><br>
5. <input type="submit">
6. </form>
Test it Now

Output:

Input "date" type


Select Start and End Date:

Start date:

End date:

3. <input type="datetime-local">:
The <input> element of type "datetime-local" creates input filed which allow a user to
select the date as well as local time in the hour and minute without time zone
information.

Example:
1. <form>
2. <label>
3. Select the meeting schedule: <br><br>
4. Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
5. </label>
6. <input type="submit">
7. </form>
Test it Now

Output:
Input "datetime-local" type
Select the meeting schedule:

Select date & time:

4. <input type="email">:
The <input> type "email" creates an input filed which allow a user to enter the e-mail
address with pattern validation. The multiple attributes allow a user to enter more than
one email address.

Example:
1. <form>
2. <label><b>Enter your Email-address</b></label>
3. <input type="email" name="email" required>
4. <input type="submit">
5. <p><strong>Note:</strong>User can also enter multiple email addresses separating
by comma or whitespace as following: </p>
6. <label><b>Enter multiple Email-addresses</b></label>
7. <input type="email" name="email" multiple>
8. <input type="submit">
9. </form>
Test it Now

Output:

Input "email" type

Enter your Email-address

Note:User can also enter multiple email addresses separating by comma or whitespace
as following:

Enter multiple Email-addresses


5. <input type="month">:
The <input> type "month" creates an input field which allows a user to easily enter
month and year in the format of "MM, YYYY" where MM defines month value, and
YYYY defines the year value. New

Example:
1. <form>
2. <label>Enter your Birth Month-year: </label>
3. <input type="month" name="newMonth">
4. <input type="submit">
5. </form>
Test it Now

Output:

Input "month" type:

Enter your Birth Month-year:

6. <input type="number">:
The <input> element type number creates input filed which allows a user to enter the
numeric value. You can also restrict to enter a minimum and maximum value using
min and max attribute.

Example:
1. <form>
2. <label>Enter your age: </label>
3. <input type="number" name="num" min="50" max="80">
4. <input type="submit">
5. </form>
Test it Now

Output:

Input "number" type

Enter your age:

Note:It will allow to enter number in range of 50-80. If you want to enter number other
than range, it will show an error.
7. <input type="url">:
The <input> element of type "url" creates an input filed which enables user to enter
the URL.

Example:
1. <form>
2. <label>Enter your website URL: </label>
3. <input type="url" name="website" placeholder="http://example.com"><br>
4. <input type="submit" value="send data">
5. </form>
Test it Now

Output:

Input "url" type


Enter your website URL:

8. <input type="week">:
The <input> type week creates an input field which allows a user to select a week and
year form the drop-down calendar without time zone.

Example:
1. <form>
2. <label><b>Select your best week of year:</b></label><br><br>
3. <input type="week" name="bestweek">
4. <input type="submit" value="Send data">
5. </form>
Test it Now

Output:

Input "week" type


Select your best week of year:

9. <input type="search">:
The <input> type "search" creates an input filed which allows a user to enter a search
string. These are functionally symmetrical to the text input type, but may be styled
differently.

Example:
1. <form>
2. <label>Search here:</label>
3. <input type="search" name="q">
4. <input type="submit" value="search">
5. </form>
Test it Now

Output:

Input "search" type

Search here:

10. <input type="tel">:


The <input> element of type ?tel? creates an input filed to enter the telephone
number. The "tel" type does not have default validation such as email, because
telephone number pattern can vary worldwide.

Example:
1. <form>
2. <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>
3. <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
4. <input type="submit"><br><br>
5. </form>
Test it Now
Output:

Input "tel" type

Enter your Telephone Number(in format of xxx-xxx-xxxx):

Note: Here we are using two attributes that are "pattern" and"required" which will
allow user to enter the number in given format and it is required to enter the number
in input field.
HTML form Attribute
HTML <form> element attributes
In HTML there are various attributes available for <form> element which are given
below:

HTML action attribute


The action attribute of <form> element defines the process to be performed on form
when form is submitted, or it is a URI to process the form information.

The action attribute value defines the web page where information proceed. It can be
.php, .jsp, .asp, etc. or any URL where you want to process your form.

Note: If action attribute value is blank then form will be processed to the same page.
Example:
1. <form action="action.html" method="post">
2. <label>User Name:</label><br>
3. <input type="text" name="name"><br><br>
4. <label>User Password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit">
7. </form>
Test it Now

Output:

Demo of action attribute of form element


User Name:

User Password

It will redirect to a new page "action.html" when you click on submit button
HTML method attribute
The method attribute defines the HTTP method which browser used to submit the
form. The possible values of method attribute can be:

o post: We can use the post value of method attribute when we want to process the
sensitive data as it does not display the submitted data in URL.

Example:
1. <form action="action.html" method="post">
o get: The get value of method attribute is default value while submitting the form. But
this is not secure as it displays data in URL after submitting the form.

Example:
1. <form action="action.html" method="get">

When submitting the data, it will display the entered data in the form of:

1. file:///D:/HTML/action.html?name=JavaTPoint&pass=123

HTML target attribute


The target attribute defines where to open the response after submitting the form. The
following are the keywords used with the target attribute.

o _self: If we use _self as an attribute value, then the response will display in current page
only.

Example:
1. <form action="action.html" method="get" target="_self">
o _blank: If we use _blank as an attribute it will load the response in a new page.

Example:
1. <form action="action.html" method="get" target="_blank">

HTML autocomplete attribute


The HTML autocomplete attribute is a newly added attribute of HTML5 which enables
an input field to complete automatically. It can have two values "on" and "off" which
enables autocomplete either ON or OFF. The default value of autocomplete attribute
is "on".

Example:
1. <form action="action.html" method="get" autocomplete="on">
Example:
1. <form action="action.html" method="get" autocomplete="off">
Note: it can be used with <form> element and <input> element both.

HTML enctype attribute


The HTML enctype attribute defines the encoding type of form-content while
submitting the form to the server. The possible values of enctype can be:

o application/x-www-form-urlencoded: It is default encoding type if the enctype


attribute is not included in the form. All characters are encoded before submitting the
form.

Example:
1. <form action="action.html" method="post" enctype="application/x-www-form-
urlencoded" >
o multipart/form-data: It does not encode any character. It is used when our form
contains file-upload controls.

Example:
1. <form action="action.html" method="post" enctype="multipart/form-data">
o text/plain (HTML5): In this encoding type only space are encoded into + symbol and
no any other special character encoded.

Example:
1. <form action="action.html" method="post" enctype="text/plain" >

HTML novalidate attribute HTML5


The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this
attribute in form then it does not perform any type of validation and submit the form.

Example:
1. <form action = "action.html" method = "get" novalidate>
Test it Now

Output:

Fill the form


Enter name:

Enter age:

Enter email:

Try to change the form detials with novalidate atttribute and without novalidate
attribute and see the difference.

HTML <input> element attribute


HTML name attribute
The HTML name attribute defines the name of an input element. The name and value
attribute are included in HTTP request when we submit the form.

Note: One should not omit the name attribute as when we submit the form the HTTP
request includes both name-value pair and if name is not available it will not
process that input field.
Example:
1. <form action = "action.html" method = "get">
2. Enter name:<br><input type="name" name="uname"><br>
3. Enter age:<br><input type="number" name="age"><br>
4. Enter email:<br><input type="email"><br>
5. <input type="submit" value="Submit">
6. </form>
Test it Now

Output:

Fill the form


Enter name:

Enter age:

Enter email:

Note: If you will not use name attribute in any input field, then that input field
will not be submitted, when submit the form.

Click on submit and see the URL where email is not included in HTTP request as we
have not used name attribute in the email input field

HTML value attribute


The HTML value attribute defines the initial value or default value of an input field.

Example:
1. <form>
2. <label>Enter your Name</label><br>
3. <input type="text" name="uname" value="Enter Name"><br><br>
4. <label>Enter your Email-address</label><br>
5. <input type="text" name="uname" value="Enter email"><br><br>
6. <label>Enter your password</label><br>
7. <input type="password" name="pass" value=""><br><br>
8. <input type="submit" value="login">
9. </form>
Test it Now

Output:

Fill the form


Enter your Name

Enter your Email-address


Enter your password

Note: In password input filed the value attribute will always unclear

HTML required attribute HTML5


HTML required is a Boolean attribute which specifies that user must fill that filed before
submitting the form.

Example:
1. <form>
2. <label>Enter your Email-address</label><br>
3. <input type="text" name="uname" required><br><br>
4. <label>Enter your password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit" value="login">
7. </form>
Test it Now

Output:

Fill the form


Enter your Email-address

Enter your password

If you will try to submit the form without completing email field then it will give
an error pop up.
HTML autofocus attribute HTML5
The autofocus is a Boolean attribute which enables a field automatically focused when
a webpage loads.

Example:
1. <form>
2. <label>Enter your Email-address</label><br>
3. <input type="text" name="uname" autofocus><br><br>
4. <label>Enter your password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit" value="login">
7. </form>

HTML placeholder attribute HTML5


The placeholder attribute specifies a text within an input field which informs the user
about the expected input of that filed.

The placeholder attribute can be used with text, password, email, and URL values.

When the user enters the value, the placeholder will be automatically removed.

Example:
1. <form>
2. <label>Enter your name</label><br>
3. <input type="text" name="uname" placeholder="Your name"><br><br>
4. <label>Enter your Email address</label><br>
5. <input type="email" name="email" placeholder="[email protected]"><br><br>
6. <label>Enter your password</label><br>
7. <input type="password" name="pass" placeholder="your password"><br><br>
8. <input type="submit" value="login">
9. </form>
Test it Now

Output:

Registration form
Enter your name
Enter your Email address

Enter your password

HTML disabled attribute


The HTML disabled attribute when applied then it disable that input field. The disabled
field does not allow the user to interact with that field.

The disabled input filed does not receive click events, and these input value will not be
sent to the server when submitting the form.

Example:
1. <input type="text" name="uname" disabled><br><br>
Test it Now

Output:

Registration form
Enter User name

Enter your Email address

Enter your password

HTML size attribute


The size attribute controls the size of the input field in typed characters.
Example:
1. <label>Account holder name</label><br>
2. <input type="text" name="uname" size="40" required><br><br>
3. <label>Account number</label><br>
4. <input type="text" name="an" size="30" required><br><br>
5. <label>CVV</label><br>
6. <input type="text" name="cvv" size="1" required><br><br>
Test it Now

Output:

Registration form with disbaled attribute


Account holder name

Account number

CVV

HTML form attribute


HTML form attribute allows a user to specify an input filed outside the form but
remains the part of the parent form.

Example:
1. User email: <br><input type="email" name="email" form="fcontrol" required><br>
2. <input type="submit" form="fcontrol">
Test it Now

Output:

User Name:

User password:
The email field is outside the form but still it will remain part of the form

User email:

You might also like