HTML - Plug-ins

The purpose of a plug-in, is to extend the functionality of the HTML browser.

---

HTML Helpers (Plug-ins)

A helper application is a small computer program that extends the standard functionality of the browser. Helper applications are also called plug-ins.
Examples of well-known plug-ins are Java applets and Adobe Flash Player.
Plug-ins can be added to web pages with the <object> tag or the <embed> tag. 
Plug-ins can be used for many purposes: to display maps, scan for viruses, verify your bank id, and much more. The restrictions are few.

---

What is The Best Way to Play Audio or Video in HTML?

The best way to embed audio in a web page is to use the HTML5 <audio> element.
The best way to embed video in a web page is to use the HTML5 <video> element.

---

The <object> Element

The <object> element is supported in all major browsers.
The <object> element defines an embedded object within an HTML document.
It is used to to embed plug-ins (like Java applets, ActiveX, PDF, and Flash) in web pages.
It can also be used to embed another webpage, or web content like images, into HTML documents.

	The text between <object> and </object> is displayed if the browser doesn't support the tag. The HTML <param> tag is used to pass parameters to the plug in.

Example

<object width="400" height="50" data="bookmark.swf"></object>

Try it yourself »

---

The <embed> Element

The <embed> element is supported in all major browsers.
The <embed> element defines a container for an external application or interactive content (a plug-in).
Many web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.
The <embed> element will validate in an HTML5 page, but not in an HTML 4 page.

Example

<embed width="400" height="50" src="bookmark.swf">

Try it yourself »

	Note that the <embed> element does not have a closing tag. It can not contain alternative text.

HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

---

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Pictures, music, sound, videos, records, films, animations, and more.
Modern web pages often have embedded multimedia elements, and modern browsers have support for various multimedia formats.
In this tutorial you will learn about the different multimedia formats.

---

Internet Browser Support

The first Internet browsers had support for text only, and even the text support was limited to a single font in a single color. Then came browsers with support for colors, fonts and text styles, and support for pictures was also added.
The support for sounds, animations, and videos is handled in different ways by various browsers. Some multimedia elements is supported, and some requires an extra helper program (a plug-in) to work.
You will learn more about plug-ins in the next chapters.

---

Multimedia Formats

Multimedia elements (like sounds or videos) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension. When a browser sees the file extension .htm or .html, it will treat the file as an HTML file. The .xml extension indicates an XML file, and the .css extension indicates a style sheet file. Pictures are recognized by extensions like .gif, .png and .jpg.
Multimedia files also have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

---

Video Formats

MP4 is the new and upcoming format for internet video. MP4 is recommended by YouTube. MP4 is supported by Flash players and HTML5.

Format	File	Description
AVI	.avi	AVI (Audio Video Interleave) was developed by Microsoft, and is therefore playable on all Windows computers. It is commonly used in video cameras and TV hardware, but is difficult to play on non-Windows computers.
WMV	.wmv	WMV (Windows Media Video) was developed by Microsoft, and is therefore playable on all Windows computers. It is commonly used in video cameras and by TV hardware, but is difficult to play on non-Windows computers.
QuickTime	.mov	QuickTime was developed by Apple, and is therefore playable on all Apple computers. It is commonly used in video cameras and by TV hardware, but is difficult to play on non-Apple computers.
RealVideo	.rm .ram	RealVideo was developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but because of the low bandwidth priority, the quality is also low.
Flash	.swf .flv	Flash was developed by Macromedia. Flash requires an extra component to play in a browser.
Ogg	.ogg	Theora Ogg was developed by the Xiph.Org Foundation.
WebM	.webm	WebM is a project (www.webmproject.org) by the web giants, Mozilla, Opera, Adobe, and Google.
MPEG	.mpg .mpeg	MPEG, developed by the Moving Pictures Expert Group, used to be the most popular video format on the Internet. It used to be supported by all major browsers, but it is not supported by HTML5.
MPEG-4 or MP4	.mp4	MP4 is the upcoming format on the internet. It is supported by all major browsers in HTML5. YouTube recommends using MP4, and it is commonly used in newer video cameras and TV hardware.

	Only MP4, WebM, and Ogg video is supported by the newest HTML5 standard.

---

Sound Formats

MP3 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music.
If your website is about recorded music, MP3 is the choice.

Format	File	Description
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card). Click here to play The Beatles. Since MIDI files only contains instructions; they are extremely small. The example above is only 23K in size, but it plays for nearly 5 minutes. MIDI is supported by many software systems/platforms. Because it is the main format for binary music, it is supported by most software, including Internet browsers.
RealAudio	.rm .ram	RealAudio was developed Real Media to allow streaming of audio (online music, Internet radio) with low bandwidths.
WMA	.wma	WMA (Windows Media Audio), compares in quality to MP3, and is compatible with most music players, except the iPod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in Internet radio or on-line music.
AAC	.aac	AAC (Advanced Audio Coding) was developed by Apple as the default format for iTunes.
WAV	.wav	WAVE (more known as WAV) was developed by IBM and Microsoft. WAV is compatible with Windows, Macintosh, and Linux operating systems.
Ogg	.ogg	Ogg was developed by the Xiph.Org Foundation.
MP3	.mp3	MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. The encoding system combines good compression (small files) with high quality. It is supported by all major browsers.
MP4	.mp4	MP4 is a video format, but it can also be used with audio only. MP4 video is the upcoming video format on the internet. This can lead to an automatic support for MP4 audio by all major browsers.

	Only MP3, WAV, and Ogg audio is supported by the newest HTML5 standard.

HTML5 Server-Sent Events

HTML5 Server-Sent Events allow a web page to get updates from a server.

---

Server-Sent Events - One Way Messaging

A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.
Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

---

Browser Support

Server-Sent Events are supported in all major browsers, except Internet Explorer.

---

Receive Server-Sent Event Notifications

The EventSource object is used to receive server-sent event notifications:

Example

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML + =event.data + "<br>";
  };

Try it yourself »

Example explained:

• Create a new EventSource object, and specify the URL of the page sending the updates (in this example "demo_sse.php")
• Each time an update is received, the onmessage event occurs
• When an onmessage event occurs, put the received data into the element with id="result"

---

Check Server-Sent Events Support

In the tryit example above there were some extra lines of code to check browser support for server-sent events:

if(typeof(EventSource) !== "undefined")
  {
  // Yes! Server-sent events support!
  // Some code.....
  }
else
  {
  // Sorry! No server-sent events support..
  }

---

Server-Side Code Example

For the example above to work, you need a server capable of sending data updates (like PHP or ASP).
The server-side event stream syntax is simple. Set the "Content-Type" header to "text/event-stream". Now you can start sending event streams.
Code in PHP (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Code in ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: " & now())
Response.Flush()
%>

Code explained:

• Set the "Content-Type" header to "text/event-stream"
• Specify that the page should not cache
• Output the data to send (Always start with "data: ")
• Flush the output data back to the web page

---

The EventSource Object

In the examples above we used the onmessage event to get messages. But other events are also available:

Events	Description
onopen	When a connection to the server is opened
onmessage	When a message is received
onerror	When an error occurs

HTML5 Drag and Drop

Drag and drop is a part of the HTML5 standard.

---

Drag the W3Schools image into the rectangle.

---

Drag and Drop

Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
In HTML5, drag and drop is part of the standard, and any element can be draggable.

---

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.
Note: Drag and drop does not work in Safari 5.1.2.

---

HTML5 Drag and Drop Example

The example below is a simple drag and drop example:

Example

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69"

</body>
</html>

Try it yourself »

It might seem complicated, but lets go through all the different parts of a drag and drop event.

---

Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to true:

<img draggable="true">

---

What to Drag - ondragstart and setData()

Then, specify what should happen when the element is dragged.
In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").

---

Where to Drop - ondragover

The ondragover event specifies where the dragged data can be dropped.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event:

event.preventDefault()

---

Do the Drop - ondrop

When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

Code explained:

• Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
• Get the dragged data with the dataTransfer.getData("Text") method. This method will return any data that was set to the same type in the setData() method
• The dragged data is the id of the dragged element ("drag1")
• Append the dragged element into the drop element

---

More Examples

Drag image back and forth
How to drag (and drop) an image back and forth between two <div> elements.

HTML5 Geolocation

HTML5 Geolocation is used to locate a user's position

---

Locate the User's Position

The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.

---

Browser Support

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation.
Note: Geolocation is much more accurate for devices with GPS, like iPhone.

---

HTML5 - Using Geolocation

Use the getCurrentPosition() method to get the user's position.
The example below is a simple Geolocation example returning the latitude and longitude of the user's position:

Example

<script>
var x = document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML = "Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
  }
</script>

Try it yourself »

Example explained:

• Check if Geolocation is supported
• If supported, run the getCurrentPosition() method. If not, display a message to the user
• If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition )
• The showPosition() function gets the displays the Latitude and Longitude

The example above is a very basic Geolocation script, with no error handling.

---

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

Example

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
    }
  }

Try it yourself »

Error Codes:

• Permission denied - The user did not allow Geolocation
• Position unavailable - It is not possible to get the current location
• Timeout - The operation timed out

---

Displaying the Result in a Map

To display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps:

Example

function showPosition(position)
{
var latlon = position.coords.latitude + "," + position.coords.longitude;

var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Try it yourself »

In the example above we use the returned latitude and longitude data to show the location in a Google map (using a static image).
Google Map Script
How to use a script to show an interactive map with a marker, zoom and drag options.

---

Location-specific Information

This page demonstrated how to show a user's position on a map. However, Geolocation is also very useful for location-specific information.
Examples:

• Up-to-date local information
• Showing Points-of-interest near the user
• Turn-by-turn navigation (GPS)

---

The getCurrentPosition() Method - Return Data

The getCurrentPosition() method returns an object if it is successful. The latitude, longitude and accuracy properties are always returned. The other properties below are returned if available.

Property	Description
coords.latitude	The latitude as a decimal number
coords.longitude	The longitude as a decimal number
coords.accuracy	The accuracy of position
coords.altitude	The altitude in meters above the mean sea level
coords.altitudeAccuracy	The altitude accuracy of position
coords.heading	The heading as degrees clockwise from North
coords.speed	The speed in meters per second
timestamp	The date/time of the response

---

Geolocation object - Other interesting Methods

watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
clearWatch() - Stops the watchPosition() method.
The example below shows the watchPosition() method. You need an accurate GPS device to test this (like iPhone):

Example

<script>
var x = document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML = "Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
  }
</script>

Try it yourself »

HTML5 Audio

HTML5 provides a standard for playing audio files.

---

Audio on the Web

Before HTML5, there was no standard for playing audio files on a web page.
Before HTML5, audio files had to be played with a plug-in (like flash). However, different browsers supported different plug-ins.
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.

---

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> element.
Note: Internet Explorer 8 and earlier versions, do not support the <audio> element.

---

HTML5 Audio - How It Works

To play an audio file in HTML5, this is all you need:

Example

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Try it yourself »

The control attribute adds audio controls, like play, pause, and volume.
You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.
The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

---

Audio Formats and Browser Support

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3	YES	YES
Safari	YES	YES	NO
Opera	NO	YES	YES

---

MIME Types for Audio Formats

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

---

HTML5 Audio Tags

Tag	Description
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements, such as <video> and <audio>

HTML5 Inline SVG

What is SVG?

• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the Web
• SVG defines the graphics in XML format
• SVG graphics do NOT lose any quality if they are zoomed or resized
• Every element and every attribute in SVG files can be animated
• SVG is a W3C recommendation

---

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

• SVG images can be created and edited with any text editor
• SVG images can be searched, indexed, scripted, and compressed
• SVG images are scalable
• SVG images can be printed with high quality at any resolution
• SVG images are zoomable (and the image can be zoomed without degradation)

---

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.

---

Embed SVG Directly Into HTML Pages

In HTML5, you can embed SVG elements directly into your HTML page:

Example

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Try it yourself »

Result:
To learn more about SVG, please read our SVG Tutorial.

---

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

---

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas	SVG
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

HTML5 Form Attributes

HTML5 New Form Attributes

HTML5 has several new attributes for <form> and <input>.
New attributes for <form>:

• autocomplete
• novalidate

New attributes for <input>:

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

---

<form> / <input> 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 complete 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.
Note: The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

Example

An HTML form with autocomplete on (and off for one input field):

<form action="demo_form.asp" 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>

Try it yourself »

Tip: In some browsers you may need to activate the autocomplete function for this to work.

---

<form> novalidate Attribute

The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.

Example

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

<form action="demo_form.asp" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Try it yourself »

---

<input> autofocus Attribute

The autofocus attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when the page loads.

Example

Let the "First name" input field automatically get focus when the page loads:

First name:<input type="text" name="fname" autofocus>

Try it yourself »

---

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

Example

An input field located outside the HTML form (but still a part of the form):

<form action="demo_form.asp" 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">

Try it yourself »

---

<input> 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.
Note: The formaction attribute is used with type="submit" and type="image".

Example

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

<form action="demo_form.asp">
  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="demo_admin.asp"
  value="Submit as admin">
</form>

Try it yourself »

---

<input> formenctype Attribute

The formenctype attribute specifies how the form-data should be encoded when submitting it to the server (only for forms with method="post")
The formenctype attribute overrides the enctype attribute of the <form> element.
Note: The formenctype attribute is used with type="submit" and type="image".

Example

Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the second submit button):

<form action="demo_post_enctype.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>

Try it yourself »

---

<input> 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.
Note: The formmethod attribute can be used with type="submit" and type="image".

Example

The second submit button overrides the HTTP method of the form:

<form action="demo_form.asp" 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="demo_post.asp"
  value="Submit using POST">
</form>

Try it yourself »

---

<input> formnovalidate Attribute

The novalidate attribute is a boolean attribute.
When present, it specifies that the <input> element should not be validated when submitted.
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
Note: The formnovalidate attribute can be used with type="submit".

Example

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

<form action="demo_form.asp">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Try it yourself »

---

<input> 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.
Note: The formtarget attribute can be used with type="submit" and type="image".

Example

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

<form action="demo_form.asp">
  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>

Try it yourself »

---

<input> height and width Attributes

The height and width attributes specify the height and width of an <input> element.
Note: The height and width attributes are only used with <input type="image">.
Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

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">

Try it yourself »

---

<input> list Attribute

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

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>

Try it yourself »

---

<input> min and max Attributes

The min and max attributes specify the minimum and maximum value for an <input> element.
Note: The min and max attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

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">

Try it yourself »

---

<input> multiple Attribute

The multiple attribute is a boolean attribute.
When present, it specifies that the user is allowed to enter more than one value in the <input> element.
Note: The multiple attribute works with the following input types: email, and file.

Example

A file upload field that accepts multiple values:

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

Try it yourself »

---

<input> pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against.
Note: 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.

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">

Try it yourself »

---

<input> placeholder Attribute

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Example

An input field with a placeholder text:

<input type="text" name="fname" placeholder="First name">

Try it yourself »

---

<input> required Attribute

The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Example

A required input field:

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

Try it yourself »

---

<input> 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.
Note: The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

Example

An input field with a specified legal number intervals:

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

Try it yourself »

---

HTML5 <input> Tag

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control