Вы находитесь на странице: 1из 7

HTML5 Input Types

HTML5 added several new input types:

 color
 date
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week

New input types that are not supported by older web browsers, will behave as <input

HTML Input Attribute






HTML5 Attributes
HTML5 added the following attributes for <input>:

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

and the following attributes for <form>:

 autocomplete
 novalidate

 New HTML5 Elements

 The most interesting new HTML5 elements are:
 New semantic elements like <header>, <footer>, <article>, and <section>.
 New attributes of form elements like number, date, time, calendar, and range.
 New graphic elements: <svg> and <canvas>.
 New multimedia elements: <audio> and <video>.

New HTML5 API's (Application Programming

The most interesting new API's in HTML5 are:

 HTML Geolocation
 HTML Drag and Drop
 HTML Local Storage
 HTML Application Cache
 HTML Web Workers

 Removed Elements in HTML5

 The following HTML4 elements have been removed in HTML5:

Removed Element Use Instead

<acronym> <abbr>

<applet> <object>
<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>

<font> CSS




<strike> CSS, <s>, or <del>

<tt> CSS

HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:
Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

Add New Elements to HTML

You can also add new elements to an HTML page with a browser trick.

This example adds a new element called <myHero> to an HTML page, and defines a style for

The JavaScript statement document.createElement("myHero") is needed to create a new

element in IE 9, and earlier.

Common HTML Events

Here is a list of some common HTML events:

Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

Array methods

 Converting Arrays to Strings. The JavaScript method toString() converts an array to a string of
(comma separated) array values. ...
 Popping. The pop() method removes the last element from an array: ...
 Pushing. ...
 Shifting unshift Elements. ...
 Changing Elements. ...
 Splicing an Array. ...
 Merging (Concatenating) Arrays. ...
 Slicing an Array.

Number methods:

Method Description

Number() Returns a number, converted from its argument.

parseFloat() Parses its argument and returns a floating point number

parseInt() Parses its argument and returns an integer

Method Description

constructor() Returns the function that created this object's instance. By default this is the
Number object.

toExponential() Forces a number to display in exponential notation, even if the number is in

the range in which JavaScript normally uses standard notation.

toFixed() Formats a number with a specific number of digits to the right of the

toLocaleString() Returns a string value version of the current number in a format that may
vary according to a browser's locale settings.

toPrecision() Defines how many total digits (including digits to the left and right of the
decimal) to display of a number.

toString() Returns the string representation of the number's value.

valueOf() Returns the number's value.


var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort(); // First sort the elements of fruits
fruits.reverse(); // Then reverse the order of the elements

Numeric Sort
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});