Off the Ridge Code Newsletter

Search

All posts in "HTML5"

Testing waters with HTML5!

Published April 20, 2014 in HTML5 - 1Comments

Testing waters with HTML5! – Part:1 (Possibly, most likely..)

Recently I’ve became interested in HTML5, here are some of my findings:

<!DOCTYPE html> – believe or not, the new DOCTYPE is much simpler to memorize. Originally in HTML 4.X, DOCTYPED referred to Document Type Definition (DTD), that’s because it was based on XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

        “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
It’s was a pain to memorize it, not anymore, HTML5 is not based on SGML and therefore does not need a reference to DTD, but there’s more! (or less), only one variant of the DOCTYPE and it is:
<!DOCTYPE html>
Some basics:
1. Now with simple calendar! 
There are several new input types and one of them is called ‘date’:
Let’s try a simple example:
<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”utf-8″>
        <link rel=”stylesheet” href=”style.css”/>
        <title>Hello HTML5</title>
    </head>
    <body>
        <p>Hello HTML5!</p>
        
        <form id=”helloHTML5Form”>
        <label for=”date-input”> Please select a date:</label>
        <input type=”date” id=”date-input”/>                
    </body>
<html>
running it quickly in Chrome, renders a calendar picker:
2. Now with (extra) time!
Let’s add type ‘time’:
<input type=”time” id=”time”/>


3.  Range:
<label for=”range”> Please select a week:</label>
<input type=”range” id=”range” min=”0″ max=”99″/>
4. Search
<label for=”search”> Search</label>
<input type=”search” id=”search” placeholder=”Search here..”/>
5. Phone (with required attribute)
<label for=”phone”> Phone:</label>
<input type=”tel” id=”phone” required/>
6. Data List

<input type=”text” list=”datasource”>
<datalist id=”datasource”>
<option label=”OSX” Value=”OSX”></option>
<option label=”Windows 8″ Value=”Windows 8″></option>
<option label=”Ubuntu” Value=”Linux”></option>
</datalist>  
double clicking inside the box opens up the ‘dropdown’

Keep in mind that the feel and look is up to the browser implementation so they will render differently in different browsers, unless of course you style them with CSS.