Some time ago, a new specification for client-side database support with interesting applications was introduced. While this feature had vast potential, it has been excluded from current specification drafts due to insufficient interest from vendors which use various SQL back-ends. As such, the only offline feature currently available in HTML 5 is flexible online/offline resources management using cache manifests.
This mechanism gives the ability to compose HTML documents which can be viewed offline. It also enables an explicit notification to a user that some functionality is not available in offline mode. For example, given the web page with stock graph:
<!DOCTYPE HTML> <html manifest="stock-graph.manifest"> <head> <title>Stock Graph</title> <script src="js/stock-graph.js"></script> <link rel="stylesheet" href="style/stock-graph.css"> </head> <body> <img src="img/logo.jpg" /> Data: <img src="api/stock-graph.jpg" /> </body> </html>
The following cache manifest (stock-graph.manifest) specifies the caching policy for the example presented above (cache everything except the stock price graph that is replaced by another image when offline):
CACHE MANIFEST # cacheable resources: CACHE: js/stock-graph.js style/stock-graph.css img/logo.jpg # non-cacheable resources: NETWORK: api/stock-graph.jpg # offline replacements for non-cacheable resources: FALLBACK: api/stock-graph.jpg img/stock-graph-unavailable.jpg
Let Us Not Reinvent the Wheel
- Dragstart: Stores data from objects being dragged in a specific DragEvent event.
- Dragend: Handles the end of the drag process. (e.g. removes the moved element from DOM) Drop target can be any element that handles the following 3 events:
- Dragenter: Determines whether to accept or ignore an element being dragged.
- Dragover: Specifies the visual effect that notifies a user when the element is dragged over the drop target.
- Drop: Handles the drop.
A working drag-and-drop example that can be found in HTML 5 or in dedicated articles is lengthy and may seem complex at first sight, but this is expected since drag-and-drop is one of the most complex features in graphical UI development.
- Open the user's address book and let him/her choose email addresses and phone numbers.
- Allow a user to browse through the History and select a URL or copy the URL of the page loaded in next tab.
- Show a color picker that is developed for a specific platform taking into account its characteristics (e.g. small screen, input method, touch screen).
- Popup special virtual keyboard specific for input type on touch screen smart phones.
Now, all of the above mentioned features have become implementable thanks to previously introduced input types.
Forms validation is another major enhancement attributed to HTML 5. Depending on input type, the developer can specify different common constraints: required (i.e. a field becomes mandatory), pattern, list of allowable values, length restriction and maximum and minimum numeric values. It is also worth mentioning the new placeholder attribute that enables showing of hints or examples of a value in the input before any value is entered (a browser may indicate such text with a certain color or font).
Below is an example of a form with new types of inputs, validations and placeholders:
<form method="post" action="/addContact"> <p><label>Name: <input name="name" required></label></p> <p><label>Telephone: <input type="tel" name="tel"></label></p> <p><label>E-mail: <input type="email" name="email" placeholder="firstname.lastname@example.org" required></label></p> <p><label>Birthday: <input type="date" name="dob" max="2010-01-01"></label></p> <button type="submit" name="submit">Send</button> </form>
Unfortunately, no browser supported all of these input types and features when this text went to press. Below you can see examples of how these advanced controls are rendered in Opera 10.53 (the page http://www.miketaylr.com/code/html5-forms-ui-support.html has been specifically developed for testing support of new input types):