HTML5 has the following new form elements:
|
Not all browsers support all the new form elements. However, you can already start using them; If they are not supported, they will behave as regular text fields. |
The <datalist> element specifies a list of pre-defined options for an <input> element.
The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.
Use the <input> element's list attribute to bind it together with a <datalist> element.
An <input> element with pre-defined values in a <datalist>:
<form action="demo_form.asp" method="get">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
The purpose of the <keygen> element is to provide a secure way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one private and one public.
The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
A form with a keygen field:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
The <output> element represents the result of a calculation (like one performed by a script).
Perform a calculation and show the result in an <output> element:
<form action="demo_form.asp" method="get"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<input type="submit">
</form>
|
Tag |
Description |
|
Specifies a list of pre-defined options for an <input> element |
|
|
Specifies a key-pair generator field in a form |
|
|
Represents the result of a calculation |
HTML5 has several new input types for forms. These new features allow better input control and validation.
This chapter covers the new input types:
|
Input types, not supported by your web browser, will behave as regular text (input) types. |
The number type is used for input fields that should contain a numeric value.
You can set restrictions on the numbers.
Depending on browser support, the restrictions can apply to the input field.
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Here is a list of some common input restrictions:
|
Attribute |
Description |
|
disabled |
Specifies that an input field should be disabled |
|
max |
Specifies the maximum value for an input field |
|
maxlength |
Specifies the maximum number of character for an input field |
|
min |
Specifies the minimum value for an input field |
|
pattern |
Specifies a regular expression to check the input value against |
|
readonly |
Specifies that an input field is read only (cannot be changed) |
|
required |
Specifies that an input field is required (must be filled out) |
|
size |
Specifies the width (in characters) of an input field |
|
step |
Specifies the legal number intervals for an input field |
|
value |
Specifies the default value for an input field |
= New in HTML5.
You will learn more about input restrictions in the next chapter.
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
The date type is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
<form>
Birthday:
<input type="date" name="bday">
</form>
You can add restrictions to the input:
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
<input type="submit" value="Send">
</form>
The color type is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
The range type is used for input fields that should contain a value within a range.
Depending on browser support, the input field can be displayed as a slider control.
<form>
<input type="range" name="points" min="0" max="10">
</form>
You can use the following attributes to specify restrictions: min, max, step, value.
The month type allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
The week type allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
<form>
Select a week:
<input type="week" name="week_year">
</form>
The time type allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
<form>
Select a time:
<input type="time" name="usr_time">
</form>
The datetime type allows the user to select a date and time (with time zone).
Depending on browser support, a date picker can show up in the input field.
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>
The datetime-local type allows the user to select a date and time (no time zone).
Depending on browser support, a date picker can show up in the input field.
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
The email type 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.
Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.
<form>
E-mail:
<input type="email" name="email">
</form>
The search type is used for search fields (a search field behaves like a regular text field).
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
The tel type is used for input fields that should contain a telephone number.
The tel type is currently supported only in Safari 8.
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
The url type is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
HTML5 has several new attributes for <form> and <input>.
New attributes for <form>:
New attributes for <input>:
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.
The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
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>
Tip: In some browsers you may need to activate the autocomplete function for this to work.
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.
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>
The autofocus attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when the page loads.
Let the "First name" input field automatically get focus when the page loads:
First name:<input type="text" name="fname" autofocus>
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.
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">
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".
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>
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.
The formenctype attribute is used with type="submit" and type="image".
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>
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".
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>
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.
The formnovalidate attribute can be used with type="submit".
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>
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".
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>
The height and width attributes specify the height and width of an <input> element.
The height and width attributes are only used with <input type="image">.
|
Always specify the size of images. If the browser does not know the size, the page will flicker while images load. |
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 refers to a <datalist> element that contains pre-defined options for an <input> element.
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 specify the minimum and maximum value for an <input> element.
The min and max attributes work with the following input types: number, range, date, datetime, datetime-local, month, time and week.
<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 is a boolean attribute.
When present, it 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.
A file upload field that accepts multiple values:
Select images: <input type="file" name="img" multiple>
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.
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 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.
An input field with a placeholder text:
<input type="text" name="fname" placeholder="First name">
The required attribute is a boolean attribute.
When present, it 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.
A required input field:
Username: <input type="text" name="usrname" required>
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, datetime-local, month, time and week.
An input field with a specified legal number intervals:
<input type="number" name="points" step="3">
|
Tag |
Description |
|
Defines an HTML form for user input |
|
|
Defines an input control |
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
Note: By default, the <canvas> element has no border and no content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.
Tip: You can have multiple <canvas> elements on one HTML page.
To add a border, use the style attribute:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
All drawing on the canvas must be done inside a JavaScript:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Example explained:
First, find the <canvas> element:
var c = document.getElementById("myCanvas");
Then, call its getContext() method (you must pass the string "2d" to the getContext() method):
var ctx = c.getContext("2d");
The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.
The next two lines draw a red rectangle:
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).
The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.
The canvas is a two-dimensional grid.
The upper-left corner of the canvas has coordinate (0,0)
So, the fillRect() method above had the parameters (0,0,150,75).
This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle.
Coordinates Example
Mouse over the rectangle below to see its x and y coordinates:
X
Y
To draw straight lines on a canvas, we will use the following two methods:
To actually draw the line, we must use one of the "ink" methods, like stroke().
Define a starting point in position (0,0), and an ending point in position (200,100). Then use the stroke() method to actually draw the line:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
To draw a circle on a canvas, we will use the following method:
To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill().
Create a circle with the arc() method:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
To draw text on a canvas, the most important property and methods are:
Using fillText():
Write a 30px high filled text on the canvas, using the font "Arial":
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Using strokeText():
Write a 30px high text (no fill) on the canvas, using the font "Arial":
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
There are two different types of gradients:
Once we have a gradient object, we must add two or more color stops.
The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.
Using createLinearGradient():
Create a linear gradient. Fill rectangle with the gradient:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
Using createRadialGradient():
Create a radial/circular gradient. Fill rectangle with the gradient:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
To draw an image on a canvas, we will use the following method:
Draw the image onto the canvas:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
For a complete reference of all the properties and methods that can be used with the Canvas object (with try-it examples on every property and method), go to our Canvas Reference.
|
Tag |
Description |
|
Used to draw graphics, on the fly, via scripting (usually JavaScript) |
Advantages of using SVG over other image formats (like JPEG and GIF) are:
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.
In HTML5, you can embed SVG elements directly into your HTML page:
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Result:
Sorry, your browser does not support inline SVG.
To learn more about SVG, please read our SVG Tutorial.
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.
The table below shows some important differences between Canvas and SVG:
|
Canvas |
SVG |
|