5 Tips to Follow in Building HTML FormsMishkaBlockedUnblockFollowFollowingApr 21Don’t let your good work go down the drain without following some basic practices in developing HTML forms.
Creating a HTML form is pretty simple.
Add some inputs, add a submit button, do some backend magic (granted, the not-so-easy part), and you’re done.
But before you give yourself a pat on the back, make sure you’re following these good practices in building HTML forms.
1.
Use the required attribute in HTML formsIf users are leaving important fields blank, the form is going to be pretty useless.
Not only does it give you incomplete data, but it can even cause the site to crash if, for example, you’re saving data to a database.
The required attribute is a helpful way of circumventing all that drama.
Just add required in the input tag and the browser will take over.
<input type=”text” name=”username” required>It won’t let the user proceed after clicking on the submit button if the form is incomplete.
Furthermore, if you use a framework like Bootstrap, the form will highlight the incomplete fields in red with a message to complete before clicking submit again.
2.
Be helpfulForms can be pretty overwhelming for some individuals if it’s their first time filling it out or it’s something that involves personal information.
So make it easier for them and provide helpful hints.
Use examples in placeholders for questions that might seem confusing and labels to provide more context.
As a developer, any field or question that could confuse users won’t be obvious to you.
So instead ask one or two friends to fill out the form in front of you without interfering.
Observe how long it takes them to understand the question, any hiccups they run into in filling out the form and if they’re entering any input wrong.
3.
Include “other” in select inputsYou might have accounted for all the options in a dropdown given to you by the client, but there can still be grey areas where none apply.
Even common questions like race or gender are no longer a fixed number of categories.
Therefore, always add an “other” option in select inputs for users that don’t fit in the predefined categories.
Better yet, allow users to submit an option of their own in a text field to help you gather more complete data.
4.
Start off easyDon’t overwhelm users with tough questions at the top like credit card information or large text inputs.
They are time-consuming and users will defer filling out the form or maybe not even fill it.
So start off with easy questions like name, emails and one-word text inputs before working your way towards the longer questions.
By the time they reach those, the user will have filled out half the form and will be less likely to abandon it.
5.
Always test HTML formsThe form might be working perfectly for you, but not everyone will be using the same environment to access it.
That’s why you always should test your form on:Mobile, andOther browsers.
Over half of internet users are using their smartphone to access the internet.
Which means half of the people filling out your form will be on mobile.
Therefore, make sure the form and website is mobile optimized and easy to navigate with thumbs!If there’s anytime I’ve missed in good practices on building HTML forms, drop me a comment below or contact me on thiscodeworks.
com/contact.
Happy building!.