Scribd
Upload
33 views

Web Programming-Module 2

HTML was invented in 1990 by Tim Berners-Lee and is a language used to present information on the Internet. HTML documents are simply text documents with specific formatting defined by tags. Common tags include <html> to define an HTML document, <head> for metadata, <title> for the document title, <body> for the document content, and other tags for text formatting.

Uploaded by

chi nju
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views

Web Programming-Module 2

HTML was invented in 1990 by Tim Berners-Lee and is a language used to present information on the Internet. HTML documents are simply text documents with specific formatting defined by tags. Common tags include <html> to define an HTML document, <head> for metadata, <title> for the document title, <body> for the document content, and other tags for text formatting.

Uploaded by

chi nju
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 124

HTML: HyperText Markup Language

HTML was invented in 1990 by a scientist called Tim Berners-Lee.

HTML is a language, which makes it possible to present information on the Internet.

What you see when you view a page on the Internet is your browser's
interpretation of HTML

HTML documents are simply text documents with a specific form


what does H-T-M-L stand for?

HTML is an abbreviation of "HyperText Mark-up Language"

Hyper :is the opposite of linear. you can go wherever you want and whenever
you want. For example, it is not necessary to visit MSN.com before you visit
HTML.net.

Text : is self-explanatory.

Mark-up : is what you do with the text. You are marking up the text the same
way you do in a text editing program with headings, bullets and bold text and so
on.
Language: is what HTML is. It uses many English words.
HTML Documents comprised of content and markup tags

Content : actual information being conveyed

The markup tags : tell the Web browser how to display the page

An HTML file must have an htm or html file extension

An HTML file can be created using a simple text editor


WHERE WE WRITE CODE :
1.Text Editor
1.Wordpad (In Windows OS)
2.Gedit Text Editor (Ubundu in LINUX)
2.FrontPage or Dreamweaver

WHERE WE EXECUTE :
1.Double Click that HTML File. (or)
2.Right click – Open With Web browser
HTML Tags
A <TAG> tells the browser to do something.

An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it.

A tag can have several attributes.

Tags can also have default attributes.

The default value is a value that the browser assumes if you have not
told it .

A good example is the font size. The default font size is 3.


There are two kinds of tags - opening tags and closing tags

HTML Tag

The basic HTML page begins with the tag <html>

and ends with </html>.

In between, the file has two sections -

the header and the body.


TITLE Tag

The <title> tag defines the title of the document.

The <title> element:

defines a title in the browser toolbar

provides a title for the page when it is added to favorites

displays a title for the page in search-engine results


<HEAD>

<TITLE> MY WEB PAGE </TITLE>

</HEAD>

Here the document has been given the title MY WEB PAGE .
Body Tag

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such
as text, hyperlinks, images, tables, lists, etc.

<HTML>
<HEAD>
<TITLE> MY WEB PAGE</TITLE>
</HEAD>
<BODY>
This is my first web page.
</BODY>
</HTML>
The BODY tag has following attributes:

BGCOLOR: It can be used for changing the background colour of the


page.By default the background colour is white.

BACKGROUND: It is used for specifying the image to be displayed in the


background of the page.

LINK: It indicates the colour of the hyperlinks, which have not been
visited or clicked on.

ALINK: It indicates the colour of the active hyperlink. An active link is the
one on which the mouse button is pressed.
VLINK: It indicates the colour of the hyperlinks after the mouse is clicked on it.

TEXT: It is used for specifying the colour of the text displayed on the page.
<HTML>
<TITLE> MY WEBSITE </TITLE>

<BODY BGCOLOR="#123456" TEXT = “#FF0000”>

Welcome to my Website

</BODY>
</HTML>

You also have the option of specifying the colour by giving its name, like:

<BODY TEXT = “WHITE”>.


A Web Page with an Image in the Background

<HTML>

<BODY BACKGROUND="india.jpeg">

Welcome to INDIA

</BODY>

</HTML>
FORMATTING OF TEXT

Text formatting ie, presenting the text on an HTML page in a desired manner, is
an important part of creating a web page

Headers

Headers are used to specify the headings of sections or sub-sections in a


document. Depending on the desired size of the text, any of six available
levels (<H1> to <H6>) of headers can be used.
<HTML>
<HEAD>
<TITLE> MY WEBSITE </TITLE>
</HEAD>
<BODY>
<H1> Header Level 1</H1>
<H2> Header Level 2</H2>
<H3> Header Level 3</H3>
<H4> Header Level 4</H4>
<H5> Header Level 5</H5>
<H6> Header Level 6</H6>

</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> MY WEBSITE </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Header Level 1</H1>
<H2> Header Level 2</H2>
<H3> Header Level 3</H3>
<H4> Header Level 4</H4>
<H5> Header Level 5</H5>
<H6> Header Level 6</H6>
</CENTER>
</BODY>
</HTML>
The text written between <CENTER> and </CENTER> tag gets aligned in
the center of the HTML page.

The maximum size of the text is displayed using the <H1> tag.

So the size goes in decreasing order with the increasing order of the level
(From <H1> to <H6>).
Formatting Tags

BOLD: The text can be displayed in boldface by writing it in between the <B> and
</B> tags.

ITALICS: It starts with <I> and ends with </I> tag. It is used to display the text in
italics.

UNDERLINE: It is used for underlining the text to be displayed. The <U> tag is
used for this purpose. These tags can be nested. So in order to see the text in
boldface, in italics and underlined, it should be placed between the <B><I><U>
and </U></I></B> tags. Note that the closing tags are written in reverse order,
because any tag used within some other tag should be closed first.
PARAGRAPH: If you want to display the text in the form of paragraphs, then
the <P> tag should be used.

TT: The <TT> tag is used for displaying text in a fixed width font similar to that
of a typewriter.

STRIKE: If you want the text to be marked with a strikethrough character, place
it within the <S> and </S> tags.
STRONG: There are certain text-based browsers that do not render the text as
boldfaced. So you can use the <STRONG> tag instead of the <B> tag. This
displays the text to stand out in the most appropriate manner for the browser.

EM: Just as the <STRONG> tag corresponds to the <B> tag, the <EM> can be
used instead of the <I> tag. The reason for using it is the same as for the
<STRONG> tag. The <EM> tag is used for emphasizing the text in the manner
most appropriate to the browser.

BR: This tag is used for inserting a line break. The text written after the <BR> tag
is displayed from the beginning of the next line onwards. This tag does not need
a corresponding terminating tag.
HR: This tag puts a horizontal line on the page.
It has the following attributes:

• ALIGN: It is used for aligning the line on the page. The possible values of this
attribute are LEFT, RIGHT, and CENTER. It is useful when the width of the line is less
than the width of the page.

• NOSHADE: This attribute is used to prevent any shading effect.

• SIZE: It is used for specifying the thickness of the line.

• WIDTH: You can set the width of a line using this attribute. The value can be
specified either in pixels or as a percentage of the width of the page, e.g., <HR
WIDTH = “30%”>.
BLOCKQUOTE: This tag indents the left margin of the text. It is used for displaying
the text as quoted text

ADDRESS: This tag displays the text in italics.

CITE: The text placed in between the <CITE> and </CITE> tags is rendered in
italics by the browser.
Formatting Tags

<HTML>
<HEAD>
<TITLE> KTU</TITLE>
</HEAD>
<BODY>
<B> KTU </B>
provides several <I> programmes </I>
in the <B><I> Computer </I></B> stream.
<P>
One of the <I> programmes </I> is <B><U> MCA</U></B>
</P>
<B>MCA </B> stands for <TT> Master Of Computer Applications </TT>
<BR>
<S>For MCA</S> <B> KTU </B>
is considered to be one of the best universities.
<BR>
<STRONG>KTU</STRONG> believes in
<STRONG>
<EM>
Quality
</EM>
</STRONG> education
<BR>
<P>
According to <CITE> KTU, </CITE> <B> MCA</B> is one of its best
programmes offering advanced syllabus to the student so that they can
update their knowledge with current affairs.
</P>
<BLOCKQUOTE>
For convenience all the courses offered by KTU can be seen on its website. A
student has also been provided the flexibility of seeing all the information
regarding admission to the next semester, examination result etc. on its website.
</BLOCKQUOTE>
<HR NOSHADE>
<B> KTU contact details are :</B>
<ADDRESS>
KTU, <BR>
KARYAVATTAM, <BR>
TRIVANDRUM – 110 068 <BR>
Website : www.ktu.ac.in
</ADDRESS>
</BODY>
</HTML>
PRE Tag

This tag is used to present the text exactly as written in the code, including
whitespace characters.

Presenting Preformatted Text

The format of the text presented in the browser remains the same as written in the
code.

If we do not use the <PRE> tag, the browser condenses the white space when
presenting the text on the web page.

It is terminated by a </PRE> tag.


<HTML>
<HEAD>
<TITLE>IGNOU</TITLE>
</HEAD>
<BODY>
<PRE>
APJ Abdul Kalam Technological University has come into existence on May 21, 2014 with an aim
to give leadership to the technology related policy formulation and Engineering Planning for the
State. The main thrust areas of the University are Research,Development and Innovation
Objectives
*To give leadership to the technology related policy formulation and Engineering Planning for the
State
*It also emphasizes to improve the academic standards of the graduate, post graduate and research
programmes in engineering science, technology and management.
*To regulate the academic standards of all Colleges affiliated to the University.

</PRE>
</BODY>
</HTML>
FONT Tag

HTML provides the flexibility of changing the characteristics of the font such as
size, colour etc.

Every browser has a default font setting that governs the default font name,
size and colour.

Unless you have changed it, the default is Times New Roman 12pt with the
colour being black.
<HTML>
<HEAD>
<TITLE> KTU </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
Welcome to <FONT SIZE=6>INDIA </FONT><BR>
Welcome to <FONT FACE = “ARIAL” SIZE=6>INDIA
</FONT><BR>
Welcome to <FONT FACE = “ARIAL” SIZE=6 COLOUR =
“BLUE”>INDIA </FONT><BR>
</CENTER>
</BODY>
</HTML>
The syntax of the <FONT> tag with its different attributes.

<FONT FACE = “name” SIZE = n colour = #RGB >

The attributes are:

FACE: This attribute is used to change the font style.

Its value should be given as the name of the desired font.

But the font name specified must be present in the system, otherwise the default-
name is used by the browser.

The font will only display if the user has that font installed on the computer.
SIZE: Font can be displayed in any of the 7 sizes:

Tiny
Small
Regular
Extra Medium
Large
Real Big
Largest
COLOUR: With this attribute you can change the desired font colour. The values
can be specified either by using the hexadecimal format as already described, i.e.,
#RGB, or by the name of the colour.
Special Characters

There are certain characters that have special meaning in HTML code.

For example, the “< ” and “ > ” characters delimit tags.

To display the “< ” character, it can be specified as “&lt”. The “&” interprets the “lt”
as the “< ” symbol and displays it.
<HTML>
<BODY BGCOLOUR=″#FFFFFF”>

This is &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Used for&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
blank space.
<BR>
&lt; is the Less Than symbol <BR>
&gt; is the Greater Than symbol <BR>
&amp; is the ampersand symbol <BR>
&quot; is the quotation mark symbol <BR>

</BODY>
<HTML>
How to display multiple blank lines.

<HTML>
<HEAD>
<TITLE>IGNOU</TITLE>
</HEAD>
<BODY BGCOLOUR="#FFFFFF">
Welcome to <BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
INDIA
</BODY>
</HTML>
Check Your Progress 1

Describe yourself on a web page and experiment with colours in BGCOLOUR, TEXT,
LINK, VLINK, and ALINK. Try out different fonts and sizes and also the other tags you
have studied so far, such as the <PRE> tag, as well.

Check Your Progress 2

Add the following information to the web page that you created above.
“Job: Software Engineer
The requirement for the job is that the person should be B.E./M.E/M.C.A. having an
aggregate score of 70% or above. The job is project based, so it would be for ½ year
only initially. ¼ of the salary would be deducted towards income tax, PF and other
statutory deductions.”
WORKING WITH IMAGES

Let us take a look at the syntax of the <IMG> tag:

<IMG SRC = “FILENAME.GIF” WIDTH = “value” HEIGHT = “value” ALT =“alternate


text” BORDER = “value” ALIGN = “value”>
SRC: This attribute specifies the pathname to the source file that contains the image.
the browser will look for the image in the same folder (or directory) as the html
document itself.

WIDTH: This is used for specifying the desired width of the image.

HEIGHT: This is used for specifying the desired height of the image.

BORDER: An important attribute of the IMG tag is BORDER. This attribute specifies
the width of the border of the image. By default it is 0, i.e. there is no border
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="image.gif" WIDTH=130 HEIGHT=101 BORDER=10>
</BODY>

e. ALT: Another IMG attribute that is important is ALT. ALT is sort of a substitute for
the image that is displayed or used when the user is using a browser that does
not display images.
LINKS

A link moves us from the current page to a destination that is specified in the
HTML page.

Anchor Tag

The Anchor tag is used to create links between different objects like HTML
pages,
files, web sites etc. It is introduced by the characters <A> and terminated by
</A>.
HREF is the most common attribute of the ANCHOR tag. It defines the destination
of the link.

<HTML>
<HEAD>
<TITLE>KTU</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.ktu.edu.in/"> KTU</A>
</BODY>
</HTML>
<BODY BGCOLOR="#FFFFFF">
Send me <A HREF= "mailto:ktu@gmail.com">mail</A>
</BODY>
It is also possible to make an image a link if desired. This is done using the <IMG>
tag. Consider the following example.

<HTML>
<HEAD>
<TITLE>KTU</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://ktu.edu.in/"><IMG
SRC="image.gif" WIDTH=130
HEIGHT=101></A>
</BODY>
</HTML
LISTS

Lists are used when the data are to be mentioned in the form of points

Lists break up the monotony of a long paragraph and direct the reader’s attention
to the essential parts.

Lists are segregated into three types, namely Ordered lists, Unordered lists and
Definition lists.
Unordered Lists

These lists are also called bulleted lists. These lists are characterized by list
items that do not have numbers.

They are used when the points in the list have no particular order.

They are delimited by the <UL> and </UL> tags.

Each point in the list is delimited by the <LI> and </LI> tags.
The syntax of the <UL> tag is:

<UL TYPE=""> where TYPE= "DISC", "SQUARE" or "CIRCLE".

<LI> </LI>

</UL>
<HTML>
<HEAD>
<TITLE>MY WEBSITE</TITLE>
</HEAD>
<BODY BGCOLOR="#FF0000">
What I wat for my birthday:
<UL Type=“circle”>
<LI>a big red truck</LI>
<LI>an aeroplane that flies</LI>
<LI> a nice soft toy</LI>
<LI>a drum set</LI>
<LI>a Walkman</LI>
<LI> extra pocket money</LI>
</UL>
</BODY>
</HTML>
Ordered Lists

Lists having numbered items are known as ordered lists.

They are used when the items in the list have a natural order.

To make an ordered list, simply change the <UL> tag to <OL>.


<HTML>
<HEAD>
<TITLE>IGNOU</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
What I want for my birthday
<OL type=”A”>
<LI>a big red truck</LI>
<LI>a toy train</LI>
<LI>a Barbie doll</LI>
<LI>a drum set</LI>
<LI>binoculars</LI>
<LI>a month’s extra pocket money</LI>
</OL>
</BODY>
</HTML>
The syntax of the <OL> tag is:

<OL TYPE=" "> where TYPE= "1", "a", "A", "i", "I"

<LI> </LI>

</OL>
Definition Lists

Definition lists have a heading and the text appears below that.

A definition list is introduced by the <DL> tag and terminated by </DL>.

The Definition heading should be specified between the <DT> and </DT> tags.

The Definition should be specified between <DD> and </DD> tags.


<HTML>
<HEAD>
<TITLE>MY WEBSITE</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>HTML </DT>
<DD>
Hypertext Markup Language, a standardized system for
tagging text files to achieve font, colour, graphic, and
hyperlink effects on World Wide Web pages.
</DD>
</DL>
</BODY>
</HTML>
HTML table

The HTML table model allows authors to arrange data -- text, preformatted
text, images, links, forms, form fields, other tables, etc. --
into rows and columns of cells.
An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag.

A table header is defined with the <th> tag.

By default, table headings are bold and centered.

A table data/cell is defined with the <td> tag.


<HTML>
<HEAD>
<TITLE> My Website </TITLE>
</HEAD>
<BODY>

<!- - Table with border = 5 - - >


First: Table with border = 5

<TABLE BORDER=5>
<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with width = 50%- - >
Second: Table with width = 50%

<TABLE BORDER=3 WIDTH=50%>


<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with width = 50 - - >

Third: Table with width = 50

<TABLE BORDER=1 WIDTH=50>


<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with height = 75 and align = center and valign=top - - >

Fourth: Table with height = 75 and align = center and valign=top -

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>


<TR>
<TD ALIGN=CENTER>Ajay</TD>
</TR>
</TABLE>
<!- - Table with an image- - >

Fifth: Table with an image

<TABLE BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="image1.gif"
WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>
<!- - A complete Table with different sized columns- - >

Sixth: A complete Table with different sized columns

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>


<TR>
<TD WIDTH=60%>Ajay</TD>
<TD WIDTH=20%>Ramesh</TD>
<TD WIDTH=20%>Vijay</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Vikas</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Cell Spacing and Cell Padding

CELLPADDING is the amount of space between the border of the cell and the
contents of the cell. The default value for this attribute is 1. This is so that any text
in the cells does not appear to be sticking to the border. However, you can specify a
value of 0 if you wish.

The CELLSPACING attribute has a somewhat different meaning. It determines the


spacing between adjacent cells. Its default value is 2.
<HTML>
<HEAD>
<TITLE> KTU</TITLE>
</HEAD>
<BODY>
First: Table with cellspacing and cellpadding
<TABLE BORDER=3 CELLSPACING=7 CELLPADDING=7>
<TR>
<TD>Ajay</TD>
<TD>Vijay</TD>
<TD>Rohan</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Vikas</TD>
<TD>Sanjay</TD>
</TR>
</TABLE>
Second: Table with colspan

<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>Ajay</TD>
<TD>Vijay</TD>
</TR>
<TR>
<TD>Vikas</TD>
<TD>Pankaj</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
Third: Table with rowspan

<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2>Ajay</TD>
<TD>Vijay</TD>
<TD>Rohan</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Deepak</TD>
</TR>
</TABLE>
Fourth :Table with rowspan and colspan

<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2>Ajay</TD>
<TD COLSPAN=2>Vijay</TD>

</TR>
<TR>
<TD>Pankaj</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
Fifth: Table with strong tag and a link in cell's data
<TABLE BORDER=1>
<TR>
<TD COLSPAN=3 ALIGN=CENTER><STRONG>
<AHREF="http://KTU.edu.in/">Ajay</STRONG>
</TD>
</TR>
<TR>
<TD>Vijay</TD>
<TD>Vikas</TD>
<TD>Pankaj</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Colspan and Rowspan

If we want the cell c to be extended to the next cell as well and make that area part
of it own, we can use the COLSPAN attribute.

This amounts to merging the two cells into one.

It is similar to its “merge cells” feature of Microsoft Excel.

<ROWSPAN> is just like <COLSPAN>.


HTML frames

HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document.

A collection of frames in the browser window is known as a frameset.

The window is divided into frames in a similar way the tables are organized: into
rows and columns.

There are only two major frame tags :

<FRAMESET> and <FRAME>


Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag.

The <frameset> tag defines, how to divide the window into frames.

The rows attribute of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames.

Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">

<frame name = "top" src = "top_frame.html">


<frame name = "main" src = "main_frame.html" >
<frame name = "bottom" src = "bottom_frame.html">

</frameset>

</html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset cols = "25%,50%,25%">


<frame name = "left" src = "top_frame.html" >
<frame name = "center" src = "main_frame.html" >
<frame name = "right" src = "bottom_frame.htm" >

</frameset>

</html>
FORMS
The HTML <form> element defines a form that is used to collect user input:

<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
The <input> Element

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type
attribute.

Type Description

<input type="text"> Defines a one-line text input field


<input type="radio"> Defines a radio button (for selecting one of many
choices)
<input type="submit"> Defines a submit button (for submitting the form)
Text Input

<input type="text"> defines a one-line input field for text input:

Example

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
The Action Attribute

The action attribute defines the action to be performed when the form is
submitted.

Normally, the form data is sent to a web 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.
The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the form data:

<form action="/action_page.php" method="get">

or:
<form action="/action_page.php" method="post">
When to Use GET?

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in the page
address field:

/action_page.php?firstname=Mickey&lastname=Mouse

Note: GET must NOT be used when sending sensitive information! GET is best
suited for short, non-sensitive, amounts of data, because it has size limitations
too.
When to Use POST?

Always use POST if the form data contains sensitive or personal information. The
POST method does not display the submitted form data in the page address field.

POST has no size limitations, and can be used to send large amounts of data.
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.

This example will only submit the "Last name" input field:

Example
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
The <select> Element

The <select> element defines a drop-down list:

Example

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
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>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example

<textarea name="message" rows="10" cols="30">


The cat was playing in the garden.
</textarea>

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.


The <button> Element

The <button> element defines a clickable button:

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>


Input Type Password

<input type="password"> defines a password field:

Example

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their
default values:

Example

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Input Type Checkbox

<input 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" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Input Type Color

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 the input field.

Example

<form>
Select your favorite color:<br>
<input type="color" name="favcolor">
</form>
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>
Birthday:
<input type="date" name="bday">
</form>
Example

<form>
Enter a date before 1980-01-01:
<input type="date" name="someday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="someday" min="2000-01-02"><br>
</form>
Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field.

Depending on browser support, a date picker can show up in the input field.

Example

<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
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.

Example

<form>
E-mail:
<input type="email" name="email">
</form>
Input Type Month

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>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Input Type Number

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

Example

<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Input Type Range

The <input type="range"> defines a control for entering a number whose exact
value is not important (like a slider control).

Default range is 0 to 100. However, you can set restrictions on what numbers are
accepted with the min, max, and step attributes:

Example
<form>
<input type="range" name="points" min="0" max="10">
</form>
Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone
number.

The tel type is currently supported only in Safari 8.

Example
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Example

<form>
Select a time:
<input type="time" name="usr_time">
</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.

Example

<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Input Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Example

<form>
Select a week:
<input type="week" name="week_year">
</form>
HTML Input Attributes

The value Attribute

The value attribute specifies the initial value for an input field:

Example

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
The readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be
changed):

Example

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
The disabled Attribute

The disabled attribute specifies that the input field is disabled.

A disabled input field is unusable and un-clickable, and its value will not be sent
when submitting the form:

Example

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
The size Attribute

The size attribute specifies the size (in characters) for the input field:

Example

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
he maxlength Attribute

The maxlength attribute


specifies the maximum
allowed length for the
input field:
Example
<form action="">
First name:<br>
<input type="text"
name="firstname"
maxlength="10">
</form>

With a maxlength
attribute, the input field
will not accept more
than the allowed
number of characters.

The maxlength attribute


does not provide any
feedback. If you want to
alert the user, you must
write JavaScript code.
The autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

When autocomplete is on, the browser automatically completes the input values based on values that the user has entered
before.

Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password,
datepickers, range, and color.
Opera Safari Chrome Firefox Internet Explorer
Example

An HTML form with autocomplete on (and off for one input field):
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
The novalidate Attribute

The novalidate attribute is a <form> attribute.

When present, novalidate specifies that the form data should not be validated when submitted.
Opera Safari Chrome Firefox Internet Explorer
Example

Indicates that the form is not to be validated on submit:


<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
The autofocus Attribute

The autofocus attribute


specifies that the input
field should
automatically get focus
when the page loads.
Opera Safari Chrome
Firefox Internet Explorer
Example

Let the "First name"


input field automatically
get focus when the page
loads:
First name:<input
type="text"
name="fname"
autofocus>
The form Attribute

The form attribute specifies one or more forms an <input> element belongs to.

Tip: To refer to more than one form, use a space-separated list of form ids.
Opera Safari Chrome Firefox Internet Explorer
Example

An input field located outside the HTML form (but still a part of the form):
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">


The formaction Attribute

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element.

The formaction attribute is used with type="submit" and type="image".


Opera Safari Chrome Firefox Internet Explorer
Example

An HTML form with two submit buttons, with different actions:


<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit as admin">
</form>
The formenctype Attribute

The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with
method="post").

The formenctype attribute overrides the enctype attribute of the <form> element.

The formenctype attribute is used with type="submit" and type="image".


Opera Safari Chrome Firefox Internet Explorer
Example

Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the second submit
button):
<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
The formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

The formmethod attribute overrides the method attribute of the <form> element.

The formmethod attribute can be used with type="submit" and type="image".


Opera Safari Chrome Firefox Internet Explorer
Example

The second submit button overrides the HTTP method of the form:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="action_page_post.asp"
value="Submit using POST">
</form>
The formnovalidate Attribute

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute can be used with type="submit".


Opera Safari Chrome Firefox Internet Explorer
Example

A form with two submit buttons (with and without validation):


<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after
submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

The formtarget attribute can be used with type="submit" and type="image".


Opera Safari Chrome Firefox Internet Explorer
Example

A form with two submit buttons, with different target windows:


<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
The height and width Attributes

The height and width attributes specify the height and width of an <input type="image"> element.

Always specify the size of images. If the browser does not know the size, the page will flicker while images load.
Opera Safari Chrome Firefox Internet Explorer
Example

Define an image as the submit button, with height and width attributes:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
The list Attribute

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
Opera Safari Chrome Firefox Internet Explorer
Example

An <input> element with pre-defined values in a <datalist>:


<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The min and max Attributes

The min and max attributes specify the minimum and maximum values for an <input> element.

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
Opera Safari Chrome Firefox Internet Explorer
Example

<input> elements with min and max values:


Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:


<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):


<input type="number" name="quantity" min="1" max="5">
The multiple Attribute

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element.

The multiple attribute works with the following input types: email, and file.
Opera Safari Chrome Firefox Internet Explorer
Example

A file upload field that accepts multiple values:


Select images: <input type="file" name="img" multiple>
The pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against.

The pattern attribute works with the following input types: text, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.


Opera Safari Chrome Firefox Internet Explorer
Example

An input field that can contain only three letters (no numbers or special characters):
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
The placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short
description of the format).

The hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
Opera Safari Chrome Firefox Internet Explorer
Example

An input field with a placeholder text:


<input type="text" name="fname" placeholder="First name">
The required Attribute

The required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number,
checkbox, radio, and file.
Opera Safari Chrome Firefox Internet Explorer
Example

A required input field:


Username: <input type="text" name="usrname" required>
The step Attribute

The step attribute specifies the legal number intervals for an <input> element.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: The step 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.
Opera Safari Chrome Firefox Internet Explorer
Example

An input field with a specified legal number intervals:


<input type="number" name="points" step="3">

You might also like