In the first article in this series we looked at the history of HTML5 forms and many of the new attributes available to us. In this second and final part of the series, we’ll look at the new input types available in HTML5. As we’ll see, these new features will go a long way toward making your life easier while delivering a delightful user experience. The best thing about all this? You can start using them now.
HTML5 forms input types
HTML5 forms introduction and new attributes
No doubt you interact with at least one form on the Web every day. Whether you’re searching for content or logging in to your e-mail account or Facebook page, using online forms is one of the most common tasks performed on the Web. As designers and developers, creating forms has a certain monotony about it, particularly writing validation scripts for them. HTML5 introduces a number of new attributes, input types, and other elements for your markup toolkit. In this article we’ll be focussing on the new attributes with a future article looking at the new input types.
HTML5 adaptive images: end of round one
After The Great Vendor Prefix Hullaballoo of April 2012 comes The Great Responsive Images Brouhaha of May 2012. We look at the main competing formats for adding adaptive images to HTML – the <picture> element, and the <img srcset=""> attribute.
The contenteditable attribute
For some time now, we’ve been using various technologies to edit and store text within a web browser. Now with the contenteditable attribute, things have got a whole lot easier. In this article, I’ll tell you what this attribute is for, how it works, and how we can take things further.
Goodbye time, datetime, and pubdate. Hello data and value.
While HTML5 is stable and being implemented we’re still not past losing (or gaining) an element, as demonstrated by the removal of <time> and the addition of <data>. Rather than jumping into the ensuing brouhaha, we’ve spent some time figuring out what this really means. In short? Well… it’s complicated.
The scoped attribute
The scoped attribute for the style element allows you to include styles mid-document that targets a specific element and its children. Depending upon how you look at this, it’ll either be a godsend or a curse. Once you’ve reached the end of this article, I hope you can form your own opinion.
Avoiding common HTML5 mistakes
Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them.
Extending HTML5 — Microdata
For those who like (to argue about) semantics, HTML5 is fantastic. Old presentational elements now have new semantic meanings, there’s a slew of new semantic elements for us to argue about, and we've even in<cite>d a riot or two. But that's not all! Also in HTML5 is microdata, a new lightweight semantic meta-syntax. Using attributes, we can define nestable groups of name-value pairs of data, called microdata, which are generally based on the page’s content. It gives us a whole new way to add extra semantic information and extend HTML5.
HTML5 Simplequiz #4: figures, captions and alt text
Simplequiz #4 asks about alt text on images that are captioned using HTML5 figure and figcaption. Steve Faulkner moderates this week.
HTML5 Simplequiz #3: how to mute a video
This is a bit of a special Simplequiz this week. Simon Pieters, who works on multimedia QA for Opera and is one of those working on the HTML5 spec, asked us to run a quiz that would help the spec writers decide on a new aspect of the language.
