Scribd
Upload
199 views

HTML5 Input Types

HTML5 introduced several new input types for forms, such as color, date, email, number, and range. It also added new attributes for both inputs and forms, including autocomplete, autofocus, min and max. HTML5 introduced new semantic elements like header, footer, and article. It also added new multimedia elements for audio, video, and graphics. New HTML5 APIs were introduced for features like geolocation, drag and drop, and local storage. Some older HTML4 elements were removed in HTML5.

Uploaded by

suresh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
199 views

HTML5 Input Types

HTML5 introduced several new input types for forms, such as color, date, email, number, and range. It also added new attributes for both inputs and forms, including autocomplete, autofocus, min and max. HTML5 introduced new semantic elements like header, footer, and article. It also added new multimedia elements for audio, video, and graphics. New HTML5 APIs were introduced for features like geolocation, drag and drop, and local storage. Some older HTML4 elements were removed in HTML5.

Uploaded by

suresh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 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
type="text">.

HTML Input Attribute


Value

Readonly

Disabled

Size

Maxlength.

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


Interfaces)
The most interesting new API's in HTML5 are:

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

 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

<frame>

<frameset>

<noframes>

<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
it:

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

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.

ARRAY SORT/REVERSE

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});

You might also like