New form features in HTML5
DemoToday we will have a closer look at the new form features introduced in HTML5.
As we know the HTML5 specification isn't quite completed yet and none of the web browsers fully supports all of its features. Some support more - some less, but as you will soon find out, the same features often work / look differently in different browsers.
Let's have a look at the input field and what new attributes and attribute values have been added to it.
type attribute : date
type="date"
The date is the new attribute type added to the input field, and as exciting as it sounds, at the moment only a limited number of web browsers does anything with the input when this type is specified. Even Firefox doesn't seem to support it yet, but Google Chrome, Safari and Opera know how to interpret it, however, as mentioned earlier they do render it differently. Google Chrome displays the up and down arrows to change the date day by day and Opera shows the date picker. Safari seem to be a bit buggy though it renders the date field the same way as Google Chrome.
Additionally, together with date type you would assign the relevant date to the value attribute of this input tag to indicate the initial date, which has to be provided in the ISO format (YYYY-MM-DD).
value="2011-10-05"
type attribute : datetime
type="datetime"
The datetime type is pretty much the same as date except it combines the date with the time. Date needs to be in the ISO format and time as UTC.
value="2011-10-05T17:14Z" value="2011-10-05T17:14:57+00:00"
Again - Firefox seem to ignore it at present while Chrome, Safari and Opera render it differently.
type attribute : datetime-local
type="datetime-local"
The datetime-local type attribute represents a control for setting the value to a string representing a local date and time without the timezone information. It behaves pretty much the same way as the above two examples.
value="2011-10-05T17:14Z" value="2011-10-05T17:14:57+00:00"
type attribute : month
type="month"
The input element with a type attribute set to month creates an date input controlfor setting the element's value to a string representing a specific month in a year. Again, it is represented differently in different browsers.
value="2011-10"
type attribute : week
type="week"
The input element with a type attribute set to week creates an input control for setting the element's value to a string representing a specific week in a year. The week part of the value has the following format : W20. This specific example would indicate that we are looking at the 20th week of the specific year.
value="2011-W20"
type attribute : time
type="time"
The input element with a type attribute set to time creates an input control for setting the element's value to a string representing a specific time without timezone information.
The value is in the Hour:minute:second format and it supports fractional seconds.
value="13:11:26" value="13:11:26.15"
type attribute : email
type="email"
The input element with a type attribute set to email accepts the email values.
Most of the modern web browsers will not allow the form to be submitted unless the value is matching the format of the email address.
value="email@example.com"
type attribute : number
type="number"
The input element with a type attribute set to number represents a control for setting the value to a string representing a number in the floating-point format.
value="10" value="10.6" value="-2"
type attribute : range
type="range"
The range type attribute represents a control for setting a value to a string representing the number. The most common visual representation of this controller is a slider - again, it does not show in all of the browsers. The value attribute represents the initial value and position of the slider.
value="0"
Apart from the value there are several other attributes we can use with the range type attribute.
The min attribute allows us to set the minimum value that can be reached by sliding the slider to the left.
min="-10"
The max attribute defines the maximum allowed value.
max="10"
The step attribute specifies the legal number intervals for our input field. If for instance we've assigned 2 to the step attribute the values could be : -10, -8, -6 etc.
step="2"
The above attributes can also be applied to the number type attribute.
type attribute : color
type="color"
The color type attribute represents a control for setting a value to a string representing the hexadecimal value of the colour. The value has to be exactly 7 characters starting with a hash (#) followed by 6 numbers.
value="#990000"
type attribute : search
type="search"
The search type attribute represents a one line control for entering a search term. Please be aware that if you're using Google Chrome or Safari, this type attribute will convert the input into the browser's default search field, which is not very easy to style with css.
You can use a placeholder attribute with this type attribute to put a default keyword in the field.
placeholder="Search for..."
type attribute : tel
type="tel"
The search type attribute represents a one line control for entering a telephone number.
type attribute : url
type="url"
The url type attribute represents a one line control for entering an absolute URL value.
value="http://www.ssdtutorials.com"
list attribute and datalist tag
list="countries" <datalist id="countries"> <option value="United Kingdom"> <option value="United States"> <option value="Germany"> <option value="France"> <option value="Spain"> <option value="China"> </datalist>
The list attribute allows us to attach the list of possible values visitors can enter into the text field. The list is represented by the datalist tag with the id attribute referring to the list attribute value of the text field.
The suggestions from the datalist will start showing up when the visitor starts entering the value into the text field.
autofocus attribute
autofocus
The autofocus attribute allows us to define which field should the cursor be placed in when the page first loads.
As useful as they might seem, most of these features won't be in use for quite a while yet due to the browser support and differences in the visual representation of all these elements in different browsers. We tend to design websites that look the same in most (if not all) of the browsers and the fact that one browser renders specific controller differently than the other certainly does not help.
Where these features are particularly useful is the mobile devices. When you create an input tag with an email type attribute, iPhone for instance will add the @ symbol to the keyboard to help you deal with this specific field more efficiently.
The HTML5 specification is still a working draft and I'm sure we will find more and more attributes, which with the time will add more useful features to improve our online experience.
Alex : @idsocialmedia on Wednesday, 16th November 2011
Cool, I wonder how this affects SEO
Reply
Sebastian Sulinski : @designtutorials on Wednesday, 16th November 2011
Hi Alex,
Forms do not play any significant role in SEO - semantic code however does - so it's always good to have them well designed and correctly labeled.
Reply
James Avakian on Saturday, 10th December 2011
Does HTML5 work with php/MySQL, change the extension to .php?
Reply
Sebastian Sulinski : @designtutorials on Sunday, 11th December 2011
Hi James
I'm not sure if I understand well, but HTML5 is not going to process any server side commands so changing the extension from .html to .php is not going to suddenly run the page as PHP. It will run it through the PHP parser on the server, but if there is no PHP code then it will simply return the static output.
The HTML5 does work with any server technology, but as you know HTML is only a presentational layer - it does not do any logics, calculations etc., however HTML5 does come with a large JavaScript library, which allow us to interact with html dynamically - though it's still just client side technology.
I hope this answers your question.
Reply