This content originally appeared on DEV Community and was authored by Gemini392
If you are a web developer, then you've probably come across forms more times than you can imagine. Creating forms is great, everybody feels accomplished when they start doing it. But there is a better way to everything, and that's what we want to see today in this article.
These tips are not only going to make you learned when it comes to creating forms, you'll see that your forms also become responsive, and even 'interesting' for the user.
1) Labels
Well, you simply can't emphasize enough on this one. Ignore the placeholder for a minute, and think of forms without labels. Imagine filling a form like that. Placeholders are great and all, but they need the user to remember what the input field is for, because they disappear the instant they start typing.
Use more labels for your forms, since it helps the user. You could use both labels and placeholders simultaneously, if the field requires some extra description.
2) Keep Labels short
Now, when I said help the user, I didn't mean a full blown sentence. Keep it short, and easy to catch on to.
A label is just a word that prompts the user to input something in the field. If you want to expatiate, then let a placeholder do that for you.
3) Avoid all caps
You've noted the fact that labels are essentially a nice touch for forms. But there is one last thing about labels. Don't go all caps on your forms, because it makes the labels harder to read.
Your aim to help the user input accurate information. You should probably start by making the prompts easier to read, and therefore, easier to follow. If you need username, just use 'username' as a label.
4) Require only information you need
The first thing users see when they open your website will most probably be your form. It is both boring and time consuming to fill in information that is not useful to the site you are creating. Say you created a social media web app, but on the sign in, you require users to input username, password, email, date of birth, gender, country, zip code... this is already an overwhelming lot for the user, and for the backend database of your web app. Store what you need.
5.) Set up correct HTML input type
This is a critical factor for users who will access your site from their mobile phones. Setting up the right input types for fields like email, password, and numerical related data makes it easier for them to input the right data into the form.
6.) Validation for data that is being input.
You can never fully trust users when it comes to data collection. That is why you must prompt them to input the right kind of data. There is no better way to do this than to use simple validation techniques.
Plain HTML alone performs this to a certain level. Some users make errors when typing, so displaying these validation prompts helps you to collect the right data for your database.
7.) Provide a way to see the password
'I am very sure of what I typed as the password, but I can't use it for login, because apparently, it's incorrect'
Provide a way to see passwords on your form, so that users who make typos when typing can see them.
8.) Group related fields
Your forms should be organised in logical order. Fields that are logically related should be put together. It's not very good practice to for example, start with a field for first name, the next for email, and then followed by last name. First name and email are not logically related, so email should come after last name. This is same for groups of fields that are logically related.
9.) Don't erase email/password after unsuccessful attempts.
This practice is good because it saves the users time, and makes the form less tedious to fill out. If after a number of attempts the user cannot sign in, then do not erase the data that they input correctly.
Let the user only reenter what he did not get right.
10) Submit button should match action it performs
If you create a login form, then let the submit button say 'login', or 'sign in'. Same goes for sign up, and any other action. Let the submit button match the action it performs, as it makes it easier for the user to see what hitting that button would do.
Hope this article was of help to you. Connect with me on twitter for more developer tips.
This content originally appeared on DEV Community and was authored by Gemini392
Gemini392 | Sciencx (2021-11-28T20:39:04+00:00) 10 Good Practices For HTML Forms. Retrieved from https://www.scien.cx/2021/11/28/10-good-practices-for-html-forms/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.