Thursday, 18 June 2020

HTML5 New Input Types

HTML5 introduces several new <input> types like email, date, time, color, range, and so on. to improve the user experience and to make the forms more interactive. 


In this section we're going to take a brief look at each of the following new input types:




  • color
  • number
  • url
  • image
  • date
  • datetime-local
  • time
  • month
  • week
  • email
  • range
  • search
  • file
  • tel




Input Type Color
The <input type="color"> is used for input fields that should contain a color. It displays a color picker.

The color input type allows the user to select a color from a color picker and returns the color value in hexadecimal format (#rrggbb). If you don't specify a value, the default is #000000, which is black.

Example :

    <label for="favcolor">Select your favorite color:</label>
    <input type="color" id="favcolor" name="favcolor">





Input Type Number
The <input type="number"> defines a numeric input field.
The number input type can be used for entering a numerical value. You can also restrict the user to enter only acceptable values using the additional attributes min, max, and step.


Example :

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">





Input Type URL
The <input type="url"> is used for input fields that should contain a URL or web addresses.

You can use the multiple attribute to enter more than one URL. Also, if required attribute is specified browser will automatically carry out validation to ensure that only text that matches the standard format for URLs is entered into the input box. 


Example :

    <label for="myurl">Enter Website URL:</label>
    <input type="url" name="myurl"  id="myurl" required>





Input Type Image
<input type=image"> defines a image as button for submitting form data to a form-handler.


Example :

    <input type="image" src="images/pic.gif">




Input Type Date
The <input type="date"> is used for input fields that should contain a date. It defines a date picker which allows the user to select a date from a drop-down calendar.

The date value includes the year, month, and day, but not the time.


Example :

   <label for="birthday">Birthday:</label>
   <input type="date" id="birthday" name="birthday">





Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no time zone.
The datetime-local input type allows the user to select both local date and time, including the year, month, and day as well as the time in hours and minutes.


Example :

  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">




Input Type Time
The <input type="time"> allows the user to select a time (no time zone).

The time input type can be used for entering a time (hours and minutes).

Browser may use 12- or 24-hour format for inputting times, based on local system's time setting.


Example :


  <label for="appt">Select a time for appointment:</label>
  <input type="time" id="appt" name="appt">




Input Type Month
The <input type="month"> allows the user to select a month and year from a drop-down calendar.

The value is a string in the format "YYYY-MM", where YYYY is the four-digit year and MM is the month number. 


Example :


  <label for="birthmonth">Birthday (month and year):</label>
  <input type="month" id="birthmonth" name="bdaymonth">





Input Type Week
The <input type="week"> allows the user to select a week and year from a drop-down calendar.


Example :

  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">






Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail address.

The email input type allows the user to enter e-mail address. It is very similar to a standard text input type, but if it is used in combination with the required attribute, the browser may look for the patterns to ensure a properly-formatted e-mail address should be entered.


Example :

  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">





Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).

The range input type can be used for entering a numerical value within a specified range. It works very similar to number input, but it offers a simpler control for entering a number.

Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes


Example :


  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">





Input Type Search
The <input type="search"> is used for creating search input fields.

A search field typically behaves like a regular text field, but in some browsers like Chrome and Safari as soon as you start typing in the search box a small cross appears on the right side of the field that lets you quickly clear the search field. 


Example :

  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">





Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Example :

  <label for="myfile">Select a file to upload:</label>
  <input type="file" id="myfile" name="myfile">





Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.

Browsers don't support tel input validation natively. However, you can use the placeholder attribute to help users in entering the correct format for a phone number, or specify a regular expression to validate the user input using the pattern attribute.


Example :


  <label for="myphone">Telephone Number:</label>
  <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>



A Form Example :




















Monday, 15 June 2020

About HTML5

(Not in Syllabus - For extra Knowledge)

HTML5 

HTML5 is the latest specification of the HTML language
HTML5 introduces a number of new elements and attributes that can help you in building modern websites.


History of HTML


  • HTML was created by Sir Tim Berners-Lee in late 1991 but was not released officially, which was published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML.
  • HTML is a very evolving markup language and has evolved with various versions updating. Long before its revised standards and specifications are carried in, each version has allowed its user to create web pages in the much easier and prettier way and make sites very efficient.
  • HTML 1.0 was released in 1993 with the intention of sharing information which can be readable and accessible via web browsers. But not much of the developers were involved in creating websites. So the language was also not growing.
  • Then comes the HTML 2.0, published in 1995; which contains all the features of HTML 1.0 along with that few additional features; which remained as the standard markup language for designing and creating websites until January 1997 and refined various core features of HTML.
  • Then comes the HTML 3.0, where Dave Raggett who introduced a fresh paper or draft on HTML. It included improved new features of HTML, giving more powerful characteristics for webmasters in designing web pages. But these powerful features of new HTML slowed down the browser in applying further improvements.
  • Then comes the HTML 4.01 which is widely used and was a successful version of HTML before HTML 5.0, which is currently released and used worldwide. HTML 5 can be said for as an extended version of HTML 4.01 which was published in the year 2012.



Members of the World Wide Web Consortium (W3C) - 1995

W3C


The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. 
Led by Web inventor and Director Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web

W3C members work together to design web technologies that build upon its versatility, giving the world the power to enhance communication and commerce for anyone, anywhere, anytime, and using any device.

Long Term Goals for the Web 

  • Web for Everyone 
  • Make the Web available regardless of hardware, software, language, culture, etc. 
  • Web on Everything 
  • Make Web access from any kind of device as simple and convenient as possible 
  • Knowledge Base 
  • Enable people to solve problems that would be otherwise too complex or tedious to solve 
  • Trust and Confidence
  • Make accountability, security, confidence and confidentiality possible for all users



W3C TEAM - 2008

Today, W3C is comprised of more than 400 members including the world's foremost technology companies such as HP, IBM, Nokia, Microsoft, At&T, Intel, Oracle, Xeroz, etc..



Features of HTML5

New Semantic Elements − These are like <header>, <nav>, <main>, <article>, <aside>, <section> and <footer> . New <!doctype> declaration.



New !DOCTYPE declaration


A Document Type Declaration, or DOCTYPE for short, is an instruction to the web browser about the version of markup language in which a web page is written.
A DOCTYPE declaration appears at the top of a web page before all other elements. According to the HTML specification or standards, every HTML document requires a valid document type declaration to insure that your web pages are displayed the way they are intended to be displayed.





Forms 2.0 − Improvements to HTML web forms where new types of fields and attributes have been introduced for <input> tag.





Persistent Local Storage − To achieve without resorting to third-party plugins.


With web storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Web storage is per origin (per domain and protocol). 
All pages, from one origin, can store and access the same data.

HTML web storage provides two objects for storing data on the client:
window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)



WebSocket − A next-generation bidirectional communication technology for web applications.

HTML5's WebSocket protocol gives provision for such persistent real-time bi-directional TCP connection between a client (browser) and a server, without the need/use of AJAX methodology or 'Long Polling', doing away with headers thereby decreasing network load and improving performance. You can think of WebSocket as a full-duplex messaging system, akin to land-line telephones, where users at both ends can speak and hear simultaneously.

Websocket Benefit 
- Websocket enables the server to push data to the connected clients. 
- Reduce unnecessary network traffic and latency using full-duplex through a single connection (instead of two). 
- Streaming through proxies and firewalls, supporting simultaneously upstream and downstream communication. 
- Backward compatible with the pre-WebSocket world by switching from an HTTP connection to WebSockets.


Apps that should use Websocket 
- Multi-User Apps. 
- Real-Time Apps.
- Apps where live data is needed, like a stock market app…






Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).

Server-Sent Events (SSE) is a server push technology enabling a client to receive automatic updates from a server via HTTP connection. The Server-Sent Events EventSource API is standardized as part of HTML5 by the W3C.

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.







Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.

HTML5 supports SVG (Scalable Vector Graphics), canvas, and other virtual vector graphics, whereas in HTML, using vector graphics was only possible by using it in conjunction with different technologies like Flash, VML (Vector Markup Language), or Silverlight.

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.








Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.

The HTML5 specification introduced the video element for the purpose of playing videos, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web, instead of the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers.


Media elements like <video> and <audio> have additional JavaScript functionality beyond normal HTMLElements that allow you to interact or control the media.

Various Properties and Methods are provided in Javascript to interact with the video element. You can write code  on events occurring to video such as playing, error, ended






Geolocation − Now visitors can choose to share their physical location with your web application.


Users can select their location on map

The HTML5 geolocation feature lets you find out the geographic coordinates (latitude and longitude numbers) of the current location of your website's visitor.
This feature is helpful for providing better browsing experience to the site visitor. For example, you can return the search results that are physically close to the user's location.




Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.





Drag and drop − Drag and drop the items from one location to another location on the same webpage.
Shoping website page where users can drag items to shopping cart

Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button