Do you remember struggling with forms in your website development? Thinking of check boxes, text fields and the like where customers or visitors were supposed to enter their data? Well, I do – and I know a few of you reading this are smiling as you’ve been there too!
Luckily, Basic HTML Forms are making things much easier, but as anything in life – even the human skeleton as you see on my Xray – this needs structure… and there’s a plan behind it all, perhaps not a divine one… but then who knows?!Basic HTML Forms
Basic HTML Forms is the next chapter in my endeavour to learn the basics of HTML5 and CSS3 as explained in my article on “Redefining a Blog using Semantic Markup” HERE.
HTML5 has come up with some new input types that make it easier for visitors to a blog or website to enter their data. They work better for browsers and add to the readability on mobile devices.Setting up a Basic Form
Think labels! When setting up a basic form we are using labels:
Notice the ‘for’ (label for) which references the id of its associated form element:
<input type=”text” name=”name” autofocus id-name”>
Labels help visitors to better identify fields on a webpage, and as the form will be built in an orderly way with an ‘ordered list’, this keeps things simple, clean and we stay away from “Divitis”!First field with Autofocus
You may have observed a new term in the scriptlet above: autofocus that raises questions.
What does it mean or stand for?
Please note that we can only – and quite understandably – have one autofocus attribute per form if we want it to perform in a reliable manner. If we add more, the cursor will end up in the last autofocused field – perhaps not exactly what we intended, and not logic at all.
And as user-friendliness is our priority – remember this one!
Lots to get one’s head around… but then it’s the only way forward!