HTML Lectures
Uploaded by
nayyab.mscs1135HTML Lectures
Uploaded by
nayyab.mscs11351
NABIIKHAN OFFICIAL HTML NOTES
HTML Introduction Example Explained
The <!DOCTYPE html> declaration defines this document to
be HTML5
What is HTML? The <html> element is the root element of an HTML page
HTML is the standard markup language for creating Web pages. The <head> element contains meta information about the
document
HTML stands for Hyper Text Markup Language The <title> element specifies a title for the document
HTML describes the structure of a Web page The <body> element contains the visible page content
HTML consists of a series of elements The <h1> element defines a large heading
HTML elements tell the browser how to display the content The <p> element defines a paragraph
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph",
"table", and so on
HTML Tags
Browsers do not display the HTML tags, but use them to render the HTML tags are element names surrounded by angle brackets:
content of the page
<tagname>content goes here...</tagname>
A Simple HTML Document
HTML tags normally come in pairs like <p> and </p>
Example The first tag in a pair is the start tag, the second tag is the end
<!DOCTYPE html> tag
<html> The end tag is written like the start tag, but with a forward
<head> slash inserted before the tag name
<title>Page Title</title>
</head> Tip: The start tag is also called the opening tag, and the end tag
<body> the closing tag.
<h1>My First Heading</h1>
<p>My first paragraph.</p> Web Browsers
</body>
</html> The purpose of a web
browser (Chrome, Edge,
Firefox, Safari) is to
read HTML documents
2
NABIIKHAN OFFICIAL HTML NOTES
and display them. The browser does not display the HTML tags, but sensitive.The <!DOCTYPE> declaration for HTML5
uses them to determine how to display the document: is:<!DOCTYPE html>
HTML Page Structure HTML Documents
Below is a visualization of an HTML page structure: All HTML documents must start with a document type
declaration: <!DOCTYPE html>.The HTML document itself begins
<html> with <html> and ends with </html>.The visible part of the HTML
document is between <body> and </body>.
<head>
<title>Page title</title> Example
</head> <!DOCTYPE html>
<html>
<body> <body>
<h1>My First Heading</h1>
<h1>This is a heading</h1> <p>My first paragraph.</p>
<p>This is a paragraph.</p> </body>
</html>
<p>This is another paragraph.</p>
</body> HTML Elements
</html> An HTML element usually consists of a start tag and an end tag, with
the content inserted in between:
Note: Only the content inside the <body> section (the white area
above) is displayed in a browser.
<tagname>Content goes here...</tagname>
The <!DOCTYPE> Declaration The HTML element is everything from the start tag to the end tag:
The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.It must only appear once, at <p>My first paragraph.</p>
the top of the page (before any HTML
tags).The <!DOCTYPE> declaration is not case
3
NABIIKHAN OFFICIAL HTML NOTES
HTML elements with no content are called empty elements. Empty The <body> element defines the document body. It has a start tag
elements do not have an end tag, such as the <br> element (which <body> and an end tag </body>.Inside the <body> element is two
indicates a line break). other HTML elements: <h1> and <p>.
Nested HTML Elements <body>
<h1>My First Heading</h1>
HTML elements can be nested (elements can contain elements).All <p>My first paragraph.</p>
HTML documents consist of nested HTML elements. This example </body>
contains four HTML elements:
The <h1> element defines a heading. It has a start tag <h1> and
Example an end tag </h1>.The element content is: My First Heading.
<!DOCTYPE html> <h1>My First Heading</h1>
<html>
<body> The <p> element defines a paragraph .It has a start tag <p> and
<h1>My First Heading</h1> an end tag </p>.The element content is: My first paragraph.
<p>My first paragraph.</p>
</body> <p>My first paragraph.</p>
</html>
Example Explained Do Not Forget the End Tag
The <html> element defines the whole document. It has a start tag Some HTML elements will display correctly, even if you forget the end
<html> and an end tag </html>.Inside the <html> element is tag:
the <body> element.
Example
<html>
<body> <html>
<h1>My First Heading</h1> <body>
<p>My first paragraph.</p> <p>This is a paragraph
</body> <p>This is a paragraph
</html> </body>
</html>
4
NABIIKHAN OFFICIAL HTML NOTES
The example above works in all browsers, because the closing tag is
considered optional.Never rely on this. It might produce unexpected
The href Attribute
results and/or errors if you forget the end tag.
HTML links are defined with the <a> tag. The link address is specified
in the href attribute:
Empty HTML Elements
Example
HTML elements with no content are called empty elements. <br> is an
empty element without a closing tag (the <br> tag defines a line break): <h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is
Example specified in the href attribute:</p>
<p>This is a <br> paragraph with a line break.</p>
<a href="https://www.w3schools.com">This is a link</a>
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want
stricter validation, or if you need to make your document readable by
XML parsers, you must close all HTML elements properly.
HTML Is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.The
HTML5 standard does not require lowercase tags.
HTML Attributes The src Attribute
Attributes provide additional information about HTML elements HTML images are defined with the <img> tag. The filename of the
image source is specified in the src attribute:
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs
like: name="value"
5
NABIIKHAN OFFICIAL HTML NOTES
Example readers. This way, someone "listening" to the webpage, e.g. a vision
impaired person, can "hear" the element.
<h2>The src Attribute</h2>
Example
<p>HTML images are defined with the img tag, and the filename of
the image source is specified in the src attribute:</p> <h2>The alt Attribute</h2>
<img src="img_girl.jpg" width="100" height="100">
<p>The alt attribute should reflect the image content, so users who
cannot see the image gets an understanding of what the image
contains:</p>
<img src="jkhghg" alt="Girl with a jacket" width="100"
height="100">
The width and height Attributes
HTML images also have width and height attributes, which specifies the The alt attribute is also useful if the image cannot be displayed (e.g. if it
width and height of the image: does not exist):
Example
<img src="img_girl.jpg" width="500" height="600"> //same as above
The style Attribute
The width and height are specified in pixels by default; so width="500"
means 500 pixels wide. The style attribute is used to specify the styling of an element, like
color, font, size etc.
The alt Attribute
The alt attribute specifies an alternative text to be used, if an image Example
cannot be displayed. The value of the alt attribute can be read by screen <h2>The style Attribute</h2>
6
NABIIKHAN OFFICIAL HTML NOTES
<p>The style attribute is used to specify the styling of an element, like Example
color:</p>
<p title="I'm a tooltip">
<p style="color:red">This is a red paragraph.</p> This is a paragraph.
</p>
We Suggest: Use Lowercase Attributes
The HTML5 standard does not require lowercase attribute names .The
title attribute can be written with uppercase or lowercase
like title or TITLE. W3C recommends lowercase in HTML,
and demands lowercase for stricter document types like XHTML.
The lang Attribute At W3Schools we always use lowercase attribute names.
The language of the document can be declared in the <html> tag. The
language is declared with the lang attribute. Declaring a language is
important for accessibility applications (screen readers) and search We Suggest: Quote Attribute Values
engines: The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written without quotes:
<!DOCTYPE html>
<html lang="en-US"> <body>
Bad
------ <a href=https://www.w3schools.com>
</body> </html>
The first two letters specify the language (en). If there is a dialect, add
Good
two more letters (US). <a href="https://www.w3schools.com">
W3C recommends quotes in HTML, and demands quotes for stricter
The title Attribute document types like XHTML. Sometimes it is necessary to use quotes.
This example will not display the title attribute correctly, because it
Here, a title attribute is added to the <p> element. The value of the title contains a space:
attribute will be displayed as a tooltip when you mouse over the
paragraph:
7
NABIIKHAN OFFICIAL HTML NOTES
Example <p title="John 'ShotGun' Nelson">
<h1>About W3Schools</h1> Chapter Summary
<p title=About W3Schools>
All HTML elements can have attributes
You cannot omit quotes around an attribute value
The title attribute provides additional "tool-tip" information
if the value contains spaces.
The href attribute provides address information for links
</p>
The width and height attributes provide size information for
<p><b> images
If you move the mouse over the paragraph above, The alt attribute provides text for screen readers
your browser will only display the first word from the title. At W3Schools we always use lowercase attribute names
</b></p> At W3Schools we always quote attribute values
HTML Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the most
important heading. <h6> defines the least important heading.
Using quotes are the most common. Omitting quotes can produce Example
errors. At W3Schools we always use quotes around attribute values. <h1>Heading 1</h1>
<h2>Heading 2</h2>
Single or Double Quotes? <h3>Heading 3</h3>
<h4>Heading 4</h4>
Double quotes around attribute values are the most common in HTML, <h5>Heading 5</h5>
but single quotes can also be used. In some situations, when the <h6>Heading 6</h6>
attribute value itself contains double quotes, it is necessary to use single
Note: Browsers automatically add some white space (a margin) before
quotes:
and after a heading.
<p title='John "ShotGun" Nelson'>
Or vice versa:
8
NABIIKHAN OFFICIAL HTML NOTES
Headings Are Important HTML Horizontal Rules
Search engines use the headings to index the structure and content of The <hr> tag defines a thematic break in an HTML page, and is most
your web pages. Users often skim a page by its headings. It is important often displayed as a horizontal rule. The <hr> element is used to
to use headings to show the document structure. separate content (or define a change) in an HTML page:
<h1> headings should be used for main headings, followed Example
by <h2> headings, then the less important <h3>, and so on.
<h1>This is heading 1</h1>
Note: Use HTML headings for headings only. Don't use headings to <p>This is some text.</p>
make text BIG or bold. <hr>
<h2>This is heading 2</h2>
<p>This is some other
Bigger Headings
text.</p><hr>
Each HTML heading has a default size. However, you can specify the
size for any heading with the style attribute, using the CSS font-
size property:
The HTML <head> Element
Example
The HTML <head> element is a container for metadata. HTML
<!DOCTYPE html> metadata is data about the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and
<html> <body> the <body> tag:
<h1 style="font-size:60px;">Heading 1</h1>
Example
<p>You can change the size of a heading with the style attribute, using the
font-size property.</p> <!DOCTYPE html>
<html>
</body> <head>
<title>My First HTML</title>
</html> <meta charset="UTF-8">
</head> <body>
9
NABIIKHAN OFFICIAL HTML NOTES
<p>The HTML head element contains meta data.</p> ignores it.</p>
<p>Meta data is data about the HTML document.</p> <p>
This paragraph
Note: Metadata typically define the document title, character set, contains a lot of spaces
styles, scripts, and other meta information. in the source code,
but the browser
HTML Paragraphs
ignores it.
</p>
The HTML <p> element defines a paragraph: Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end
Example tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> Example
Note: Browsers automatically add some white space (a margin) before <p>This is a paragraph.
and after a paragraph. <p>This is a paragraph.
<p>This is a paragraph.
HTML Display <p>Don't forget to close your HTML tags!</p>
The example above will work in most browsers, but do not rely on it.
You cannot be sure how HTML will be displayed. Large or small
screens, and resized windows will create different results. With HTML, Note: Dropping the end tag can produce unexpected results or errors.
you cannot change the output by adding extra spaces or extra lines in
your HTML code. The browser will remove any extra spaces and extra HTML Line Breaks
lines when the page is displayed:
The HTML <br> element defines a line break. Use <br> if you want a
Example line break (a new line) without starting a new paragraph:
<p> Example
This paragraph
contains a lot of lines <p>This is<br>a paragraph<br>with line breaks.</p> The <br> tag is
in the source code, an empty tag, which means that it has no end tag
but the browser
10
NABIIKHAN OFFICIAL HTML NOTES
The Poem Problem
My Bonnie lies over the ocean.
This poem will display on a single line:
Oh, bring back my Bonnie to me.
Example </pre>
<p>
HTML Styles
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Setting the style of an HTML element, can be done with
My Bonnie lies over the ocean. the style attribute. The HTML style attribute has the following syntax:
Oh, bring back my Bonnie to me.
</p> <tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an
HTML element. This example sets the background color for a page to
The HTML <pre> Element powderblue:
The HTML <pre> element defines preformatted text. The text inside Example
a <pre> element is displayed in a fixed-width font (usually Courier), and
it preserves both spaces and line breaks: <body style="background-color:powderblue;">
<h1>This is a heading</h1>
Example <p>This is a paragraph.</p>
<pre> My Bonnie lies over the ocean.
My Bonnie lies over the sea.
11
NABIIKHAN OFFICIAL HTML NOTES
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1> Text Size
<p style="color:red;">This is a paragraph.</p> The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML
element:
12
NABIIKHAN OFFICIAL HTML NOTES
Text Alignment
The CSS text-align property defines the horizontal text alignment for an
HTML Text Formatting
HTML element: HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.
Example HTML also defines special elements for defining text with a
special meaning.
<h1 style="text-align:center;">Centered Heading</h1> HTML uses elements like <b> and <i> for formatting output,
<p style="text-align:center;">Centered paragraph.</p> like bold or italic text.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
Chapter Summary <sup> - Superscript text
Use the style attribute for styling HTML elements HTML <b> and <strong> Elements
Use background-color for background color The HTML <b> element defines bold text, without any extra
Use color for text colors importance.
Use font-family for text fonts Example
Use font-size for text sizes <p>This text is normal.</p>
Use text-align for text alignment
<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic
"strong" importance.
13
NABIIKHAN OFFICIAL HTML NOTES
Example
<p>This text is normal.</p>
<strong>This text is strong</strong>
HTML <mark> Element
HTML <i> and <em> Elements The HTML <mark> element defines marked/highlighted text:
The HTML <i> element defines italic text, without any extra Example
importance. <h2>HTML <mark>Marked</mark> Formatting</h2>
Example
<p>This text is normal.</p>
<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added
semantic importance. HTML <del> Element
Example The HTML <del> element defines deleted/removed text.
<p>This text is normal.</p> Example
<p>The del element represents deleted (removed) text.</p>
<em>This text is emphasized</em>
<p>My favorite color is <del>blue</del> red.</p>
Note: Browsers display <strong> as <b>, and <em> as <i>. However,
there is a difference in the meaning of these tags: <b> and <i> defines
bold and italic text, but <strong> and <em> means that the text is
"important".
HTML <small> Element
The HTML <small> element defines smaller text: HTML <ins> Element
Example The HTML <ins> element defines inserted/added text.
<h2>HTML <small>Small</small> Formatting</h2> Example
<p>The ins element represent inserted (added) text.</p>
14
NABIIKHAN OFFICIAL HTML NOTES
<p>My favorite <ins>color</ins> is red.</p>
HTML <q> for Short Quotations
The HTML <q> element defines a short quotation. Browsers usually
insert quotation marks around the <q> element.
Example
HTML <sub> Element <p>Browsers usually insert quotation marks around the q element.</p>
The HTML <sub> element defines subscripted text.
Example <p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element HTML <blockquote> for Quotations
The HTML <sup> element defines superscripted text.
Example The HTML <blockquote> element defines a section that is quoted from
another source. Browsers usually indent <blockquote> elements.
<p>This is <sup>superscripted</sup> text.</p>
Example
<p>Browsers usually indent blockquote elements.</p>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
HTML Quotation and The world's leading conservation organization,
WWF works in 100 countries and is supported by
Citation Elements 1.2 million members in the United States and
15
NABIIKHAN OFFICIAL HTML NOTES
close to 5 million globally. HTML <address> for Contact Information
</blockquote>
The HTML <address> element defines contact information
(author/owner) of a document or an article. The <address> element is
usually displayed in italic. Most browsers will add a line break before
and after the element.
Example
<p>The HTML address element defines contact information
(author/owner) of a document or article.</p>
<address>
HTML <abbr> for Abbreviations Written by John Doe.<br>
The HTML <abbr> element defines an abbreviation or an acronym. Visit us at:<br>
Marking abbreviations can give useful information to browsers, Example.com<br>
translation systems and search-engines. Box 564, Disneyland<br>
USA</address>
Example
<p>The <abbr title="WorldHealth Organization">WHO</abbr> was
founded in 1948.</p>
<p>Marking up abbreviations can give useful information to
browsers, translation systems and search-engines.</p>
HTML <cite> for Work Title
The HTML <cite> element defines the title of a work. Browsers usually
display <cite> elements in italic.
Example
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
16
NABIIKHAN OFFICIAL HTML NOTES
<img src="img_the_scream.jpg" width="100" height="100"
alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in
1893.</p>
HTML Comments
Comment tags are used to insert comments in the HTML source
code.
HTML Comment Tags
You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
HTML <bdo> for Bi-Directional Override
Notice that there is an exclamation point (!) in the opening tag, but not
The HTML <bdo> element defines bi-directional override. in the closing tag.
The <bdo> element is used to override the current text direction:
Note: Comments are not displayed by the browser, but they can help
Example document your HTML source code.
<p>If your browser supports bi-directional override (bdo), the next line With comments you can place notifications and reminders in your
will be written from right to left (rtl):</p> HTML:
Example
<bdo dir="rtl">This text will be written from right to left</bdo> <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
17
NABIIKHAN OFFICIAL HTML NOTES
<h1 style="background-color:Violet;">Violet</h1>
Comments are also great for debugging HTML, because you can
comment out HTML lines of code, one at a time, to search for errors: <h1 style="background-color:LightGray;">LightGray</h1>
Example
<!-- Do not display this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
HTML Colours
HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name. HTML
supports 140 standard color names.
Background Color
You can set the background color for HTML elements:
Example
<h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:DodgerBlue;">Hello World</h1>
<h1 style="background-color:Orange;">Orange</h1> <p style="background-color:Tomato;"> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1> ut laoreet dolore magna aliquam erat volutpat.
<h1 style="background- Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
color:MediumSeaGreen;">MediumSeaGreen</h1> suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<h1 style="background-color:Gray;">Gray</h1> Hello World
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
18
NABIIKHAN OFFICIAL HTML NOTES
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Hello World
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation Hello World
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Hello World
Text Color You can set the color of text:
Example
Color Values
In HTML, colors can also be specified using RGB values, HEX values,
<h3 style="color:Tomato;">Hello World</h3>
HSL values, RGBA values, and HSLA values.
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod Example
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Same as color name "Tomato":</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99,
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
71)</h1>
ut aliquip ex ea commodo consequat.</p>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%,
64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
Border Color You can set the color of borders:
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99,
Example 71, 0.5)</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9,
<h1 style="border:2px solid Violet;">Hello World</h1> 100%, 64%, 0.5)</h1>
19
NABIIKHAN OFFICIAL HTML NOTES
<p>In addition to the predefined color names, colors can be Example
specified using RGB, HEX, HSL, or even transparent colors using
RGBA or HSLA color values.</p> <h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Italian Trulli">
HTML Images Syntax
In HTML, images are defined with the <img> tag. The <img> tag is
empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the
src attribute, or if the user uses a screen reader). The value of
the alt attribute should describe the image:
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of
the alt attribute. //see example output above
HTML Images Note: The alt attribute is required. A web page will not validate
correctly without it.
Images can improve the design and the appearance of a web page.
20
NABIIKHAN OFFICIAL HTML NOTES
Image Size - Width and Height img {
width: 50%;
You can use the style attribute to specify the width and height of an }
image. </style>
</head>
Example <body>
<h2>Styling Images</h2>
<img src="img_girl.jpg" alt="Girl in a <p>The image below has the width attribute set to 128 pixels, but
jacket" style="width:500px;height:600px;"> the stylesheet overrides it, and sets the width to 100%.</p>
<img src="html5.gif" alt="HTML5 Icon" width="128"
Alternatively, you can use the width and height attributes: height="128">
<p>The image below uses the style attribute, where the width is set
Example to 128 pixels which overrides the stylesheet:</p>
<img src="img_girl.jpg" alt="Girl in a
<img src="html5.gif" alt="HTML5 Icon"
jacket" width="500" height="600"> style="width:128px;height:128px;"> </body> </html>
The width and height attributes always defines the width and height of
the image in pixels.
Note: Always specify the width and height of an image. If width and
height are not specified, the page might flicker while the image loads.
Width and Height, or Style?
The width, height, and style attributes are valid in HTML. However, we
suggest using the style attribute. It prevents styles sheets from changing
the size of images:
Example
Images in Another Folder
If not specified, the browser expects to find the image in the same
<!DOCTYPE html> <html> <head> folder as the web page. However, it is common to store images in a
<style> sub-folder. You must then include the folder name in the src attribute:
/* This stylesheet sets the width of all images to 50%: */
21
NABIIKHAN OFFICIAL HTML NOTES
Example
<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You must then
include the folder name in the src attribute:</p>
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Animated Images HTML allows animated GIFs:
Example
<h2>Animated Images</h2>
Images on Another Server <p>The GIF standard allows moving
images.</p>
Some web sites store their images on image servers. Actually, you can <img src="programming.gif" alt=
access images from any web address in the world:
"Computer Man" style="width:48px;height:48px;">
Example
<h2>Images on Another Server</h2>
Image as a Link
<img src="https://www.w3schools.com/images/w3schools_green.jpg" To use an image as a link, put the <img> tag inside the <a> tag:
alt="W3Schools.com">
Example
<h2>Image as a Link</h2>
22
NABIIKHAN OFFICIAL HTML NOTES
<p>The image is a link. You can click on it.</p> A paragraph with a floating image. A paragraph with a floating
<a href="default.asp"> image. A paragraph with a floating image.
<img src="smiley.gif" alt="HTML </p>
tutorial" style="width:42px;height:42px;border:0;"> <p><strong>Float the image to the left:</strong></p>
</a> <p>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a <img src="smiley.gif" alt="Smiley face"
border around the image.</p> style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating
image. A paragraph with a floating image.
</p>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a
border around the image (when the image is a link).
Image Floating
HTML Screen Readers
Use the CSS float property to let the image float to the right or to the A screen reader is a software program that reads the HTML code,
left of a text: converts the text, and allows the user to "listen" to the content. Screen
readers are useful for people who are visually impaired or learning
Example disabled.
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p> Chapter Summary
<p>
<img src="smiley.gif" alt="Smiley face" Use the HTML <img> element to define an image
style="float:right;width:42px;height:42px;"> Use the HTML src attribute to define the URL of the image
23
NABIIKHAN OFFICIAL HTML NOTES
Use the HTML alt attribute to define an alternate text for an <area shape="rect" coords="34,44,270,350" alt="Computer" href="co
image, if it cannot be displayed mputer.htm">
Use the HTML width and height attributes to define the size of <area shape="rect" coords="290,172,333,250" alt="Phone" href="pho
the image ne.htm">
Use the CSS width and height properties to define the size of
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.
the image (alternatively)
Use the CSS float property to let the image float htm"></map>
HTML Image Maps
With image maps, you can add clickable areas on an image.
Image Maps
The <map> tag
defines an image-
map. An image-map
is an image with
clickable areas. Click How Does it Work?
on the computer, the The idea behind an image map is that you should be able to perform
phone, or the cup of different actions depending on where in the image you click.
coffee in the image To create an image map you need an image, and a map containing
below: some rules that describe the clickable areas.
Example
<h2>Image
The Image The image is inserted using the <img> tag. The only
difference from other images is that you must add a usemap attribute:
Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a <img src="workplace.jpg" alt="Workplace" usemap=
new page and read more about the topic:</p> "#workmap">
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
24
NABIIKHAN OFFICIAL HTML NOTES
The usemap value starts with a hash tag # followed by the name of the 1. The coordinates 34, 44 is located 34 pixels from the left margin
image map, and is used to create a relationship between the image and and 44 pixels from the top:
the image map.
Note: You can use any image as an image map. 2. The coordinates 270, 350 is located 270 pixels from the left margin
and 350 pixels from the top:
The Map Then add a <map> element. The <map> element is
used to create an image map, and is linked to the image by using
the name attribute:
<map name="workmap">
The name attribute must have the same value as the usemap attribute.
Note: You may insert the <map> element anywhere you like, it does not
have to be inserted right after the image.
The Areas Then add the clickable areas. Now you have enough data to create a clickable rectangular area:
A clickable area is defined using an <area> element. <area shape="rect" coords=
"34, 44, 270, 350" href="computer
Shape You must define the shape of the area, and you can choose .htm">
one of these values: This is the area that becomes clickable
rect - defines a rectangular region and will send the user to the page computer.htm:
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
Circle
1. To add a circle area, first locate the coordinates of the center of
Coordinates You must define some coordinates to be able to the circle: 337, 300
place the clickable area onto the image. The coordinates come in pairs,
one for the x-axis and one for the y-axis. 2. Then specify the radius of the circle: 44 pixels
25
NABIIKHAN OFFICIAL HTML NOTES
separated by a comma. Each pair of numbers defines the (x,
y) coordinates of a point on the image. These points are all
vertices of the polygon
Chapter Summary
Use the HTML <map> element to define an image-map
Use the HTML <area> element to define the clickable areas in
the image-map
Use the HTML <img>'s element usemap attribute to point to
an image-map
Now you have enough data to
create a clickable circular area:
HTML Background Images
A background image can be specified on almost any HTML
element. To add a background image in HTML, use the CSS
<area shape="circle"
property background-image.
coords="337, 300, 44"
href="coffee.htm"> Background Image on a HTML element
To add a background image on an HTML element, you can use
This is the area that becomes the style attribute:
clickable and will send the user Example
to the page coffee.htm: <h2>Background Image</h2>
<div style="background-image: url('img_girl.jpg');">
You can specify background images<br>
Polygon: for any visible HTML element.<br>
If the shape attribute is set to poly, the coordinates define an In this example, the background image<br>
arbitrary number of points which form a free polygon. This can is specified for a div element.<br>
be used to create any shape, including very complex shapes. By default, the background-image<br>
will repeat itself in the direction(s)<br>
There should be an even number of coordinate values, each
26
NABIIKHAN OFFICIAL HTML NOTES
where it is smaller than the element<br> for any visible HTML element.<br>
where it is specified. (Try resizing the<br> In this example, the background image<br>
browser window to see how the<br> is specified for a div element.<br>
background image behaves. By default, the background-image<br>
</div> will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>
You can also specify the background image in the <style> element:
Example Specify the background image in the style element:
<style>
div {
background-image: url('img_girl.jpg'); }
</style>
Background Image on a Page
If you want the entire page to have a background image, then you must
<h2>Background Image</h2>
specify the background image on the <body> element:
<div>
You can specify background images<br>
27
NABIIKHAN OFFICIAL HTML NOTES
Example Add a background image on a HTML page: background-image: url('example_img_girl.jpg'); }
<style> </style>
body { <body>
background-image: url('img_girl.jpg'); } </style> <h2>Background Repeat</h2>
<h2>Background Image</h2> <p>By default the background image will repeat itself if it is smaller
<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY
than the element where it is specified, in this case the BODY element.</p>
element.</p>
Background Repeat
If the background image is smaller than the element, the image will
repeat itself, horizontally and vertically, until it has reach the end of the
To avoid the background image from repeating itself, use
element. To explain, see what happens when we use a small image as a
the background-repeat property.
background inside a large div element: The background-image property
will try to fill the div element with images until it has reach the end. Example
Example <style>
<style> body {
body { background-image: url('example_img_girl.jpg');
background-repeat: no-repeat; } </style>
28
NABIIKHAN OFFICIAL HTML NOTES
Background Cover
If you want the background image cover the entire element, you can
set the background-size property to cover. Also, to make sure the entire
Background Stretch
element is always covered, set the background-attachment property to If you want the background image stretch to fit the entire image in the
fixed: As you can see, the image will cover the entire element, with no element, you can set the background-size property to 100% 100%:
stretching, the image will keep its original proportions. Try resizing the browser window, and you will see that the image will
Example stretch, but always cover the entire element.
<style> Example
body { <style>
background-image: url('img_girl.jpg'); body {
background-repeat: no-repeat; background-image: url('img_girl.jpg');
background-attachment: fixed; background-repeat: no-repeat;
background-size: cover; } </style> background-attachment: fixed;
<body> background-size: 100% 100%; } </style>
</style> <body>
<h2>Background Cover</h2> <h2>Background Stretch</h2>
<p>Set the background-size property to "cover" and the background <p>Set the background-size property to "100% 100%r" and the
image will cover the entire element, in this case the BODY background image will be stretched to cover the entire element, in this
element.</p> </body> </html> case the BODY element.</p> </body> </html>
29
NABIIKHAN OFFICIAL HTML NOTES
and/or device. Each <source> element have attributes describing when
their image is the most suitable.
Syntax
Show different images on different screen sizes:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Example
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> </head> <body>
<h2>The picture Element</h2>
<picture>
HTML Picture Element <source media="(min-width: 200px)" srcset="img_food.jpg">
<source media="(min-width: 100px)" srcset="img_car.jpg">
The picture element allows us to display different pictures for <img src="img_girl.jpg" style="width:auto;"> </picture>
different devices or screen sizes. <p>Resize the browser to see different versions of the picture
loading at different viewport sizes.
The browser looks for the first source element where the media
query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>
The HTML <picture> Element <p><strong>Note:</strong> The picture element is not supported in
HTML5 introduced the <picture> element to add more flexibility when IE12 and earlier or Safari 9.0 and earlier.</p>
specifying image resources. The <picture> element contains a number
of <source> elements, each referring to different image sources. This
way the browser can choose the image that best fits the current view
30
NABIIKHAN OFFICIAL HTML NOTES
2. Format Support
Some browsers or devices may not support all image formats. By using
the <picture> element, you can add images of all formats, and the
browser will use the first format it recognizes and ignore any of the
following.
Example
The browser will use the first image format it recognizes:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Note: Always specify an <img> element as the last child element of
the <picture> element. The <img> element is used by browsers that do
not support the <picture> element, or if none of the <source> tags
matched.
When to use the Picture Element
There are two main purposes for the <picture> element:
1. Bandwidth
If you have a small screen or device, it is not necessary to load a large
image file. The browser will use the first <source> element with
matching attribute values, and ignore any of the following elements. Note: The browser will use the first <source> element with matching
attribute values, and ignore any following <source> elements.
31
NABIIKHAN OFFICIAL HTML NOTES
HTML Tables HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without
Defining an HTML Table borders. A border is set using the CSS border property:
An HTML table is defined with the <table> tag.
Example
Each table row is defined with the <tr> tag. A table header is defined table, th, td {
with the <th> tag. By default, table headings are bold and centered. A border: 1px solid black; } </head> <body>
table data/cell is defined with the <td> tag. <h2>Bordered Table</h2>
Example <p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%"> <table style="width:100%">
<tr> <tr>
<th>Firstname</th> <th>Firstname</th>
<th>Lastname</th> <th>Lastname</th>
<th>Age</th> <th>Age</th> </tr>
</tr> <tr>
<tr> <td>Jill</td>
<td>Jill</td> <td>Smith</td>
<td>Smith</td> <td>50</td> </tr>
<td>50</td> <tr>
</tr> <td>Eve</td>
<tr> <td>Jackson</td>
<td>Eve</td> <td>94</td> </tr>
<td>Jackson</td> <tr>
<td>94</td> <td>John</td>
</tr> <td>Doe</td>
</table> <td>80</td>
</tr> </table> </body> </html>
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other Remember to define borders for both the table and the table cells.
tables, etc.
32
NABIIKHAN OFFICIAL HTML NOTES
HTML Table - Collapsed Borders Example
If you want the borders to collapse into one border, add the CSS border- <style>
collapse property: table, th, td {
Example border: 1px solid black;
table, th, td { border-collapse: collapse;
border: 1px solid black; }
border-collapse: collapse; th, td {
} padding: 5px;
}
HTML Table - Adding Cell Padding th {
text-align: left;
Cell padding specifies the space between the cell content and its
}
borders. If you do not specify a padding, the table cells will be
displayed without padding. To set the padding, use the </style>
CSS padding property:
Example
<style> HTML Table - Adding Border Spacing
table, th, td {
Border spacing specifies the space between the cells.
border: 1px solid black;
To set the border spacing for a table, use the CSS border-
border-collapse: collapse; spacing property:
}
Example
th, td {
table {
padding: 15px;
border-spacing: 5px;
}
}
</style>
HTML Table - Left-align Headings
By default, table headings are bold and centered. Note: If the table has collapsed borders, border-spacing has no effect.
To left-align the table headings, use the CSS text-align property:
33
NABIIKHAN OFFICIAL HTML NOTES
<td>55577854</td>
HTML Table - Cells that Span Many </tr>
Columns To make a cell span more than one column, use <tr>
the colspan attribute: <td>55577855</td>
Example </tr>
<table style="width:100%"> </table>
<tr>
<th>Name</th> HTML Table - Adding a Caption
<th colspan="2">Telephone</th> To add a caption to a table, use the <caption> tag:
</tr> Example
<tr> <table style="width:100%">
<td>Bill Gates</td> <caption>Monthly savings</caption>
<td>55577854</td> <tr>
<td>55577855</td> <th>Month</th>
</tr> <th>Savings</th>
</table> </tr> <tr>
<td>January</td>
HTML Table - Cells that Span Many <td>$100</td>
</tr>
Rows To make a cell span more than one row, use <tr>
the rowspan attribute: <td>February</td>
Example <td>$50</td>
</tr> </table>
<table style="width:100%">
<tr>
Note: The <caption> tag must be inserted immediately after
<th>Name:</th>
the <table> tag.
<td>Bill Gates</td> </tr>
<tr>
<th rowspan="2">Telephone:</th>
34
NABIIKHAN OFFICIAL HTML NOTES
A Special Style for One Table And add more styles:
To define a special style for a special table, add an id attribute to the table#t01 tr:nth-child(even) {
table: background-color: #eee; }
Example table#t01 tr:nth-child(odd) {
<table id="t01"> background-color: #fff; }
<tr> table#t01 th {
<th>Firstname</th> color: white;
<th>Lastname</th> background-color: black; }
<th>Age</th>
</tr> Chapter Summary
<tr>
Use the HTML <table> element to define a table
<td>Eve</td> Use the HTML <tr> element to define a table row
<td>Jackson</td> Use the HTML <td> element to define a table data
<td>94</td> Use the HTML <th> element to define a table heading
</tr> Use the HTML <caption> element to define a table caption
</table> Use the CSS border property to define a border
Now you can define a special style for this table: Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
table#t01 {
Use the CSS text-align property to align cell text
width: 100%; Use the CSS border-spacing property to set the spacing
background-color: #f1f1c1;} between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
35
NABIIKHAN OFFICIAL HTML NOTES
HTML Lists Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
Unordered HTML List <li>Tea</li>
An unordered list starts with the <ul> tag. Each list item starts with <li>Milk</li>
the <li> tag. The list items will be marked with bullets (small black </ul>
circles) by default:
Example
<ul>
<li>Coffee</li> Example - Circle
<li>Tea</li> <ul style="list-style-type:circle;">
<li>Milk</li> <li>Coffee</li>
</ul> <li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List Item
Marker
The CSS list-style-type property is used to define the style of the list item Example - Square
marker: <ul style="list-style-type:square;">
Value Description <li>Coffee</li>
<li>Tea</li>
Disc Sets the list item marker to a bullet (default) <li>Milk</li>
</ul>
Circle Sets the list item marker to a circle
Square Sets the list item marker to a square
Example - None
None The list items will not be marked
<ul style="list-style-type:none;">
<li>Coffee</li>
36
NABIIKHAN OFFICIAL HTML NOTES
<li>Tea</li>
type="I" The list items will be numbered with uppercase roman numbers
<li>Milk</li>
</ul> type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
Ordered HTML List <li>Coffee</li>
<li>Tea</li>
An ordered list starts with the <ol> tag. Each list item starts with
<li>Milk</li>
the <li> tag. The list items will be marked with numbers by default:
</ol>
Example
<ol>
<li>Coffee</li>
<li>Tea</li> Uppercase Letters:
<li>Milk</li> <ol type="A">
</ol> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item
marker:
Type Description
Lowercase Letters:
<ol type="a">
type="1" The list items will be numbered with numbers (default) <li>Coffee</li>
<li>Tea</li>
type="A" The list items will be numbered with uppercase letters <li>Milk</li>
</ol>
type="a" The list items will be numbered with lowercase letters
37
NABIIKHAN OFFICIAL HTML NOTES
Uppercase Roman Numbers: Nested HTML Lists
<ol type="I"> List can be nested (lists inside lists):
<li>Coffee</li> Example
<li>Tea</li> <ul>
<li>Milk</li> <li>Coffee</li>
</ol> <li>Tea
<ul>
<li>Black tea</li>
Lowercase Roman Numbers: <li>Green tea</li>
<ol type="i"> </ul>
<li>Coffee</li> </li>
<li>Tea</li> <li>Milk</li>
<li>Milk</li> </ul>
</ol>
Note: List items can contain new list, and other HTML elements, like
images and links, etc.
HTML Description Lists Control List Counting
HTML also supports description lists.
By default, an ordered list will start counting from 1. If you want to
A description list is a list of terms, with a description of each term.
start counting from a specified number, you can use the start attribute:
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term: Example
Example <ol start="50">
<dl> <li>Coffee</li>
<dt>Coffee</dt> <li>Tea</li>
<dd>- black hot drink</dd> <li>Milk</li>
<dt>Milk</dt> </ol>
<dd>- white cold drink</dd>
</dl>
38
NABIIKHAN OFFICIAL HTML NOTES
<li><a href="#contact">Contact</a></li>
Horizontal List with CSS <li><a href="#about">About</a></li>
HTML lists can be styled in many different ways with CSS. </ul>
One popular way is to style a list horizontally, to create a navigation
</body> </html>
menu:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; Chapter Summary
background-color: #333333; } Use the HTML <ul> element to define an unordered list
li { Use the CSS list-style-type property to define the list item
float: left; } marker
li a { Use the HTML <ol> element to define an ordered list
display: block; Use the HTML type attribute to define the numbering type
color: white; Use the HTML <li> element to define a list item
text-align: center; Use the HTML <dl> element to define a description list
padding: 16px; Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a
text-decoration: none; }
description list
li a:hover { Lists can be nested inside lists
background-color: #111111; } List items can contain other HTML elements
</style> </head> <body> Use the CSS property float:left or display:inline to display a
<ul> list horizontally
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
39
NABIIKHAN OFFICIAL HTML NOTES
HTML Forms Type Description
<input type="text"> Defines a single-line text input field
HTML Form Example
First name: <input type="radio"> Defines a radio button (for selecting one of many
John
choices)
Last name: <input Defines a submit button (for submitting the form)
Doe type="submit">
Submit
Text Fields
<input type="text"> defines a single-line input field for text
The <form> Element input.
The HTML <form> element defines a form that is used to collect user Example
input: A form with two text input fields:
<!DOCTYPE html>
<form> <html> <body>
form elements <h2>Text input fields</h2>
</form> <form>
<label for="fname">First name:</label><br>
An HTML form contains form elements. <input type="text" id="fname" name="fname" value="John"><br>
Form elements are different types of input elements, like: text fields, <label for="lname">Last name:</label><br>
checkboxes, radio buttons, submit buttons, and more. <input type="text" id="lname" name="lname" value="Doe">
</form>
The <input> Element <p>Note that the form itself is not visible.</p>
The <input> element is the most important form element. <p>Also note that the default width of text input fields is 20
The <input> element is displayed in several ways, depending on characters.</p>
the type attribute. Here are some examples: </body>
You will learn a lot more about input types later in this tutorial. </html>
40
NABIIKHAN OFFICIAL HTML NOTES
Radio Buttons
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
This is how it will look like in a browser: <label for="other">Other</label>
</form>
Note: The form itself is not visible. Also note that the default width of
an input field is 20 characters. This is how the HTML code above will be displayed in a browser:
Male
The <label> Element Female
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements. Other
The <label> element is useful for screen-reader users, because the
screen-reader will read out load the label when the user is focused on The Submit Button
the input element. <input type="submit"> defines a button for submitting the
The <label> element also help users who have difficulty clicking on
form data to a form-handler.
very small regions (such as radio buttons or checkboxes) - because
The form-handler is typically a page on the server with a script for
when the user clicks the text within the <label> element, it toggles the processing input data.
radio button/checkbox. The form-handler is specified in the form's action attribute.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together. Example
A form with a submit button:
41
NABIIKHAN OFFICIAL HTML NOTES
<form action="/action_page.php">
<label for="fname">First name:</label><br>
The Target Attribute
<input type="text" id="fname" name="fname" value="John"><br> The target attribute specifies if the submitted result will open in a new
<label for="lname">Last name:</label><br> browser tab, a frame, or in the current window.
The default value is "_self" which means the form will be submitted in
<input type="text" id="lname" name="lname" value="Doe"><br><br
the current window.
> To make the form result open in a new browser tab, use the value
<input type="submit" value="Submit"> "_blank".
</form>
Example Here, the submitted result will open in a new browser
This is how the HTML code above will be displayed in a browser: tab:
First name:
<form action="/action_page.php" target="_blank">
John
Last name:
Doe
Submit
The Action Attribute
The action attribute defines the action to be performed when the form
is submitted.
Usually, the form data is sent to a page on the server when the user
clicks on the submit button.
In the example above, the form data is sent to a page on the server
called "/action_page.php". This page contains a server-side script that
handles the form data:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.
42
NABIIKHAN OFFICIAL HTML NOTES
Other legal values are "_parent", "_top", or a name representing the OR:
name of an iframe.
Example
The Method Attribute Use the POST method when submitting the form:
The method attribute specifies the HTTP method (GET or POST) to <form action="/action_page.php" method="post">
be used when submitting the form data.
Example
Use the GET method when submitting the form:
<form action="/action_page.php" method="get">
43
NABIIKHAN OFFICIAL HTML NOTES
<form action="/action_page.php">
<label for="fname">First name:</label><br>
When to Use GET? <input type="text" id="fname" value="John"><br><br>
The default HTTP method when submitting form data is GET. <input type="submit" value="Submit">
However, when GET is used, the form data will be visible in the </form>
page's address field:
/action_page.php?firstname=John&lastname=Doe
Notes on GET:
Appends form-data into the URL in name/value pairs
The length of a URL is limited (2048 characters)
Never use GET to send sensitive data! (will be visible in the
URL)
Useful for form submissions where a user wants to bookmark
the result
GET is better for non-secure data, like query strings in Google
When to Use POST?
Always use POST if the form data contains sensitive or personal
information. The POST method does not display the form data in the
page address field.
Notes on POST:
POST has no size limitations, and can be used to send large
amounts of data.
Form submissions with POST cannot be bookmarked
The Name Attribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be
sent at all.
Example
This example will not submit the value of the "First name" input field:
44
NABIIKHAN OFFICIAL HTML NOTES
HTML Form Elements The <select> Element
This chapter describes all the different HTML form elements.
The <select> element defines a drop-down list:
The <input> Element Example
One of the most used form element is the <input> element. <select id="cars" name="cars">
The <input> element can be displayed in several ways, depending on <option value="volvo">Volvo</option>
the type attribute. <option value="saab">Saab</option>
Example <option value="fiat">Fiat</option>
<h2>The input Element</h2> <option value="audi">Audi</option>
</select>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>
If the type attribute is omitted, the input field gets the default type:
"text".
All the different input types are covered in the next chapter: HTML
Input Types.
45
NABIIKHAN OFFICIAL HTML NOTES
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
Visible Values: <option value="audi">Audi</option>
Use the size attribute to specify the number of visible values: </select>
Example
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<h2>Textarea</h2>
Allow Multiple Selections: <p>The textarea element defines a multi-line input field.</p>
Use the multiple attribute to allow the user to select more than one <form action="/action_page.php">
value: <textarea name="message" rows="10" cols="30">The cat was
Example playing in the garden.</textarea>
<select name="cars" size="4" multiple> <br><br>
<option value="volvo">Volvo</option> <input type="submit"> </form>
46
NABIIKHAN OFFICIAL HTML NOTES
This is how the HTML code above will be displayed in a browser:
Click Me!
Note: Always specify the type attribute for the button element.
Different browsers may use different default types for the button
element.
The rows attribute specifies the visible number of lines in a text area.
The <fieldset> and <legend> Elements
The cols attribute specifies the visible width of a text area. The <fieldset> element is used to group related data in a form.
This is how the HTML code above will be displayed in a browser The <legend> element defines a caption for the <fieldset> element.
Example
Example <form action="/action_page.php">
<textarea name="message" style="width:200px; height:600px;"> <fieldset>
The cat was playing in the garden. <legend>Personalia:</legend>
</textarea> <label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
The <button> Element <input type="text" id="lname" name="lname" value="Doe"><br><br>
The <button> element defines a clickable button: <input type="submit" value="Submit">
Example </fieldset></form>
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>
47
NABIIKHAN OFFICIAL HTML NOTES
<option value="Safari">
</datalist> </form>
The <output> Element
The <output> element represents the result of a calculation (like one
The <datalist> Element performed by a script).
The <datalist> element specifies a list of pre-defined options for Example
an <input> element. Perform a calculation and show the result in an <output> element:
Users will see a drop-down list of the pre-defined options as they input <form action="/action_page.php"
data. oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0
The list attribute of the <input> element, must refer to the id attribute of <input type="range" id="a" name="a" value="50">100 +
the <datalist> element.
<input type="number" id="b" name="b" value="50"> =
Example <output name="x" for="a b"></output>
<form action="/action_page.php"> <br><br> <input type="submit"> </form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
48
NABIIKHAN OFFICIAL HTML NOTES
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Input Type Text
HTML Input Types <input type="text"> defines a single-line text input field:
Example
This chapter describes the different input types for the <input> element. <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
HTML Input Types <label for="lname">Last name:</label><br>
Here are the different input types you can use in HTML: <input type="text" id="lname" name="lname">
<input type="button"> </form>
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
49
NABIIKHAN OFFICIAL HTML NOTES
Example
Input Type Password <form action="/action_page.php">
<input type="password"> defines a password field: <label for="fname">First name:</label><br>
Example <input type="text" id="fname" name="fname" value="John"><br>
<form> <label for="lname">Last name:</label><br>
<label for="username">Username:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="text" id="username" name="username"><br> <input type="submit" value="Submit">
<label for="pwd">Password:</label><br> </form>
<input type="password" id="pwd" name="pwd">
</form>
If you omit the submit button's value attribute, the button will get a
Input Type Submit default text:
<input type="submit"> defines a button for submitting form data to Example
a form-handler. The form-handler is typically a server page with a
<form action="/action_page.php">
script for processing input data. The form-handler is specified in the
form's action attribute: <label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
50
NABIIKHAN OFFICIAL HTML NOTES
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of
choices:
Input Type Reset Example
<input type="reset"> defines a reset button that will reset all form <form>
values to their default values: <input type="radio" id="male" name="gender" value="male">
Example <label for="male">Male</label><br>
<form action="/action_page.php"> <input type="radio" id="female" name="gender" value="female">
<label for="fname">First name:</label><br> <label for="female">Female</label><br>
<input type="text" id="fname" name="fname" value="John"><br> <input type="radio" id="other" name="gender" value="other">
<label for="lname">Last name:</label><br> <label for="other">Other</label> </form>
<input type="text" id="lname" name="lname" value="Doe"><br><br
>
<input type="submit" value="Submit">
<input type="reset">
</form>
51
NABIIKHAN OFFICIAL HTML NOTES
Input Type Checkbox Input Type Button
<input type="checkbox"> defines a checkbox. <input type="button"> defines a button:
Checkboxes let a user select ZERO or MORE options of a limited Example
number of choices. <input type="button" onclick="alert('Hello World!')" value="Click
Example Me!">
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"
>
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car"
>
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat Input Type Color
">
<label for="vehicle3"> I have a boat</label> The <input type="color"> is used for input fields that should contain
a color. Depending on browser support, a color picker can show up in
</form>
the input field.
Example
<form> <label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"> </form>
52
NABIIKHAN OFFICIAL HTML NOTES
Input Type Date
The <input type="date"> is used for input fields that should contain a
date. Depending on browser support, a date picker can show up in the
input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input
field, with no time zone. Depending on browser support, a date picker
can show up in the input field.
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
You can also use the min and max attributes to add restrictions to <input type="datetime-
dates: local" id="birthdaytime" name="birthdaytime"> </form>
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-
02">
</form>
53
NABIIKHAN OFFICIAL HTML NOTES
Input Type Email
The <input type="email"> is used for input fields that should
contain an e-mail address. Depending on browser support, the e-mail
address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the
keyboard to match email input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
Input Type Month
</form> The <input type="month"> allows the user to select a month and
year. Depending on browser support, a date picker can show up in the
input field.
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Input Type File
The <input type="file"> defines a file-select field and a "Browse"
button for file uploads.
Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"> Input Type Number
</form> The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
54
NABIIKHAN OFFICIAL HTML NOTES
The following example displays a numeric input field, where you can
enter a value from 1 to 5: Attribute Description
Example
<form> Checked Specifies that an input field should be pre-selected
<label for="quantity">Quantity (between 1 and 5):</label> when the page loads (for type="checkbox" or
<input type="number" id="quantity" name="quantity" min="1" max=" type="radio")
5">
</form> disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an
input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value
Input Restrictions against
Here is a list of some common input restrictions: readonly Specifies that an input field is read only (cannot be
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can changed)
enter a value from 0 to 100, in steps of 10. The default value is 30:
required Specifies that an input field is required (must be filled
Example out)
<form> <label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max= size Specifies the width (in characters) of an input field
"100" step="10" value="30"> </form>
Step Specifies the legal number intervals for an input field
Value Specifies the default value for an input field
55
NABIIKHAN OFFICIAL HTML NOTES
Input Type Range Input Type Tel
The <input type="range"> defines a control for entering a number The <input type="tel"> is used for input fields that should contain a
whose exact value is not important (like a slider control). Default range telephone number.
is 0 to 100. However, you can set restrictions on what numbers are Example
accepted with the min, max, and step attributes: <form>
Example <label for="phone">Enter your phone number:</label>
<form> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-
<label for="vol">Volume (between 0 and 50):</label> 9]{2}-[0-9]{3}"> </form>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves
like a regular text field).
Example
<form> Input Type Time
<label for="gsearch">Search Google:</label>
The <input type="time"> allows the user to select a time (no time
<input type="search" id="gsearch" name="gsearch"> </form>
zone). Depending on browser support, a time picker can show up in the
input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt"> </form>
56
NABIIKHAN OFFICIAL HTML NOTES
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a
URL address. Depending on browser support, the url field can be
automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the
keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"> </form> HTML Input Attributes
The value Attribute
The input value attribute specifies an initial value for an input field:
Example
Input fields with initial (default) values:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
Input Type Week <label for="lname">Last name:</label><br>
The <input type="week"> allows the user to select a week and year. <input type="text" id="lname" name="lname" value="Doe">
Depending on browser support, a date picker can show up in the input </form>
field.
57
NABIIKHAN OFFICIAL HTML NOTES
The disabled Attribute
The input disabled attribute specifies that an input field should be
disabled. A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the
form!
Example
A disabled input field:
<form>
<label for="fname">First name:</label><br>
The readonly Attribute <input type="text" id="fname" name="fname" value="John" disabled
The input readonly attribute specifies that an input field is read-only. ><br>
A read-only input field cannot be modified (however, a user can tab to <label for="lname">Last name:</label><br>
it, highlight it, and copy the text from it). <input type="text" id="lname" name="lname" value="Doe"> </form>
The value of a read-only input field will be sent when submitting the
form!
Example
A read-only input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly
><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"></form> The size Attribute
The input size attribute specifies the visible width, in characters, of an
input field. The default value for size is 20.
Note: The size attribute works with the following input types: text,
search, tel, url, email, and password.
Example
Set a width for an input field:
58
NABIIKHAN OFFICIAL HTML NOTES
<form> <input type="text" id="pin" name="pin" maxlength="4" size="4">
<label for="fname">First name:</label><br> </form>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
The min and max Attributes
The input min and max attributes specify the minimum and maximum
values for an input field.
The min and max attributes work with the following input types:
number, range, date, datetime-local, month, time and week.
The maxlength Attribute Tip: Use the max and min attributes together to create a range of legal
values.
The input maxlength attribute specifies the maximum number of
characters allowed in an input field. Example
Note: When a maxlength is set, the input field will not accept more than Set a max date, a min date, and a range of legal values:
the specified number of characters. However, this attribute does not <form>
provide any feedback. So, if you want to alert the user, you must write <label for="datemax">Enter a date before 1980-01-01:</label>
JavaScript code. <input type="date" id="datemax" name="datemax" max="1979-12-
Example 31"><br><br>
Set a maximum length for an input field: <label for="datemin">Enter a date after 2000-01-01:</label>
<form> <input type="date" id="datemin" name="datemin" min="2000-01-
<label for="fname">First name:</label><br> 02"><br><br>
<input type="text" id="fname" name="fname" size="50"><br> <label for="quantity">Quantity (between 1 and 5):</label>
<label for="pin">PIN:</label><br> <input type="number" id="quantity" name="quantity" min="1" max=
"5"> </form>
59
NABIIKHAN OFFICIAL HTML NOTES
The pattern Attribute
The input pattern attribute specifies a regular expression that the input
field's value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date,
search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the
user.
Example
An input field that can contain only three letters (no numbers or special
The multiple Attribute characters):
The input multiple attribute specifies that the user is allowed to enter <form>
more than one value in an input field. <label for="country_code">Country code:</label>
The multiple attribute works with the following input types: email, and <input type="text" id="country_code" name="country_code"
file. pattern="[A-Za-z]{3}" title="Three letter country code">
Example </form>
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
60
NABIIKHAN OFFICIAL HTML NOTES
The placeholder Attribute Example
A required input field:
The input placeholder attribute specifies short a hint that describes the <form>
expected value of an input field (a sample value or a short description
<label for="username">Username:</label>
of the expected format). The short hint is displayed in the input field
before the user enters a value. <input type="text" id="username" name="username" required>
The placeholder attribute works with the following input types: text, </form>
search, url, tel, email, and password.
Example
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-4567-8901"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
The step Attribute
The input step attribute specifies the legal number intervals for an input
field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the max and min
attributes to create a range of legal values.
The step attribute works with the following input types: number, range,
date, datetime-local, month, time and week.
Example
The required Attribute An input field with a specified legal number intervals:
The input required attribute specifies that an input field must be filled <form>
out before submitting the form. <label for="points">Points:</label>
The required attribute works with the following input types: text, search, <input type="number" id="points" name="points" step="3">
url, tel, email, password, date pickers, number, checkbox, radio, and </form>
file.
61
NABIIKHAN OFFICIAL HTML NOTES
The height and width Attributes
The input height and width attributes specify the height and width of
an <input type="image"> element.
Tip: Always specify both the height and width attributes for images. If
height and width are set, the space required for the image is reserved
when the page is loaded. Without these attributes, the browser does not
know the size of the image, and cannot reserve the appropriate space to
it. The effect will be that the page layout will change during loading
Note: Input restrictions are not foolproof, and JavaScript provides
(while the images load).
many ways to add illegal input. To safely restrict input, it must also be
checked by the receiver (the server)! Example
Define an image as the submit button, with height and width attributes:
<form>
The autofocus Attribute <label for="fname">First name:</label>
The input autofocus attribute specifies that an input field should <input type="text" id="fname" name="fname"><br><br>
automatically get focus when the page loads. <label for="lname">Last name:</label>
Example <input type="text" id="lname" name="lname"><br><br>
Let the "First name" input field automatically get focus when the page <input type="image" src="img_submit.gif" alt="Submit" width="48"
loads: height="48"> </form>
<form> <label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"> </form>
62
NABIIKHAN OFFICIAL HTML NOTES
Autocomplete allows the browser to predict the value. When a user
starts to type in a field, the browser should display options to fill in the
The list Attribute field, based on earlier typed values.
The input list attribute refers to a <datalist> element that contains pre- The autocomplete attribute works with <form> and the
defined options for an <input> element. following <input> types: text, search, url, tel, email, password,
Example datepickers, range, and color.
An <input> element with pre-defined values in a <datalist>: Example
<form> An HTML form with autocomplete on, and off for one input field:
<input list="browsers"> <form action="/action_page.php" autocomplete="on">
<datalist id="browsers"> <label for="fname">First name:</label>
<option value="Internet Explorer"> <input type="text" id="fname" name="fname"><br><br>
<option value="Firefox"> <label for="lname">Last name:</label>
<option value="Chrome"> <input type="text" id="lname" name="lname"><br><br>
<option value="Opera"> <label for="email">Email:</label>
<option value="Safari"> <input type="email" id="email" name="email" autocomplete="off"><
</datalist> </form> br><br>
<input type="submit" value="Submit"> </form>
The autocomplete Attribute
The input autocomplete attribute specifies whether a form or an input
field should have autocomplete on or off.
63
NABIIKHAN OFFICIAL HTML NOTES
HTML Input form* The formaction Attribute
Attributes The input formaction attribute specifies the URL of the file that will
process the input when the form is submitted.
Note: This attribute overrides the action attribute of the <form> element.
The form Attribute The formaction attribute works with the following input types: submit
The input form attribute specifies the form the <input> element belongs and image.
to. Example
The value of this attribute must be equal to the id attribute of the An HTML form with two submit buttons, with different actions:
<form> element it belongs to. <form action="/action_page.php">
Example <label for="fname">First name:</label>
An input field located outside of the HTML form (but still a part of the <input type="text" id="fname" name="fname"><br><br>
form): <label for="lname">Last name:</label>
<form action="/action_page.php" id="form1"> <input type="text" id="lname" name="lname"><br><br>
<label for="fname">First name:</label> <input type="submit" value="Submit">
<input type="text" id="fname" name="fname"><br><br> <input type="submit" formaction="/action_page2.php" value="Submi
<input type="submit" value="Submit"> </form> t as Admin"> </form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
64
NABIIKHAN OFFICIAL HTML NOTES
The formenctype Attribute The formmethod Attribute
The input formenctype attribute specifies how the form-data should be The input formmethod attribute defines the HTTP method for sending
encoded when submitted (only for forms with method="post"). form-data to the action URL.
Note: This attribute overrides the enctype attribute of Note: This attribute overrides the method attribute of
the <form> element. the <form> element.
TThe formenctype attribute works with the following input types: submit The formmethod attribute works with the following input types: submit
and image. and image.
Example The form-data can be sent as URL variables (method="get") or as an
A form with two submit buttons. The first sends the form-data with HTTP post transaction (method="post").
default encoding, the second sends the form-data encoded as Notes on the "get" method:
This method appends the form-data to the URL in name/value
"multipart/form-data":
<form action="/action_page_binary.asp" method="post"> pairs
This method is useful for form submissions where a user want
<label for="fname">First name:</label>
to bookmark the result
<input type="text" id="fname" name="fname"><br><br> There is a limit to how much data you can place in a URL
<input type="submit" value="Submit"> (varies between browsers), therefore, you cannot be sure that all
<input type="submit" formenctype="multipart/form-data" of the form-data will be correctly transferred
value="Submit as Multipart/form-data"> Never use the "get" method to pass sensitive information!
</form> (password or other sensitive information will be visible in the
browser's address bar)
Notes on the "post" method:
This method sends the form-data as an HTTP post transaction
Form submissions with the "post" method cannot be
bookmarked
The "post" method is more robust and secure than "get", and
"post" does not have size limitations
Example
A form with two submit buttons. The first sends the form-data with
method="get". The second sends the form-data with method="post":
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
65
NABIIKHAN OFFICIAL HTML NOTES
<label for="lname">Last name:</label> <input type="submit" value="Submit">
<input type="text" id="lname" name="lname"><br><br> <input type="submit" formtarget="_blank" value="Submit to a new
<input type="submit" value="Submit using GET"> window/tab"> </form>
<input type="submit" formmethod="post" value="Submit using
POST"> </form>
The formtarget Attribute
The input formtarget a attribute specifies a name or a keyword that
indicates where to display the response that is received after submitting
the form.
Note: This attribute overrides the target attribute of the <form> element.
The formtarget attribute works with the following input types: submit
and image.
Example
A form with two submit buttons, with different target windows:
<form action="/action_page.php"> The formnovalidate Attribute
<label for="fname">First name:</label> TThe input formnovalidate attribute specifies that an <input> element
<input type="text" id="fname" name="fname"><br><br> should not be validated when submitted.
<label for="lname">Last name:</label> Note: This attribute overrides the novalidate attribute of
<input type="text" id="lname" name="lname"><br><br> the <form> element.
66
NABIIKHAN OFFICIAL HTML NOTES
The formnovalidate attribute works with the following input types:
submit.
Example
AA form with two submit buttons (with and without validation):
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation"> </form>
HTML Form and Input Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
The novalidate Attribute
ThThe novalidate attribute is a <form> attribute.
When present, novalidate specifies that all of the form-data should not
be validated when submitted.
Example
Specify that no form-data should be validated on submit:
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit"> </form>
You might also like
- Lilley & Gillie: Installation & Operators Manual100% (1)Lilley & Gillie: Installation & Operators Manual2 pages
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML11 pages
- Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yetHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML10 pages
- Editors: Write HTML Using Notepad or TexteditNo ratings yetEditors: Write HTML Using Notepad or Textedit53 pages
- HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextNo ratings yetHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text80 pages
- Previous Next Chapter : HTML IntroductionNo ratings yetPrevious Next Chapter : HTML Introduction32 pages
- NLM DPP-04 Manish Raj Sir (Neet Crash Course Relaunch) ~ (Physics)No ratings yetNLM DPP-04 Manish Raj Sir (Neet Crash Course Relaunch) ~ (Physics)3 pages
- Barnum's in The Greatest Showman Movie Format FormalNo ratings yetBarnum's in The Greatest Showman Movie Format Formal11 pages
- Instant Download Experimental methods and instrumentation for chemical engineers Second Edition Patience - eBook PDF PDF All Chapters100% (4)Instant Download Experimental methods and instrumentation for chemical engineers Second Edition Patience - eBook PDF PDF All Chapters59 pages
- Instant ebooks textbook (eBook PDF) Power and Everyday Practice by Deborah Brock download all chapters100% (1)Instant ebooks textbook (eBook PDF) Power and Everyday Practice by Deborah Brock download all chapters40 pages
- 2024 Grade 10-12 - EFAL - Vhembe East Annual Assessment Plan-1No ratings yet2024 Grade 10-12 - EFAL - Vhembe East Annual Assessment Plan-13 pages
- Black Belt Framework Frequently Asked QuestionsNo ratings yetBlack Belt Framework Frequently Asked Questions3 pages
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
- Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
- HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
- NLM DPP-04 Manish Raj Sir (Neet Crash Course Relaunch) ~ (Physics)NLM DPP-04 Manish Raj Sir (Neet Crash Course Relaunch) ~ (Physics)
- Barnum's in The Greatest Showman Movie Format FormalBarnum's in The Greatest Showman Movie Format Formal
- Instant Download Experimental methods and instrumentation for chemical engineers Second Edition Patience - eBook PDF PDF All ChaptersInstant Download Experimental methods and instrumentation for chemical engineers Second Edition Patience - eBook PDF PDF All Chapters
- Instant ebooks textbook (eBook PDF) Power and Everyday Practice by Deborah Brock download all chaptersInstant ebooks textbook (eBook PDF) Power and Everyday Practice by Deborah Brock download all chapters
- 2024 Grade 10-12 - EFAL - Vhembe East Annual Assessment Plan-12024 Grade 10-12 - EFAL - Vhembe East Annual Assessment Plan-1