Basic Elements HTML 5 : header, nav & footer

HTML5 development is not finish yet. But, there a few new elements in HTML5 that can be used today, elements that are already supported in current and old browsers (with shim) such as header, nav, and footer. You probably have seen these elements used across our HTML5 tutorials but haven’t actually looked under the hood.

I think it’s time we explore these new elements and see what these elements are actually used for. This post is part of our series which covers new and exciting features in HTML5. If you have missed the previous ones, check out these titles:

Element Header

The new HTML5 elements, fortunately, are described with a very logical name and according to the specification the header element represents "A group of introductory or navigational aids.” (It is in my opinion that it is much better citing from the official and legitimate source for an accurate description, as often times the meaning could be distorted).

From the explanation above, we can conclude that the header element is not intended to solely define the header of a web page. The header element may also be used to define a part (typically at the top) that introduce the section that follows.
For example, in the following code snippet, I’ve put header element at the top of my post content to wrap the title and post meta;

<header>
 <h1>This is the Title of the Content</h1>
 <div class="post-meta">
  <p>By Author</a> <span class="category">Filed in Web 2.0</span></p>  
 </div>
</header>
<article>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
 felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue 
 ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. 
 Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>

Since the title and the post meta, in this example, are placed at the top and acts as the introduction of the post content , we can wrap them inside the header element.

Nav Element

The nav element stands for Navigation. According to the spec. this element represents; “A section of a page that links to other pages or to parts within the page: a section with navigation links.”
While this element is clearly used for defining navigation specifically, the implementation is not limited to only the primary navigation, typically at the top of the web page. From the official description above, we can conclude that the nav element can also be used on any part of the page that also acts as a navigator, see the following example;

<h4>Table of Content</h4>
<nav>
 <ul>
  <li><a href="#overview">Overview</a></li>
  <li><a href="#history">History</a></li>
  <li><a href="#development">Development</a></li>
 <ul>
</nav>

In this example, we have used nav element to wrap Table of Content, where the links are still pointed to the same page.

Footer Element

Another element that is now widely adopted is the footer element. Generally we refer the footer to a section located at the very bottom of the web page, but let’s take a look how the specification describe this element; “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”
That is a bit puzzling, let’s make this thing simpler.
The footer is (still) logically placed at the bottom. But since the specification did not mention this element to be used exclusively for web footers, we can conclude that the implementation for the footer element may also be used at the end of a section. Let’s see the example below;

<div>
<header>
<h1>This is the Title of the Content</h1>
 <div class="post-meta">
  <p>By Author</a> <span class="category">Filed in Web 2.0</span></p>  
 </div>
</header>
<article> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
 felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue 
 ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. 
 Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
 

</article>
<footer>
 <div class="tags">
  <span class="tags-title">Tags:</span> <a href="#" rel="tag">Command Prompt</a>, <a href="#" rel="tag">Compass</a>, <a href="#" rel="tag">CSS</a>, <a href="#" rel="tag">Sass</a>, <a href="#" rel="tag">Terminal</a>
 </div>
 <div class="facebook-like">
  <div>10 likes</div> <!-- let's pretend it to be the facebook like -->
 </div>
</footer>
</div>

In this example, we have extended our post content to have a footer containing post tags and the post ‘Likes’.

Sumber http://www.hongkiat.com/blog/html5-basic-elements/

A Look Into HTML5 Forms Input Types: Date, Color and Range

Forms are found everywhere on websites. Facebook, Twitter, Google — just to name a few — require us to log into or register to the site through a form, in fact we also use a form to tweet and updating status in social sites. In short, the form is a very important part to be able to interact to a website.

A web form is built with inputs, in the past, we only have a few option for the input types; such as text, password, radio, checkbox and submit. Now, HTML5 comes with great improvements and introduces many new input types in the spec.
So, in this post we will dig into some of the new interesting pieces from the HTML5 Forms that we think you should try them on; let’s check them out.

Date Picker

The first thing we would like to take a look at is the date picker. Selecting date is a common thing you may find in registration form, particularly in some sites or application like flight and hotel booking.
There are many JavaScript Libraries to create date picker. Now, we can also create one in much easier way with HTML5 input date, as follows;

<input type="date">

The date picker in HTML5 basically works very similar to how the JavaScript Libraries did; when we focus on the field a calendar will pop out, and then we can navigate through the months and years to select the date.
However, each browsers that currently support the date input type namely Chrome, Opera, and Safari display this input type a bit differently which potentially lead to inconsistency issue in the user experience, and here is how it looks like;

Some notable differences you can see at a glance from the above screenshot; the Opera used the English three-letter abbreviation for the days name — Sun, Mon, Thu, and so on, while the Chrome used my local language, the Safari — on the other hand — works rather odd, it is not showing a calendar at all.
There are also some new input types to select date or time more specifically; month, week, time, datetime and datetime-local, which we are sure that the keyword itself is quite desctiptive to tell what it does.

<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">

You can view all of them in action from the link below, but make sure you view it in Opera 11 and above, since, at the of the writing, it is the only browser that support all of those input types.

• Datepicker Demo

Color Picker

Color picker is often needed in certain web-based application, such as this CSS3 gradient generator, but all this time web developers also still rely on a JavaScript Library, such as jsColor, to do the job. But now we can create a native-browser color picker with HTML5 color input type;

<input type="color">

Once again, the browsers, in this case the Chrome and Opera, render this input type slightly different;

The Opera firstly display the basic color option upon the click as well as the hex format of the current picked color in a dropdown, while the Chrome will directly pop up the color palette in a new window when clicked.
Furthermore, we can also set the default color with the value attribute, as follows;

<input type="color" value="#ff0000">

That way, when it is viewed in the unsupported browsers, the input will degrade in a text field and the default value will be visible that can give a sort of hint for users what should be entered in the field.

Display the Color Value

Rather than opening Photoshop just to copy the hex color format, you can actually create a simple tool upon this input type to do the job, since the generated color is already in hexadecimal this would be really easy;

First, we add id colorpicker to the input and we also add an empty div with id hexcolor next to it to contain the value.

<input type="color" id="colorpicker" name="color" value="#ff0000"> <div id="hexcolor"></div>

We need the jQuery linked in the head of our document. Then we store the color value and the newly added div in a variable, like so;

var color   = $('#colorpicker').val();
 hexcolor = $('#hexcolor');

Get the initial value from the #colorpicker;

hexcolor.html(color);

…and lastly change the value when the picked color is changed as well;

$('#colorpicker').on('change', function() {
    hexcolor.html(this.value);
});

That’s it; now let’s view it in action.

5 Free Online HTML Form Builders

You hardly think about the work that goes into building a form, but if you own a site, service or product, the form is an important tool to have when you are gathering crowd intelligence. Online forms are not really that hard to make, but if you want to build a nice-looking, functional form, yet don’t want to get your hands dirty with the codes, you’ve come to the right post.

Regardless of whether you need forms for feedback, login, payment or for communication purposes, there are plenty of HTML form builders out there that can generate these forms for you in a few simple clicks. They are easy to use, customizable, effective and best of all, they are free. Here are our 5 favorite HTML form builders. Go in with your requirements and leave with the HTML codes to your custom-build forms in no time.

1. JotForm

JotForm comes with a ton of pre-made templates for you to work with. It is a drag-and-drop form builder; just select a tool you require, and drag it onto the building area where you can preview what your form looks like.

You can customize and create your own form or choose a template from one of the many categories. The templates help you start somewhere, giving you ideas to create your own form. However, if you’re satisfied with the template and want no other options, just go ahead and get the HTML code and paste it on your website.

2. pForm

The first step of pForm lets you choose from 25 colour combinations for the design of your form. You could probably find one that suit the colour theme of your website. Step 2 brings you to the builder where you can select what you want to have on your form.

Its user interface is easy to understand; you click on fields you require in your form and drag the fields up and down to arrange them. At the end of the exercise, this tool provides you a compressed file with the HTML codes as well as CSS and JavaScript files; pretty much a complete package for you to install the form on your website.

3. HTMLform

HTMLform guides you through the whole process of creating and installing the form into your website. It also provides you with additional support and other files that will help you install the form to your website successfully.

You navigate the creation process with buttons and side menus. Its user interface is clean and it also has an autosave feature while you create your form. After you are done, provide your email so it can send you two files of your html code, one file is for use on websites whilst the other is used as a plugin for WordPress.

4. Reformed

Reformed comes with instructions you can follow throughout the process of building your form. It provides many options where you can specify what is required in each field.

The way it guides you through its options is by asking you if you need a certain feature. For example to check if you need your visitors to have a proper email address, it will ask ‘Check for Valid Email?’. After you have set everything up, you can test your form or just save the form and get the code. It also has a way of saving a list of forms you have created with them in the past.

5. Accessify

Accessify prides in website accessibility and one of their many tools is their Quick Form Builder. Although it does not have much of a user interface when creating a form, by the end of the third step, you’ll be able to copy the HTML code of the created form and paste it on your website.

You start by determining fields such as Name, Email, Age or any other field of information you need from your visitors. Next, you’ll have to set what each field is to have, such as a password field which replaces letters with asterisks. After you’ve decided on the options you want for your website, it’ll generate the HTML code for you to copy.