Updates from QA Training

HTML5 Easy Wins – Forms – Spellchecking

As I wrote in my previous blogs one of the nicest things about HTML5 is that we can use it now! In this blog I want to enhance your HTML forms in a way that degrades safely and causes no ill effects.


David Walker | 1 May 2012

As I wrote in my previous blogs one of the nicest things about HTML5 is that we can use it now! In this blog I want to enhance your HTML forms in a way that degrades safely and causes no ill effects.

Me, my Dyslexia addled brain and I are a common victim of lack of spellchecking. On the Mac I expect and get in browser spellchecking anyway. When I am on Windows I find that step back frustrating especially as we can change this with the addition of simple piece of code.
For any text based input add the attribute

spellcheck="true"

Then try the page in a recent copy of Chrome or Firefox. Mistype something, space or tab away and you should be able to see a red squiggle as the browser's internal dictionary leaps into action.

If you try this in Internet Explorer 9 or below no such luck, unfortunately IE does not recognise the attribute as of yet. However… this is fine, we have created a degraded but still serviceable experience for these users and enhanced the experience for those lucky enough to be on newer browsers.

If you want to save yourself a lot of work going back and altering all those inputs manually. Why not add some javascript like the code below. Just add it (preferably in an external file for maximum reuse) just below the closing </body> tag:

   var inputs = document.querySelectorAll("input");
  for (var i = 0; i < inputs.length; i++) {
   inputs[i].setAttribute("spellcheck", "true");
  }

Remember HTML5 has no YEAR ZERO. You can still use it as part of pages which pretend to be XHTML of HTML4. Your browser makes the decision about what it can do and helping it iteratively along its way to unleash the power of HTML5 is something we should be doing today as designer or developer.


David-Walker---sq

David Walker

Head of Emerging Technologies

David is a change driven technologist who continually looks to adapt and expand his knowledge and understanding of his field. Over the least eighteen years David has led technology and training companies through emerging fields and technology trends helping them to understand the future and develop business opportunities. As Head of Emerging Technologies he works closely with customers and industry experts to ensure the opportunities and threats of new technology trends designing custom learning solutions to help small and enterprise organisation adapt and make the most of their people - ensuring QA is ready when our customers need to navigate the minefield of the fast moving digital landscape. His passion is in advanced web engineering principals and vendor neutral thick client design/development technologies reflected in his research, analysis and courseware development experience combined with his training delivery skills. As a technologist he is the lead instructor and syllabus author for web development technologies and specialising in Agile, DevOps, and User Experience driven approaches to developing solutions. He has authored courses such as HTML5, Responsive Web Development, User Experience, NodeJS, Javascript and jQuery.
Talk to our learning experts

Talk to our team of learning experts

Every business has different learning needs. QA has over 30 years of experience in combining the highest quality training with the most comprehensive range of learning services, ensuring the very best fit for your organisation.

Get in touch with our learning experts to talk about how we can help.