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 FormsBasic 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 FormThink labels! When setting up a basic form we are using labels:
<label for=”name”>Name</label>
Notice the ‘for’ (label for) which references the id of its associated form element:
<label for=”name”>Name</label>
<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 AutofocusYou may have observed a new term in the scriptlet above: autofocus that raises questions.
What does it mean or stand for?
According to the tutorial we can speed up the data entry if, on our corresponding form on a website or blog, the user’s cursor appears straight in the first field on the form, right when they basically open and load the page. While this was previously achieved with JavaScript, now HTML5 can do this too.
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!
