HTML Forms

HTML forms are used to pass data to a server.

An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

HTML Forms - The Input Element

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

The <input> element is used to select user information.

An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.

The most common input types are described below.

Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:

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

How the HTML code above looks in a browser:

窗体顶端

First name:聽
Last name:聽

窗体底端

Note:聽The form itself is not visible. Also note that the default width of a text field is 20 characters.聽

Password Field

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

<form>
Password: <input type="password" name="pwd">
</form>

How the HTML code above looks in a browser:

窗体顶端

Password:聽

窗体底端

Note:聽The characters in a password field are masked (shown as asterisks or circles).

Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

How the HTML code above looks in a browser:

窗体顶端

Male
Female

窗体底端

Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

How the HTML code above looks in a browser:

窗体顶端

I have a bike
I have a car

窗体底端

Submit Button

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

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

How the HTML code above looks in a browser:

窗体顶端

Username:聽

窗体底端

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "demo_form_action.asp". The page will show you the received input.

More Examples

Radio buttons
How to create radio buttons.

Checkboxes
How to create checkboxes. A user can select or unselect a checkbox.

Simple drop-down list
How to create a simple drop-down list.

Drop-down list with a pre-selected value
How to create a drop-down list with a pre-selected value.

Textarea
How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.

Create a button
How to create a button.

Form Examples

Fieldset around form-data
How to create a border around elements in a form.

Form with text fields and a submit button
How to create a form with two text fields and a submit button.

Form with checkboxes
How to create a form with two checkboxes and a submit button.

Form with radio buttons
How to create a form with two radio buttons, and a submit button.

Send e-mail from a form
How to send e-mail from a form.

HTML Form Tags

= Tag added in HTML5.

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<button>	Defines a clickable button
<datalist>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation

HTML Iframes

« Previous

Next Chapter »

An iframe is used to display a web page within a web page.

Iframe Syntax

The syntax for adding an iframe is:

The src attribute specifies the URL (web address) of the iframe page.

Iframe - Set Height and Width

Use the height and width attributes to specify the size.

The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example

Try it Yourself »

Iframe - Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe.

Set the attribute value to "0" to remove the border:

Example

Try it Yourself »

Use iframe as a Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

Try it Yourself »

END

HTML Scripts

« Previous

Next Chapter »

JavaScripts make HTML pages more dynamic and interactive.

Try it Yourself - Examples

Insert a script
How to insert a script into an HTML document.

Use of the <noscript> tag
How to handle browsers that do not support scripting, or have scripting disabled.

The HTML <script> Tag

The <script> tag is used to define a client-side script, such as a JavaScript.

The <script> element either contains scripting statements or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

The script below writes Hello JavaScript! into an HTML element with id="demo":

Example

Try it Yourself »

To learn all about JavaScript, visit our JavaScript tutorial!

The HTML <noscript> Tag

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripting.

The <noscript> element can contain all the elements that you can find inside the <body> element of a normal HTML page.

The content inside the <noscript> element will only be displayed if scripts are not supported, or are disabled in the user's browser:

Example

Try it Yourself »

A Taste of JavaScript (From Our JavaScript Tutorial)

Here are some examples of what JavaScript can do:

JavaScript can change HTML content:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

Try it Yourself »

JavaScript can change HTML styles:

document.getElementById("demo").style.fontSize = "25px";

Try it Yourself »

JavaScript can change HTML attributes:

document.getElementById("image").src = "picture.gif";

Try it Yourself »

HTML Script Tags

Tag	Description
<script>	Defines a client-side script
<noscript>	Defines an alternate content for users that do not support client-side scripts

END

HTML Head

« Previous

Next Chapter »

Try it Yourself - Examples

<title> - Define a title for an HTML document
Use the <title> tag to define a title for a document.

<base> - Default URL and target for all links
Use the <base> tag to specify a default URL and a default target for all links on a page.

The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

The HTML <title> Element

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

The <title> element is required in all HTML/XHTML documents.

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

A simplified HTML document:

Example

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:

Example

The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.

The <link> tag is most used to link to style sheets:

Example

The HTML <style> Element

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser:

Example

<head>
<style">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

The HTML <meta> Element

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

<meta> Tags - Examples of Use

Define keywords for search engines:

Example

Define a description of your web page:

Example

Define the author of a page:

Example

Refresh document every 30 seconds:

Example

The HTML <script> Element

The <script> tag is used to define a client-side JavaScript.

The script below writes Hello JavaScript! into an HTML element with id="demo":

Example

Try it Yourself »

To learn all about JavaScript, visit our JavaScript tutorial!

HTML head Elements

Tag	Description
<head>	Defines information about the document
<title>	Defines the title of a document
<base>	Defines a default address or a default target for all links on a page
<link>	Defines the relationship between a document and an external resource
<meta>	Defines metadata about an HTML document
<script>	Defines a client-side script
<style>	Defines style information for a document

HTML Entities

« Previous

Next Chapter »

Reserved characters in HTML must be replaced with character entities.

Characters, not present on your keyboard, can also be replaced by entities.

HTML Entities

Some characters are reserved in HTML.

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Character entities are used to display reserved characters in HTML.

A character entity looks like this:

&entity_name;

&#entity_number;

To display a less than sign we must write: < or <

The advantage of using an entity name, instead of a number, is that the name is easier to remember.
The disadvantage is that browsers may not support all entity names, but the support for numbers is good.

Non Breaking Space

A common character entity used in HTML is the non breaking space ( ).

Remember that browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the character entity.

Some Other Useful HTML Character Entities

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

Entity names are case sensitive.

Combining Diacritical Marks

A diacritical mark is a "glyph" added to a letter.

Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.

Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.

Diacritical marks can be used in combination with alphanumeric characters, to produce a character that is not present in the character set (encoding) used in the page.

Here are some examples:

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

You will see more about HTML symbols in the next chapter of this tutorial.

HTML Symbols

« Previous

Next Chapter »

HTML Symbol Entities

HTML entities were described in the previous chapter.

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.

To add these symbols to an HTML page, you can use an HTML entity name.

If no entity name exists, you can use an entity number; a decimal (or hexadecimal) reference.

If you use an HTML entity name or a hexadecimal number, the character will always display correctly.
This is independent of what character set (encoding) your page uses!

Example

<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>

Will display as:

I will display €
I will display €
I will display €

Try it Yourself »

Some Mathematical Symbols Supported by HTML

Char	Number	Entity	Description
∀	∀	∀	FOR ALL
∂	∂	∂	PARTIAL DIFFERENTIAL
∃	∃	∃	THERE EXISTS
∅	∅	∅	EMPTY SETS
∇	∇	∇	NABLA
∈	∈	∈	ELEMENT OF
∉	∉	∉	NOT AN ELEMENT OF
∋	∋	∋	CONTAINS AS MEMBER
∏	∏	∏	N-ARY PRODUCT
∑	∑	∑	N-ARY SUMMATION

Full Math Reference

Some Greek Letters Supported by HTML

Char	Number	Entity	Description
Α	Α	Α	GREEK CAPITAL LETTER ALPHA
Β	Β	Β	GREEK CAPITAL LETTER BETA
Γ	Γ	Γ	GREEK CAPITAL LETTER GAMMA
Δ	Δ	Δ	GREEK CAPITAL LETTER DELTA
Ε	Ε	Ε	GREEK CAPITAL LETTER EPSILON
Ζ	Ζ	Ζ	GREEK CAPITAL LETTER ZETA

Full Greek Reference

Some Other Entities Supported by HTML

Char	Number	Entity	Description
©	©	©	COPYRIGHT SIGN
®	®	®	REGISTERED SIGN
€	€	€	EURO SIGN
™	™	™	TRADEMARK
←	←	←	LEFTWARDS ARROW
↑	↑	↑	UPWARDS ARROW
→	→	→	RIGHTWARDS ARROW
↓	↓	↓	DOWNWARDS ARROW
♠	♠	♠	BLACK SPADE SUIT
♣	♣	♣	BLACK CLUB SUIT
♥	♥	♥	BLACK HEART SUIT
♦	♦	♦	BLACK DIAMOND SUIT

Full Currency Reference

Full Arrows Reference

Full Symbols Reference

HTML Uniform Resource Locators

« Previous

Next Chapter »

A URL is another word for a web address.

A URL can be composed of words (w3schools.com), or an Internet Protocol (IP) address (192.68.20.50).

Most people enter the name when surfing, because names are easier to remember than numbers.

URL - Uniform Resource Locator

Web browsers request pages from web servers by using a URL.

When you click on a link in an HTML page, an underlying <a> tag points to an address on the web.

A Uniform Resource Locator (URL) is used to address a document (or other data) on the web.

A web address, like http://www.w3schools.com/html/default.asp follows these syntax rules:

Example

scheme://host.domain:port/path/filename

Explanation:

scheme - defines the type of Internet service (most common is http)
host - defines the domain host (default host for http is www)
domain - defines the Internet domain name (w3schools.com)
port - defines the port number at the host (default for http is 80)
path - defines a path at the server (If omitted: the root directory of the site)
filename - defines the name of a document or resource

Common URL Schemes

The table below lists some common schemes:

Scheme	Short for	Used for
http	HyperText Transfer Protocol	Common web pages. Not encrypted
https	Secure HyperText Transfer Protocol	Secure web pages. Encrypted
ftp	File Transfer Protocol	Downloading or uploading files
file		A file on your computer

URL Encoding

URLs can only be sent over the Internet using the ASCII character-set.

Since URLs often contain characters outside the ASCII set, the URL has to be converted into ASCII.

URL encoding converts characters into a format that can be transmitted over the Internet.

URL encoding replaces non ASCII characters with a "%" followed by two hexadecimal digits.

URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.

Try It Yourself

窗体顶端

窗体底端

If you click "Submit", the browser will URL encode the input before it is sent to the server.

A page at the server will display the received input.

Try some other input and click Submit again.

END

HTML and XHTML

« Previous

Next Chapter »

XHTML is HTML written as XML.

What Is XHTML?

XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of 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.

The following HTML code will work fine if you view it in a browser (even if it does NOT follow the HTML rules):

<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>

XML is a markup language where documents must be marked up correctly and must be "well-formed".

If you want to study XML, please read our XML tutorial.

Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language.

Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML.

The Most Important Differences from HTML:

Document Structure

XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden

XHTML Elements

XHTML Attributes

<!DOCTYPE ....> Is Mandatory

An XHTML document must have an XHTML DOCTYPE declaration.

A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.

The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.

The example below shows an XHTML document with a minimum of required tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
......
</body>

</html>

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:

<b><i>This text is bold and italic</b></i>

In XHTML, all elements must be properly nested within each other, like this:

<b><i>This text is bold and italic</i></b>

XHTML Elements Must Always Be Closed

This is wrong:

<p>This is a paragraph
<p>This is another paragraph

This is correct:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty Elements Must Also Be Closed

This is wrong:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

This is correct:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case

This is wrong:

<BODY>
<P>This is a paragraph</P>
</BODY>

This is correct:

<body>
<p>This is a paragraph</p>
</body>

XHTML Attribute Names Must Be In Lower Case

This is wrong:

This is correct:

Attribute Values Must Be Quoted

This is wrong:

This is correct:

Attribute Minimization Is Forbidden

This is wrong:

This is correct:

How to Convert from HTML to XHTML

Add an XHTML <!DOCTYPE> to the first line of every page
Add an xmlns attribute to the html element of every page
Change all element names to lowercase
Close all empty elements
Change all attribute names to lowercase
Quote all attribute values