Scribd
Upload
4 views

HTML free notes

The document provides an introduction to HTML, explaining its structure, elements, and tags used to create web pages. It covers various HTML components such as headings, paragraphs, links, images, and styles, along with examples for each. Additionally, it discusses CSS integration for styling HTML elements and the use of attributes for customization.

Uploaded by

johnnychacha50
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML free notes

The document provides an introduction to HTML, explaining its structure, elements, and tags used to create web pages. It covers various HTML components such as headings, paragraphs, links, images, and styles, along with examples for each. Additionally, it discusses CSS integration for styling HTML elements and the use of attributes for customization.

Uploaded by

johnnychacha50
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

HTML Introduction

 The <body> element


contains the visible page

What is HTML?
content
 The <h1> element defines
HTML is the standard markup a large heading
language for creating Web  The <p> element defines a
pages. paragraph
 HTML stands for Hyper
Text Markup Language HTML Tags
 HTML describes the TML tags are element names
structure of Web pages surrounded by angle brackets:
using markup <tagname>content goes
 HTML elements are the here...</tagname>
building blocks of HTML  HTML tags normally
pages come in pairs like <p>
 HTML elements are and </p>
represented by tags  The first tag in a pair is
 HTML tags label pieces of the start tag, the second
content such as "heading", tag is the end tag
"paragraph", "table", and  The end tag is written like
so on the start tag, but with
 Browsers do not display a forward slash inserted
the HTML tags, but use before the tag name
them to render the content Tip: The start tag is also called
of the page the opening tag, and the end
Example Explained tag the closing tag.
 The <!DOCTYPE
html> declaration defines
this document to be HTML5
Open Notepad
Open Start > Programs
 The <html> element is the
> Accessories > Notepad
root element of an HTML


page
The <head> element
HTML Headings
HTML headings are defined with
contains meta information
the <h1> to <h6> tags.
about the document
<h1> defines the most
 The <title> element
important heading. <h6>
specifies a title for the
defines the least important
document
heading:
Example displayed as a tooltip when you
mouse over the paragraph:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2> Example
<h3>This is heading 3</h3> <p title="I'm a tooltip">
This is a paragraph.

HTML Paragraphs
</p>

HTML paragraphs are defined The href Attribute


with the <p> tag: HTML links are defined with
Example the <a> tag. The link address is
specified in the href attribute:
<p>This is a paragraph.</p>
<p>This is another Example
paragraph.</p> <a href="http://www.w3school

HTML Links
s.com">This is a link</a>

HTML links are defined with Size Attributes


the <a> tag: HTML images are defined with
the <img> tag.
Example The filename of the source (src),
<a href="http://www.w3school and the size of the image
s.com">This is a link</a> (width and height) are all

HTML Images
provided as attributes:

HTML images are defined with


Example
the <img> tag. <img src="w3schools.jpg" wid
The source file (src), alternative th="104" height="142">
text (alt), width, and height are
provided as attributes: The alt Attribute
The alt attribute specifies an
Example alternative text to be used,
<img src="w3schools.jpg" alt when an image cannot be
="W3Schools.com" width="104" displayed.
height="142"> The value of the attribute can be

The title Attribute


read by screen readers. This
way, someone "listening" to the
Here, a title attribute is added webpage, e.g. a blind person,
to the <p> element. The value can "hear" the element.
of the title attribute will be
Example Example
<img src="w3schools.jpg" alt <p>This is<br>a
="W3Schools.com" width="104" paragraph<br>with line
height="142"> breaks.</p>

HTML Horizontal
Rules
The <hr> tag defines a thematic
break in an HTML page, and is The HTML <pre>
Element
most often displayed as a
horizontal rule.
The <hr> element is used to The HTML <pre> element
separate content (or define a defines preformatted text.
change) in an HTML page: The text inside a <pre> element
Example is displayed in a fixed-width font
(usually Courier), and it
<h1>This is heading 1</h1> preserves both spaces and line
<p>This is some text.</p> breaks:
<hr>
<h2>This is heading 2</h2>
<p>This is some other
text.</p>
<hr>

HTML Styles
HTML Background
HTML Line Breaks
The HTML <br> element defines Color
a line break. The background-color property
Use <br> if you want a line defines the background color for
break (a new line) without an HTML element.
starting a new paragraph: This example sets the
background color for a page to
powderblue:
Result:-
Example
<h1 style="font-
size:300%;">This is a
heading</h1>
<p style="font-
HTML Text Color size:160%;">This is a
The color property defines the paragraph.</p>
text color for an HTML element:
HTML Text
Example
<h1 style="color:blue;">This Alignment
is a heading</h1> The text-align property defines
<p style="color:red;">This the horizontal text alignment for
is a paragraph.</p> an HTML element:
Example
Result:-

This is a heading <h1 style="text-


This is a paragraph. align:center;">Centered
HTML Fonts Heading</h1>
<p style="text-
The font-family property defines align:center;">Centered
the font to be used for an HTML paragraph.</p>
element:
Example HTML Text
<h1 style="font-
family:verdana;">This is a
heading</h1>
Formatting
<p style="font-
family:courier;">This is a HTML <b> and
<strong>
paragraph.</p>

HTML Text Size


The font-size property defines Elements
the text size for an HTML The HTML <b> element
element: defines bold text, without any
extra importance.
Example HTML <mark>
<b>This text is bold</b>
The HTML <strong> element
defines strong text, with added
Element
The HTML <mark> element
semantic "strong" importance.
defines marked or highlighted te
Example xt:
<strong>This text is
strong</strong>
Example
<h2>HTML <mark>Marked</mark>
Formatting</h2>
HTML <i> and HTML <del>
<em> Elements Element
The HTML <i> element
defines italic text, without any The HTML <del> element
extra importance. defines deleted (removed) text.

Example Example
<i>This text is italic</i> <p>My favorite color
The HTML <em> element is <del>blue</del> red.</p>
defines emphasized text, with
added semantic importance. HTML <ins>
Example Element
<em>This text is The HTML <ins> element
emphasized</em> defines inserted (added) text.

HTML <small> Example


Element
<p>My
favorite <ins>color</ins> is
The HTML <small> element red.</p>
defines smaller text:
HTML <sub>
Example
<h2>HTML <small>Small</small Element
> Formatting</h2> The HTML <sub> element
defines subscripted text.
Example Browsers usually insert
quotation marks around the
<p>This <q> element.
is <sub>subscripted</sub> te
xt.</p> Example
HTML <sup>
<p>WWF's goal is
to: <q>Build a future where
people live in harmony with
Element nature.</q></p>
The HTML <sup> element Result:-
defines superscripted text. WWF's goal is to: “Build a future where
people live in harmony with nature.”
Example
<p>This HTML <abbr> for
Abbreviations
is <sup>superscripted</sup>
text.</p>
HTML Quotation and The HTML <abbr> element
defines an abbreviation or an
Citation acronym.
Marking abbreviations can give
<body> useful information to browsers,
<p>Here is a quote from translation systems and search-
WWF's website:</p> engines.
<blockquote>
For 50 years, WWF has been Example
protecting the future of <p>The <abbr title="World
nature. Health
</blockquote> Organization">WHO</abbr> was
</body> founded in 1948.</p>
Result:- Result:-
Here is a quote from WWF's website:
For 50 years, WWF has been p

HTML <q> for HTML <address>


Short Quotations for Contact
he HTML <q> element defines a
short quotation.
Information
The HTML <address> element
defines contact information
HTML <bdo> for
(author/owner) of a document
or an article.
The <address> element is
usually displayed in italic. Most Bi-Directional
browsers will add a line break
before and after the element. Override
Example The HTML <bdo> element
<address> defines bi-directional override.
Written by John Doe.<br> The <bdo> element is used to
Visit us at:<br> override the current text
Example.com<br> direction:
Box 564, Disneyland<br> Example
USA <bdo dir="rtl">This text
</address> will be written from right
Result:- to left</bdo>
Written by John Doe.
Result:-
Visit us at:
This line will be written from right to
Example.com
left
Box 564, Disneyland
USA
HTML Comput
HTML <cite> for
Work Title er Code
The HTML <cite> element
defines the title of a work. Elements
Browsers usually display <cite>
elements in italic.
Computer Code
<code>
Example var x = 5;
<p><cite>The var y = 6;
Scream</cite> by Edvard document.getElementById("dem
Munch. Painted in 1893.</p> o").innerHTML = x + y;
Result:- </code>
The Scream by Edvard Munch. Painted Result:-
in 1893. var x = 5;
var y = 6;
document.getElementById("d
emo").innerHTML = x + y;
HTML <kbd> For Example
<h1 style="color:blue;">This
Keyboard Input is a Blue Heading</h1>
The HTML <kbd> element
defines keyboard input:
Internal CSS
An internal CSS is used to define
Example a style for a single HTML page.
<kbd>File | Open...</kbd> An internal CSS is defined in the
Result:- <head> section of an HTML
File | Open... page, within a <style> element:
Example
HTML Comme <!DOCTYPE html>

nts
<html>
<head>
<style>
You can add comments to your
HTML source by using the body {background-
following syntax: color: powderblue;}
<!-- Write your comments h1 {color: blue;}
here --> p {color: red;}
</style>
HTML Styles - </head>
<body>

CSS <h1>This is a heading</h1>


<p>This is a paragraph.</p>
CSS can be added to HTML
elements in 3 ways:
</body>
Inline CSS </html>
Result:-
An inline CSS is used to apply a
unique style to a single HTML
element.
An inline CSS uses the style
attribute of an HTML element.
This example sets the text color
of the <h1> element to blue:
External CSS
<style>
h1 {
An external style sheet is used color: blue;
to define the style for many font-family: verdana;
HTML pages. font-size: 300%;
With an external style sheet, }
you can change the look of p {
an entire web site, by color: red;
changing one file! font-family: courier;
To use an external style sheet, font-size: 160%;
add a link to it in the <head> }
section of the HTML page: </style>
Example </head>
<body>
<!DOCTYPE html>
<html>
<h1>This is a heading</h1>
<head>
<p>This is a paragraph.</p>
<link rel="stylesheet" hre
f="styles.css">
</body>
</head>
</html>
<body>
Result:-
<h1>This is a heading</h1> This is a heading
<p>This is a paragraph.</p> This is a paragraph.

</body> CSS Border


</html> The CSS border property
defines a border around an
HTML element:
Example
p {
border: 1px solid

CSS Fonts
powderblue;
}
<p>This is a paragraph.</p>
Example This is a paragraph.
<!DOCTYPE html>
<html>
<head>
CSS Padding
<p id="p01">I am different.</p>

The CSS padding property he class Attribute


defines padding (space) To define a style for a special
between the text and the type of elements, add a class
border: attribute to the element:
Example <p class="error">I am
different</p>
p { then define a style for the
border: 1px solid elements with the specific class:
powderblue;
padding: 30px; Example
} p.error {
Result:- color: red;
}
This is a paragraph.
HTML Links
CSS Margin
Example
<html>
The CSS margin property <body>
defines a margin (space) outside <p><a
the border: href="http://www.w3schools.com/ht
Example ml/">Visit our HTML tutorial</a></p>
</body>
p {
border: 1px solid </html>
powderblue; Result:-
margin: 50px; Visit our HTML tutorial
}

The id Attribute
To define a specific style for one
special element, add an id
attribute to the element:
Example HTML Link Colors
#p01 { By default, a link will appear like
color: blue; this (in all browsers):
}  An unvisited link is
underlined and blue
 A visited link is underlined height:42px;border:0;">
and purple </a>
 An active link is underlined
and red
You can change the default
HTML Tables
colors, by using styles:
Defining an HTML
Example
<style> Table
a:link {color:green; An HTML table is defined with
background- the <table> tag.
color:transparent; text- Each table row is defined with
the <tr> tag. A table header is
decoration:none} defined with the <th> tag. By
a:visited {color:pink; b default, table headings are bold
ackground- and centered. A table data/cell
color:transparent; text- is defined with the <td> tag.
decoration:none} Example
a:hover {color:red; ba <table style="width:100%">
ckground- <tr>
color:transparent; text- <th>Firstname</th>
decoration:underline} <th>Lastname</th>
a:active {color:yellow; <th>Age</th>
background- </tr>
<tr>
color:transparent; text- <td>Jill</td>
decoration:underline} <td>Smith</td>
</style> <td>50</td>
</tr>
<tr>
HTML Links - <td>Eve</td>
<td>Jackson</td>
Image as Link <td>94</td>
</tr>
<a href="#"> </table>
<img src="smiley.gif" alt=
"HTML Firstname Lastname Age
tutorial" style="width:42px; Jill Smith 50
Eve Jackson 94
John Doe 80 Firstname Lastname Age
Jill Smith 50

HTML Table - HTML Table -


Adding a Border Adding Cell
Padding
If you do not specify a border
for the table, it will be displayed
without borders. Cell padding specifies the space
A border is set using the between the cell content and its
CSS border property: borders.
Example If you do not specify a padding,
the table cells will be displayed
table, th, td { without padding.
border: 1px solid black; To set the padding, use the
} CSS padding property:

Firstname Lastname AgeExample


Jill Smith 50 th, td {
padding: 15px;
Eve Jackson 94
}
John Doe 80 Result:-

HTML Table -
Firstname Lastname Age

Collapsed Borders Jill Smith 50

HTML Table - Left-


If you want the borders to
collapse into one border, add
the CSS border-
collapse property: align Headings
Example By default, table headings are
table, th, td { bold and centered.
To left-align the table headings,
border: 1px solid black;
use the CSS text-
border-
align property:
collapse: collapse;
}
Result:-
Example HTML Table - Cells
th {

}
text-align: left; that Span Many
HTML Table - Cells Rows
To make a cell span more than
that Span Many one row, use
the rowspan attribute:
Columns Example
To make a cell span more than <table style="width:100%">
one column, use <tr>
the colspan attribute: <th>Name:</th>
Example <td>Bill Gates</td>
</tr>
<table style="width:100%"> <tr>
<tr> <th rowspan="2">Telephon
<th>Name</th> e:</th>
<th colspan="2">Telephon <td>55577854</td>
e</th> </tr>
</tr> <tr>
<tr> <td>55577855</td>
<td>Bill Gates</td> </tr>
<td>55577854</td> </table>
<td>55577855</td> Cell that spans two rows:
</tr>
</table> Name: Bill Gates
Cell that spans two columns:
55577854
Name Telephone Telephone:
55577855

HTML Lists
Bill Gates 55577854 55577
Unordered HTML
<li>Milk</li>
</ul>

List
Result:-
o Coffee
o Tea
An unordered list starts with
o Milk
the <ul> tag. Each list item
starts with the <li> tag. Example - Square
The list items will be marked
<ul style="list-style-
with bullets (small black circles)
type:square">
by default:
<li>Coffee</li>
Example <li>Tea</li>
<ul> <li>Milk</li>
<li>Coffee</li> </ul>
<li>Tea</li> Result:-
<li>Milk</li>  Coffee
 Tea
</ul>
 Milk
Result
 Coffee Example - None
 Tea
<ul style="list-style-
 Milk
type:none">
Example - Disc <li>Coffee</li>
<ul style="list-style- <li>Tea</li>
type:disc"> <li>Milk</li>
<li>Coffee</li> </ul>
<li>Tea</li> Coffee
<li>Milk</li> Tea
</ul> Milk
Result:-
 Coffee
Ordered HTML List
 Tea An ordered list starts with
 Milk the <ol> tag. Each list item
starts with the <li> tag.
Example - Circle The list items will be marked
<ul style="list-style- with numbers by default:
type:circle">
<li>Coffee</li>
Example
<li>Tea</li> <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Uppercase Roman
Result:-
1. Coffee
Numbers:
<ol type="I">
2. Tea
3. Milk <li>Coffee</li>
<li>Tea</li>
Numbers: <li>Milk</li>
<ol type="1"> </ol>
<li>Coffee</li> Result:-
<li>Tea</li> I. Coffee
<li>Milk</li> II. Tea
</ol> III. Milk
1. Coffee
2. Tea
Lowercase Roman
3. Milk Numbers:
Uppercase Letters: <ol type="i">
<ol type="A"> <li>Coffee</li>
<li>Coffee</li> <li>Tea</li>
<li>Tea</li> <li>Milk</li>
<li>Milk</li> </ol>
Result:-
</ol>
i. Coffee
Result:-
ii. Tea
A. Coffee
iii. Milk
B. Tea
C. Milk
HTML Description
Lowercase Letters:
<ol type="a"> Lists
<li>Coffee</li> HTML also supports description
<li>Tea</li> lists.
<li>Milk</li> A description list is a list of
</ol> terms, with a description of each
Result:- term.
a. Coffee The <dl> tag defines the
b. Tea description list, the <dt> tag
c. Milk defines the term (name), and
the <dd> tag describes each
term:
Example One popular way is to style a list
horizontally, to create a menu:
<dl>
<dt>Coffee</dt> Example
<dd>- black hot drink</dd> <!DOCTYPE html>
<dt>Milk</dt> <html>
<dd>- white cold <head>
drink</dd> <style>
</dl> ul {
Result:- list-style-type: none;
Coffee margin: 0;
- black hot drink padding: 0;
Milk overflow: hidden;
- white cold drink background-

Nested HTML Lists color: #333333;


}
List can be nested (lists inside
lists): li {
Example }
float: left;
<ul>
<li>Coffee</li>
li a {
<li>Tea
display: block;
<ul>
color: white;
<li>Black tea</li>
text-align: center;
<li>Green tea</li>
padding: 16px;
</ul>
text-decoration: none;
</li>
}
<li>Milk</li>
</ul>
li a:hover {
Result:-
background-
 Coffee
 Tea
color: #111111;
o Black tea
}
o Green tea </style>
 Milk </head>
<body>
Horizontal Lists
HTML lists can be styled in many <ul>
different ways with CSS. <li><a href="#home">Home</
a></li> Here we have three <div>
<li><a href="#news">News</ elements that points to the
a></li> same class name:
<li><a href="#contact">Con
tact</a></li>
Example
<li><a href="#about">About <!DOCTYPE html>
</a></li> <html>
</ul> <head>
<style>
</body> div.cities {
</html> background-color: black;
Result:- color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
The <span> </style>
</head>
Element <body>
When used together with CSS,
<div class="cities">
the <span> element can be
<h2>London</h2>
used to style parts of the text:
<p>London is the capital of
Example England. It is the most
<h1>My <span style="color:red">Impo populous city in the United
rtant</span> Heading</h1>
Result:- Kingdom, with a metropolitan
area of over 13 million
My Important Heading inhabitants.</p>

HTML The class </div>

<div class="cities">
Attribute <h2>Paris</h2>
<p>Paris is the capital and
Using The class most populous city of
France.</p>

Attribute
</div>
</body>
The HTML class attribute makes
</html>
it possible to define equal styles
for elements with the same class
name.
Using The class Iframe Syntax
Attribute on Inline
An HTML iframe is defined with
the <iframe> tag:
<iframe src="URL"></iframe>
Elements
<!DOCTYPE html> Iframe - Set
<html>
<head> Height and Width
<style>
span.note {
Example
font-size: 120%; <iframe src="demo_iframe.htm
color: red; " height="200" width="300"><
} /iframe>
</style> Result:-
</head>
<body>

<h1>My <span class="note">Im


portant</span> Heading</h1>
<p>This is
some <span class="note">impo
rtant</span> text.</p> Iframe - Remove
</body>
</html>
the Border
Result:- Example
My Important Heading <iframe src="demo_iframe.htm
This is some important text.
" style="border:none;"></ifr
ame>
HTML Iframes

Create Design in Div Tag


HTML Symbol
decimal, or hexadecimal
reference.

Entities Example
<p>I will display &euro;</p>
HTML entities were described in
<p>I will display
the previous chapter.
&#8364;</p>
Many mathematical, technical,
<p>I will display
and currency symbols, are not
&#x20AC;</p>
present on a normal keyboard.
To add such symbols to an HTML Will display as:
page, you can use an HTML I will display €
entity name. I will display €
If no entity name exists, you
I will display €
can use an entity number, a
What Is XHTML?
<input type="text"
name="lastname"
 XHTML stands for value="Mouse">
EXtensible HyperText Mar <br><br>
kup Language <input type="submit"
 XHTML is almost identical value="Submit">
to HTML </form>
 XHTML is stricter than Result:-
HTML
 XHTML is HTML defined as
an XML application
 XHTML is supported by all
major browsers

Why XHTML?
Many pages on the internet
contain "bad" HTML. Text Input
This HTML code works fine in <input type="text"> defines
most browsers (even if it does a one-line input field for text
not follow the HTML rules): input:

HTML Forms Example


<form>
An HTML form contains form
First name:<br>
elements.
<input type="text" name="f
Form elements are different
irstname"><br>
types of input elements, like
Last name:<br>
text fields, checkboxes, radio
buttons, submit buttons, and
<input type="text" name="l
more. astname">
Example </form>
<form Result:-
action="action_page.php">
First name:<br>
<input type="text"
name="firstname"
value="Mickey">
<br>
Last name:<br>
Radio Button
astname" value="Mouse"><br><
br>

Input
<input type="submit" value
="Submit">
<input type="radio"> defines </form>
a radio button.
Radio buttons let a user select
ONE of a limited number of
choices:
Example
<form> Grouping Form
<input type="radio" name="
gender" value="male" checked Data with
> Male<br>
<input type="radio" name=" <fieldset>
gender" value="female"> Fema The <fieldset> element is used
le<br> to group related data in a form.
<input type="radio" name=" The <legend> element defines a
gender" value="other"> Other caption for the <fieldset>
</form> element.
Result:- Example
<form action="action_page.ph
p">
<fieldset>

The Submit Button


<legend>Personal
information:</legend>
<input First name:<br>
type="submit"> defines a <input type="text" name=
button for submitting the form "firstname" value="Mickey"><
data to a form-handler. br>
<form action="action_page.ph Last name:<br>
p"> <input type="text" name=
First name:<br> "lastname" value="Mouse"><br
<input type="text" name="f ><br>
irstname" value="Mickey"><br <input type="submit" val
> ue="Submit">
Last name:<br> </fieldset>
<input type="text" name="l </form>
The
<option

<textarea>
The <select> Element
Element The <textarea> element defines
a multi-line input field (a text
The <select> element defines
area):
a drop-down list:
Example Example
<textarea name="message" row
<select name="cars">
s="10" cols="30">
<option value="volvo">Volv
The cat was playing in the
o</option>
garden.
<option value="saab">Saab<
</textarea>
/option>
value="audi">Audi</option>
<option value="fiat">Fiat<
</select>
/option>
<br><br>
<option value="audi">Audi<
<input type="submit">
/option>
</form>
</select>
Result:-
Result:-

selected attribute.
<form
action="action_page.php">
<select name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option value="fiat"
selected>Fiat</option>
The <button> HTML Input
Element
The <button> element defines a Types
Input Type Text
clickable button:
Example <input type="text"> defines
<button type="button" onclic a one-line text input field:
k="alert('Hello
World!')">Click Me!</button> Example
<form>
First name:<br>
HTML5 <datalist> <input type="text" name="f
irstname"><br>
Element Last name:<br>
<input type="text" name="l
The <datalist> element astname">
specifies a list of pre-defined </form>
options for an <input> element. Result:
Users will see a drop-down list
of the pre-defined options as
they input data.
Example
<form action="action_page.ph
p">
<input list="browsers">
<datalist id="browsers">
Input Type
<option value="Internet
Explorer">
Password
<option value="Firefox"> <input
type="password"> defines
<option value="Chrome">
a password field:
<option value="Opera">
<option value="Safari"> Example
</datalist> <form>
</form> User name:<br>
Result:- <input type="text" name="u
sername"><br>
User password:<br>
Input Type Radio
<input type="password" nam
e="psw">
</form> <input type="radio"> defines
Result:- a radio button.
Radio buttons let a user select
ONLY ONE of a limited number
of choices:
Example
Input Type Reset <form>
<input type="reset"> defines <input type="radio" name="
a reset button that will reset all gender" value="male" checked
form values to their default > Male<br>
values: <input type="radio" name="
Example
gender" value="female"> Fema
le<br>
<form action="action_page.ph <input type="radio" name="
p"> gender" value="other"> Other
First name:<br> </form>
<input type="text" name="f Result:-
irstname" value="Mickey"><br
>
Last name:<br>
<input type="text" name="l
astname" value="Mouse"><br><
br>
<input type="submit" value
="Submit">
Input Type
<input type="reset">
</form>
Checkbox
<input
Result:-
type="checkbox"> defines
a checkbox.
Checkboxes let a user select
ZERO or MORE options of a
limited number of choices.
Example
<form>
<input type="checkbox" nam
e="vehicle1" value="Bike"> I
have a bike<br> tep="10" value="30">
<input type="checkbox" nam </form>
e="vehicle2" value="Car"> I Result:-
have a car
</form>

Input Type Date


Result:-

The <input type="date"> is


used for input fields that should
contain a date.
Depending on browser support,
Input Type Number a date picker can show up in the
The <input input field.
type="number"> defines
a numeric input field.
Example
<form>
You can also set restrictions on
what numbers are accepted.
Birthday:
Result:- <input type="date" name="b
day">
Example </form>
<form> Result:-
Quantity (between 1 and
5):
<input type="number" name=
"quantity" min="1" max="5">
Input Type Color
</form> The <input type="color"> is
Result:- used for input fields that should
contain a color.
Depending on browser support,

Input Restrictions
a color picker can show up in
the input field.
Here is a list of some common
input restrictions (some are new
Example
in HTML5): <form>
Select your favorite
Example color:
<form> <input type="color" name="
Quantity: favcolor">
<input type="number" name= </form>
"points" min="0" max="100" s Result:-
Input Type
Input Type Range
The <input type="range"> is Week
used for input fields that should The <input
contain a value within a range. type="week"> allows the
Depending on browser support,
the input field can be displayed
user to select a week and
as a slider control. year.
Depending on browser
Example support, a date picker can
<form> show up in the input field.
<input type="range" name="
points" min="0" max="10"> Example
</form> <form>
Result:-
Select a week:
<input type="week" nam
e="week_year">
Input Type Month </form>
The <input Result:-
type="month"> allows the user
to select a month and year.
Depending on browser support,
a date picker can show up in the
Input Type Time
input field. The <input
type="time"> allows the
Example user to select a time (no
<form>
Birthday (month and year): time zone).
<input type="month" name=" Depending on browser
bdaymonth"> support, a time picker can
</form> show up in the input field.
Result:-
Example
<form>
Select a time:
<input type="time" nam
e="usr_time">
</form>
Example
Result:- <form>
E-mail:
<input type="email" na
Input Type me="email">
</form>
Datetime-local Result:-

The <input
type="datetime- Input Type
local"> specifies a date
and time input field, with no
time zone.
Search
The <input
Depending on browser
type="search"> is used
support, a date picker can
for search fields (a search
show up in the input field.
field behaves like a regular
Example text field).
<form> Example
Birthday (date and
<form>
time):
Search Google:
<input type="datetime-
<input type="search" n
local" name="bdaytime">
ame="googlesearch">
</form>
</form>
Result:-
Result:-

Input Type Input Type Tel


Email
The <input type="tel"> is
used for input fields that
The <input should contain a telephone
type="email"> is used for number.
input fields that should The tel type is currently
contain an e-mail address. supported only in Safari 8.
Example The value
<form>
Telephone:
<input type="tel" name
Attribute
The value attribute
="usrtel">
specifies the initial value for
</form>
an input field:
Result:-
Example
Input Type Url
<form action="">
First name:<br>
The <input <input type="text" name=
type="url"> is used for "firstname" value="John"
input fields that should >
contain a URL address. </form>
Example Result:-

<form>
Add your homepage:
<input type="url" name
="homepage">
</form> The readonly
Attribute
Result:-

HTML Input
The readonly attribute
specifies that the input field
is read only (cannot be

Attributes changed):
Example
<form action="">
First name:<br>
<input type="text" name=
"firstname" value="John"
readonly>
</form>
Example
Result:- <form action="">
First name:<br>
<input type="text" name=
"firstname" value="John"
size="40">
The disabled </form>
Result:-

Attribute
The disabled attribute

The maxlength
specifies that the input field
is disabled
Example Attribute
<form action="">
The maxlength attribute
First name:<br>
specifies the maximum
<input type="text" name=
allowed length for the input
"firstname" value="John"
field:
disabled>
</form> Example
Result:- <form action="">
First name:<br>
<input type="text" name=
"firstname" maxlength="1
0">
The size </form>
Result:-
Attribute
The size attribute specifies
the size (in characters) for
the input field:
The list
one value in the <input>
element.
The multiple attribute works
Attribute with the following input
The list attribute refers to a types: email, and file.
<datalist> element that Example
contains pre-defined options A file upload field that
for an <input> element. accepts multiple values:
Example Select
An <input> element with images: <input type="fil
pre-defined values in a e" name="img" multiple>
<datalist>: Result:-
<input list="browsers">

<datalist id="browsers"> The placeholder


Attribute
<option value="Interne
t Explorer">
<option value="Firefox The hint is displayed
"> in the input field before
<option value="Chrome" the user enters a value.
>
<option value="Opera">
Example
<option value="Safari" An input field with a
placeholder text:
>
<input type="text" name=
</datalist>
"fname" placeholder="Fir
st name">

The multiple
Result:-

Attribute
The multiple attribute
specifies that the user is
The step Attribute
allowed to enter more than
Example: if step="3",
legal numbers could be -
3, 0, 3, 6, etc. Example
An input field with a
specified legal number
intervals:
<input type="number" nam
e="points" step="3">
Result:-

You might also like