Scribd
Upload
23 views

HTML

The document provides an introduction to HTML, detailing its structure, elements, and various tags used for creating web pages. It explains the purpose of different HTML tags such as headings, paragraphs, links, images, and styles, along with examples for each. Additionally, it covers CSS integration for styling HTML elements, including inline, internal, and external styles.

Uploaded by

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

HTML

The document provides an introduction to HTML, detailing its structure, elements, and various tags used for creating web pages. It explains the purpose of different HTML tags such as headings, paragraphs, links, images, and styles, along with examples for each. Additionally, it covers CSS integration for styling HTML elements, including inline, internal, and external styles.

Uploaded by

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

The <body> element

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

Example Explained
 The <!DOCTYPE Open Notepad
html> declaration defines Open Start > Programs
this document to be HTML5 > Accessories > Notepad
 The <html> element is the
root element of an HTML
HTML Headings
page HTML headings are defined with
 The <head> element the <h1> to <h6> tags.
contains meta information <h1> defines the most
about the document important heading. <h6>
defines the least important
 The <title> element
heading:
specifies a title for the
document
Example The title
<h1>This is heading
1</h1> Attribute
<h2>This is heading Here, a title attribute is added
2</h2> to the <p> element. The value
<h3>This is heading of the title attribute will be
3</h3> displayed as a tooltip when you
mouse over the paragraph:

HTML Example
<p title="I'm a tooltip">
Paragraphs This is a paragraph.
HTML paragraphs are defined </p>
with the <p> tag:
The href
Example
<p>This is a Attribute
paragraph.</p> HTML links are defined with
<p>This is another the <a> tag. The link address is
paragraph.</p> specified in the href attribute:

HTML Links Example


<a href="http://
HTML links are defined with
the <a> tag: www.w3schools.com">This
is a link</a>
Example
<a href="http:// Size Attributes
www.w3schools.com">This HTML images are defined with
is a link</a> the <img> tag.
The filename of the source (src),
HTML Images and the size of the image
HTML images are defined with (width and height) are all
the <img> tag. provided as attributes:
The source file (src), alternative
text (alt), width, and height are
Example
<img src="w3schools.jpg"
provided as attributes:
width="104" height="142">
Example
<img src="w3schools.jpg" The alt Attribute
alt="W3Schools.com" width The alt attribute specifies an
="104" height="142"> alternative text to be used,
when an image cannot be
displayed. HTML Line
The value of the attribute can be
read by screen readers. This Breaks
way, someone "listening" to the The HTML <br> element defines
webpage, e.g. a blind person, a line break.
can "hear" the element. Use <br> if you want a line
break (a new line) without
Example starting a new paragraph:
<img src="w3schools.jpg"
alt="W3Schools.com" width Example
="104" height="142"> <p>This is<br>a
paragraph<br>with line
HTML Horizontal breaks.</p>
Rules
The <hr> tag defines a thematic
break in an HTML page, and is
most often displayed as a
horizontal rule. The HTML
The <hr> element is used to
separate content (or define a <pre> Element
change) in an HTML page: The HTML <pre> element
Example defines preformatted text.
<h1>This is heading The text inside a <pre> element
is displayed in a fixed-width font
1</h1>
(usually Courier), and it
<p>This is some text.</p>
preserves both spaces and line
<hr> breaks:
<h2>This is heading
2</h2>
<p>This is some other
text.</p>
<hr>

HTML Styles
<p style="font-
HTML family:courier;">This is
Background a paragraph.</p>

Color HTML Text Size


The font-size property defines
The background-color property the text size for an HTML
defines the background color for element:
an HTML element.
This example sets the Example
background color for a page to <h1 style="font-
powderblue: size:300%;">This is a
Result:- heading</h1>
<p style="font-
size:160%;">This is a
paragraph.</p>
HTML Text
HTML Text Color Alignment
The color property defines the The text-align property defines
text color for an HTML element: the horizontal text alignment for
an HTML element:
Example
<h1 style="color:blue;">T Example
his is a heading</h1> <h1 style="text-
<p style="color:red;">Thi align:center;">Centered
s is a paragraph.</p> Heading</h1>
Result:- <p style="text-
This is a heading align:center;">Centered
paragraph.</p>
This is a paragraph.

HTML Fonts HTML Text


The font-family property defines
the font to be used for an HTML Formatting
element:
Example
<h1 style="font-
family:verdana;">This is
a heading</h1>
HTML <b> and HTML <small>
<strong> Element
The HTML <small> element
Elements defines smaller text:
The HTML <b> element
defines bold text, without any
Example
extra importance. <h2>HTML <small>Small</
small> Formatting</h2>
Example
<b>This text is bold</b>
The HTML <strong> element HTML <mark>
defines strong text, with added
semantic "strong" importance. Element
The HTML <mark> element
Example defines marked or highlighted te
<strong>This text is xt:
strong</strong>
Example
<h2>HTML <mark>Marked</
HTML <i> and mark> Formatting</h2>
<em> Elements HTML <del>
The HTML <i> element
defines italic text, without any Element
extra importance. The HTML <del> element
Example defines deleted (removed) text.
<i>This text is Example
italic</i> <p>My favorite color
The HTML <em> element is <del>blue</del> red.</
defines emphasized text, with p>
added semantic importance.
Example HTML <ins>
<em>This text is
emphasized</em>
Element
The HTML <ins> element
defines inserted (added) text.
Example HTML <q> for
<p>My
favorite <ins>color</ins> Short
is red.</p>
HTML <sub> Quotations
he HTML <q> element defines a
Element short quotation.
Browsers usually insert
The HTML <sub> element quotation marks around the
defines subscripted text. <q> element.
Example Example
<p>This <p>WWF's goal is
is <sub>subscripted</sub> to: <q>Build a future
text.</p> where people live in
HTML <sup> harmony with
nature.</q></p>
Element Result:-
WWF's goal is to: “Build a future where
The HTML <sup> element people live in harmony with nature.”
defines superscripted text.
Example HTML <abbr>
<p>This
is <sup>superscripted</su
for
p> text.</p> Abbreviations
HTML Quotation The HTML <abbr> element
defines an abbreviation or an
and Citation acronym.
<body> Marking abbreviations can give
<p>Here is a quote from useful information to browsers,
WWF's website:</p> translation systems and search-
<blockquote> engines.
For 50 years, WWF has Example
been protecting the <p>The <abbr title="World
future of nature. Health
</blockquote> Organization">WHO</abbr>
</body> was founded in 1948.</p>
Result:- Result:-
Here is a quote from WWF's website:
For 50 years, WWF has been p
HTML Example
<p><cite>The
<address> for Scream</cite> by Edvard
Munch. Painted in
Contact 1893.</p>
Result:-
Information The Scream by Edvard Munch. Painted
The HTML <address> element in 1893.
defines contact information
(author/owner) of a document or HTML <bdo>
an article.
The <address> element is for Bi-
usually displayed in italic. Most
browsers will add a line break Directional
before and after the element.
Example Override
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>
USA Example
</address> <bdo dir="rtl">This text
Result:- will be written from
Written by John Doe. right to left</bdo>
Visit us at: Result:-
Example.com This line will be written from right to
Box 564, Disneyland left
USA

HTML <cite> for


HTML Compu
Work Title ter Code
The HTML <cite> element
defines the title of a work. Elements
Browsers usually display <cite>
elements in italic.
Computer Code
<code>
var x = 5;
var y = 6;
document.getElementById("
demo").innerHTML = x + y; Inline CSS
</code> An inline CSS is used to apply a
Result:- unique style to a single HTML
var x = 5; element.
var y = 6; An inline CSS uses the style
document.getElementById("d attribute of an HTML element.
emo").innerHTML = x + y; This example sets the text color
of the <h1> element to blue:
HTML <kbd> Example
For Keyboard <h1 style="color:blue;">T
his is a Blue
Input 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 Comm <!DOCTYPE html>

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

HTML Styles - </style>


</head>
<body>
CSS <h1>This is a
CSS can be added to HTML
elements in 3 ways: heading</h1>
<p>This is a
paragraph.</p>
</body>
</html>
Result:- CSS Fonts
Example
<!DOCTYPE html>
<html>
<head>
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
an entire web site, by
p {
changing one file! color: red;
To use an external style sheet, font-family: courier;
add a link to it in the <head> font-size: 160%;
section of the HTML page: }
</style>
Example </head>
<!DOCTYPE html> <body>
<html>
<head> <h1>This is a
<link rel="stylesheet" heading</h1>
href="styles.css"> <p>This is a
</head> paragraph.</p>
<body>
</body>
<h1>This is a </html>
heading</h1> Result:-
<p>This is a
paragraph.</p> This is a heading
This is a paragraph.
</body>
</html>
CSS Border
The CSS border property defines
a border around an HTML
element:
Example The id Attribute
p { To define a specific style for one
border: 1px solid special element, add an id
powderblue; attribute to the element:
}
<p>This is a
Example
paragraph.</p> #p01 {
This is a paragraph. color: blue;
}
CSS Padding <p id="p01">I am different.</p>
The CSS padding property
defines padding (space) he class
between the text and the
border: Attribute
To define a style for a special
Example type of elements, add a class
p { attribute to the element:
border: 1px solid <p class="error">I am
powderblue; different</p>
padding: 30px; then define a style for the
} elements with the specific class:
Result:-
Example
p.error {
This is a paragraph. color: red;
}

CSS Margin HTML Links


The CSS margin property Example
defines a margin (space) outside
<html>
the border:
<body>
Example <p><a
p { href="http://www.w3schools.com/ht
border: 1px solid ml/">Visit our HTML tutorial</a></p>
powderblue; </body>
margin: 50px; </html>
} Result:-
Visit our HTML tutorial
decoration:underline}
</style>

HTML Link HTML Links -


Colors Image as Link
By default, a link will appear like <a href="#">
this (in all browsers): <img src="smiley.gif" a
 An unvisited link is lt="HTML
underlined and blue tutorial" style="width:42
 A visited link is underlined px;height:42px;border:0;"
and purple >
 An active link is underlined </a>
and red
You can change the default
colors, by using styles:
HTML Tables
Example Defining an
<style>
a:link {color:green HTML Table
An HTML table is defined with
; background- the <table> tag.
color:transparent; tex Each table row is defined with
t-decoration:none} the <tr> tag. A table header is
a:visited {color:pink; defined with the <th> tag. By
default, table headings are bold
background- and centered. A table data/cell is
color:transparent; tex defined with the <td> tag.
t-decoration:none}
a:hover {color:red;
Example
<table style="width:100%"
background- >
color:transparent; tex <tr>
t- <th>Firstname</th>
decoration:underline} <th>Lastname</th>
a:active {color:yello <th>Age</th>
w; background- </tr>
<tr>
color:transparent; tex <td>Jill</td>
t- <td>Smith</td>
<td>50</td>
</tr> HTML Table -
<tr>
<td>Eve</td>
Collapsed
<td>Jackson</td>
<td>94</td>
Borders
If you want the borders to
</tr>
collapse into one border, add
</table> the CSS border-
collapse property:
Firstname Lastname Age
Jill Smith 50 Example
Eve Jackson 94 table, th, td {
John Doe 80 border: 1px solid
black;
border-
HTML Table - collapse: collapse;
}
Adding a Border Result:-
If you do not specify a border for Firstname Lastname Age
the table, it will be displayed Jill Smith 50
without borders.
A border is set using the
CSS border property:
HTML Table -
Example Adding Cell
table, th, td {
border: 1px solid
Padding
Cell padding specifies the space
black;
between the cell content and its
}
borders.
If you do not specify a padding,
Firstname Lastname Agethe table cells will be displayed
Jill Smith 50 without padding.
Eve Jackson 94 To set the padding, use the
John Doe 80 CSS padding property:
Example
th, td {
padding: 15px;
}
Result:-
<td>55577854</td>
Firstnam <td>55577855</td>
Lastname Age
e </tr>
</table>
Cell that spans two columns:
Jill Smith 50
Name Telephone
HTML Table - Bill Gates 55577854 55577

Left-align HTML Table -


Headings Cells that Span
By default, table headings are
bold and centered.
To left-align the table headings,
Many Rows
To make a cell span more than
use the CSS text-align property:
one row, use
Example the rowspan attribute:
th { Example
text-align: left; <table style="width:100%"
} >
HTML Table - <tr>
<th>Name:</th>
Cells that Span <td>Bill Gates</td>
</tr>
Many Columns <tr>
To make a cell span more than <th rowspan="2">Telep
one column, use hone:</th>
the colspan attribute: <td>55577854</td>
Example </tr>
<tr>
<table style="width:100%"
<td>55577855</td>
>
</tr>
<tr>
</table>
<th>Name</th>
Cell that spans two rows:
<th colspan="2">Telep
hone</th> Name: Bill Gates
</tr> 55577854
<tr> Telephone:
<td>Bill Gates</td> 55577855
<li>Milk</li>
HTML Lists </ul>
Result:-
Unordered o Coffee
o Tea
HTML List o Milk
An unordered list starts with
the <ul> tag. Each list item
Example - Square
starts with the <li> tag. <ul style="list-style-
The list items will be marked type:square">
with bullets (small black circles) <li>Coffee</li>
by default: <li>Tea</li>
<li>Milk</li>
Example </ul>
<ul> Result:-
<li>Coffee</li>  Coffee
<li>Tea</li>  Tea
<li>Milk</li>  Milk
</ul>
Result
Example - None
 Coffee
<ul style="list-style-
 Tea
type:none">
 Milk <li>Coffee</li>
<li>Tea</li>
Example - Disc <li>Milk</li>
<ul style="list-style- </ul>
type:disc"> Coffee
<li>Coffee</li> Tea
<li>Tea</li> Milk
<li>Milk</li>
</ul> Ordered HTML
Result:-
 Coffee
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
<ol>
<li>Tea</li>
<li>Coffee</li>
<li>Tea</li> Uppercase Roman
<li>Milk</li>
</ol> Numbers:
Result:- <ol type="I">
1. Coffee <li>Coffee</li>
2. Tea <li>Tea</li>
3. Milk <li>Milk</li>
Numbers: </ol>
<ol type="1"> Result:-
<li>Coffee</li> I. Coffee
<li>Tea</li> II. Tea
III. Milk
<li>Milk</li>
</ol> Lowercase Roman
1. Coffee
2. Tea
Numbers:
3. Milk <ol type="i">
<li>Coffee</li>
Uppercase Letters: <li>Tea</li>
<ol type="A"> <li>Milk</li>
<li>Coffee</li> </ol>
<li>Tea</li> Result:-
<li>Milk</li> i. Coffee
</ol> ii. Tea
Result:- iii. Milk
A. Coffee
B. Tea HTML
C. Milk
Lowercase Letters:
Description Lists
HTML also supports description
<ol type="a"> lists.
<li>Coffee</li> A description list is a list of
<li>Tea</li> terms, with a description of each
<li>Milk</li> term.
</ol> The <dl> tag defines the
Result:- description list, the <dt> tag
a. Coffee defines the term (name), and
b. Tea the <dd> tag describes each
c. Milk term:
Example Horizontal Lists
<dl> HTML lists can be styled in many
<dt>Coffee</dt> different ways with CSS.
<dd>- black hot One popular way is to style a list
drink</dd> horizontally, to create a menu:
<dt>Milk</dt>
<dd>- white cold
Example
drink</dd> <!DOCTYPE html>
</dl> <html>
Result:- <head>
Coffee <style>
- black hot drink ul {
Milk list-style-
- white cold drink type: none;
margin: 0;
Nested HTML padding: 0;
overflow: hidden;
Lists background-
List can be nested (lists inside color: #333333;
lists): }
Example
<ul> li {
<li>Coffee</li> float: left;
<li>Tea }
<ul>
<li>Black tea</li> li a {
<li>Green tea</li> display: block;
</ul> color: white;
</li> text-align: center;
<li>Milk</li> padding: 16px;
</ul> text-
Result:- decoration: none;
 Coffee }
 Tea
o Black tea li a:hover {
o Green tea background-
 Milk color: #111111;
}
</style>
</head>
<body> Using The class
<ul>
Attribute
<li><a href="#home">Hom The HTML class attribute makes
it possible to define equal styles
e</a></li>
for elements with the same class
<li><a href="#news">New
name.
s</a></li> Here we have three <div>
<li><a href="#contact"> elements that points to the
Contact</a></li> same class name:
<li><a href="#about">Ab
out</a></li> Example
</ul> <!DOCTYPE html>
<html>
</body> <head>
</html> <style>
Result:- div.cities {
background-
color: black;
color: white;
The <span> margin: 20px 0 20px
0;
Element padding: 20px;
When used together with CSS, }
the <span> element can be </style>
used to style parts of the text: </head>
Example <body>
<h1>My <span style="color:red">I
mportant</span> Heading</h1>
<div class="cities">
Result:-
<h2>London</h2>
My Important Heading <p>London is the capital

HTML The of England. It is the


most populous city in the
United Kingdom, with a
class metropolitan area of over
13 million
Attribute inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital HTML Iframe
and most populous city of
France.</p>
</div>
s
</body>
</html> Iframe Syntax
Using The class An HTML iframe is defined with
the <iframe> tag:
Attribute on <iframe src="URL"></
iframe>
Inline Elements Iframe - Set
<!DOCTYPE html>
<html> Height and
<head>
<style> Width
span.note {
font-size: 120%; Example
color: red; <iframe src="demo_iframe.
} htm" height="200" width="
</style> 300"></iframe>
</head> Result:-
<body>

<h1>My <span class="note"


>Important</span> Heading
</h1>
<p>This is
some <span class="note">i
mportant</span> text.</p> Iframe -
</body> Remove the
</html>
Result:- Border
My Important Heading Example
This is some important text. <iframe src="demo_iframe.
htm" style="border:none;"
></iframe>
Create Design in Div Tag
HTML Symbol Example
<p>I will display
Entities &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 can I will display €
use an entity number, a decimal,
or hexadecimal reference.
<input type="text"
What Is XHTML? 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
HTML Result:-
 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.
This HTML code works fine in Text Input
most browsers (even if it does <input type="text"> defines a
not follow the HTML rules): one-line input field for text

HTML Forms
input:
Example
An HTML form contains form <form>
elements. First name:<br>
Form elements are different
<input type="text" name
types of input elements, like text
fields, checkboxes, radio ="firstname"><br>
buttons, submit buttons, and Last name:<br>
more. <input type="text" name
Example ="lastname">
<form </form>
action="action_page.php"> Result:-
First name:<br>
<input type="text"
name="firstname"
value="Mickey">
<br>
Last name:<br>
Last name:<br>
Radio Button <input type="text" name
Input ="lastname" value="Mouse"
><br><br>
<input type="radio"> defines <input type="submit" va
a radio button.
lue="Submit">
Radio buttons let a user select
</form>
ONE of a limited number of
choices:
Example
<form>
<input type="radio" nam
e="gender" value="male" c
hecked> Male<br>
Grouping Form
<input type="radio" nam Data with
e="gender" value="female"
> Female<br> <fieldset>
<input type="radio" nam The <fieldset> element is used
e="gender" value="other"> to group related data in a form.
Other The <legend> element defines
</form> a caption for the <fieldset>
Result:- element.
Example
<form action="action_page
.php">
<fieldset>
The Submit <legend>Personal
information:</legend>
Button First name:<br>
<input <input type="text" na
type="submit"> defines a me="firstname" value="Mic
button for submitting the form key"><br>
data to a form-handler. Last name:<br>
<form action="action_page <input type="text" na
.php"> me="lastname" value="Mous
First name:<br> e"><br><br>
<input type="text" name <input type="submit"
="firstname" value="Micke value="Submit">
y"><br>
</fieldset>
</form> The
<option

<textarea>
Element
The <select> The <textarea> element defines
a multi-line input field (a text

Element area):
Example
The <select> element defines
a drop-down list: <textarea name="message"
rows="10" cols="30">
Example The cat was playing in
<select name="cars"> the garden.
<option value="volvo">V </textarea>
olvo</option> value="audi">Audi</
<option value="saab">Sa option>
ab</option> </select>
<option value="fiat">Fi <br><br>
at</option> <input type="submit">
<option value="audi">Au </form>
di</option> Result:-
</select>
Result:-

selected attribute.
<form
action="action_page.php">
<select name="cars">
<option
value="volvo">Volvo</opti
on>
<option
value="saab">Saab</option
>
<option value="fiat"
selected>Fiat</option>
">
The <button> </datalist>
Element </form>
Result:-
The <button> element defines a
clickable button:
Example
<button type="button" onc HTML Input
lick="alert('Hello
World!')">Click Types
Me!</button>
Input Type Text
<input type="text"> defines
HTML5 a one-line text input field:
Example
<datalist> <form>
Element First name:<br>
<input type="text" name
The <datalist> element ="firstname"><br>
specifies a list of pre-defined Last name:<br>
options for an <input> element. <input type="text" name
Users will see a drop-down list of
="lastname">
the pre-defined options as they
input data.
</form>
Result:
Example
<form action="action_page
.php">
<input list="browsers">
<datalist id="browsers"
>
<option value="Intern
et Explorer"> Input Type
<option value="Firefox">
Password
<input
<option value="Chrome
type="password"> defines
"> a password field:

<option value="Opera">
<option value="Safari
Example
<form>
User name:<br>
<input type="text" name
="username"><br>
User password:<br>
<input type="password" Input Type
name="psw">
</form> Radio
Result:- <input type="radio"> defines
a radio button.
Radio buttons let a user select
ONLY ONE of a limited number
of choices:

Input Type Example


<form>
Reset <input type="radio" nam
<input type="reset"> defines e="gender" value="male" c
a reset button that will reset all hecked> Male<br>
form values to their default <input type="radio" nam
values: e="gender" value="female"
Example > Female<br>
<form action="action_page <input type="radio" nam
.php"> e="gender" value="other">
First name:<br> Other
<input type="text" name </form>
="firstname" value="Micke Result:-
y"><br>
Last name:<br>
<input type="text" name
="lastname" value="Mouse"
><br><br>
<input type="submit" va
lue="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 Input
limited number of choices.
Example
Restrictions
Here is a list of some common
<form> input restrictions (some are new
<input type="checkbox" in HTML5):
name="vehicle1" value="Bi
ke"> I have a bike<br> Example
<input type="checkbox" <form>
name="vehicle2" value="Ca Quantity:
r"> I have a car <input type="number" na
</form> me="points" min="0" max="
Result:- 100" step="10" value="30"
>
</form>
Result:-

Input Type Input Type Date


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

Input Type Input Type


Range Week
The <input type="range"> is The <input
used for input fields that should type="week"> allows the
contain a value within a range.
user to select a week and
Depending on browser support,
the input field can be displayed year.
as a slider control. Depending on browser
support, a date picker can
Example show up in the input field.
<form>
<input type="range" nam Example
e="points" min="0" max="1 <form>
0"> Select a week:
</form>
Result:-
<input type="week" n
ame="week_year">
</form>
Result:-
Input Type
Month
The <input
type="month"> allows the user
to select a month and year.
Input Type Example
<form>
Time Birthday (date and
The <input time):
type="time"> allows the <input type="datetim
user to select a time (no e-local" name="bdaytim
time zone). e">
Depending on browser </form>
support, a time picker can Result:-
show up in the input field.
Example
<form> Input Type
Select a time:
<input type="time" n Email
ame="usr_time"> The <input
</form> type="email"> is used for
Result:- input fields that should
contain an e-mail address.
Example
Input Type <form>
Datetime- E-mail:
<input type="email"
local name="email">
</form>
The <input Result:-
type="datetime-local"> s
pecifies a date and time
input field, with no time
zone.
Input Type
Depending on browser
support, a date picker can
Search
The <input
show up in the input field.
type="search"> is used
for search fields (a search
field behaves like a regular
text field).
Example
<form>
Example Add your homepage:
<form> <input type="url" na
Search Google: me="homepage">
<input type="search" </form>
name="googlesearch"> Result:-
</form>

HTML Input
Result:-

Input Type Tel Attributes


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

The <input type="url"> is


used for input fields that
should contain a URL
address.
The readonly
Attribute
The readonly attribute
specifies that the input field The size
is read only (cannot be
changed):
Attribute
The size attribute specifies
Example the size (in characters) for
<form action=""> the input field:
First name:<br>
<input type="text" nam
Example
<form action="">
e="firstname" value="J
First name:<br>
ohn" readonly>
<input type="text" nam
</form>
Result:- e="firstname" value="J
ohn" size="40">
</form>
Result:-

The disabled
Attribute The
The disabled attribute
specifies that the input field maxlength
is disabled
Example Attribute
The maxlength attribute
<form action="">
specifies the maximum
First name:<br> allowed length for the input
<input type="text" nam field:
e="firstname" value="J
ohn" disabled> Example
</form> <form action="">
Result:- First name:<br>
<input type="text" nam i">
e="firstname" maxlengt </datalist>
h="10">
</form>
Result:- The multiple
Attribute
The multiple attribute
specifies that the user is
The list allowed to enter more than
one value in the <input>
Attribute element.
The list attribute refers to a The multiple attribute works
<datalist> element that with the following input
contains pre-defined options types: email, and file.
for an <input> element. Example
Example A file upload field that
An <input> element with accepts multiple values:
pre-defined values in a Select
<datalist>: images: <input type="f
<input list="browsers" ile" name="img" multip
> le>
Result:-
<datalist id="browsers
">
<option value="Inter
net Explorer">
<option value="Firef
ox">
<option value="Chrom
e">
<option value="Opera
">
<option value="Safar
The
placeholder
Attribute
The hint is displayed
in the input field before
the user enters a value.
Example
An input field with a
placeholder text:
<input type="text" nam
e="fname" placeholder=
"First name">
Result:-

The step
Attribute
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" n
ame="points" step="3">
Result:-

You might also like