Seeking advice and best practices for HTML forms

HTML & CSS
1

Hi everyone! I’m relatively new to web development and I’ve been working on incorporating forms into my HTML projects. I wanted to reach out to the community and gather some insights on best practices for HTML forms. What are some tips and tricks you swear by when it comes to creating user-friendly and accessible forms? Any recommendations for handling form validation, styling, or improving overall user experience? I’d love to hear about your experiences and learn from the seasoned developers in the group! Thanks in advance.

2

One thing I learn when I took a course in HTML/CSS in college is keep your forms as short as possible as users have a low tolerance in entering a lot of information in a form. If you absolutely must have a long form then consider having that form span 2 pages or more.

2 Likes
4

I agree with this.

“The more you ask, the less you get”

Keep form fields to a minimum to maximise the conversion rate.

5
  1. Make sure that you don’t stand in the user’s way when filling in the form fields. Only offer minor conveniences with your JavaScript validation and make sure to show the user what they are doing wrong.
  2. In addition to validating on the client side with JavaScript, make sure you also validate on the server-side with your language of choice. Never assume the user is going to input good data.
  3. Offer tab index attributes on your fields so that a user who might want to tab between fields can do so in a logical order that makes sense.
  4. Never assume that your user has no disabilities. Offer screen reading and assistant technology field attributes and remember that there are several people who have trouble seeing colors. So besides showing messages in red/green, maybe offer other styling to set them apart from the other text in a field.
  5. Don’t be fancy. Make forms as easy to read and use. Simple is always better.
6

I think it is best to tell the user what is valid and invalid before the user enters values. Often I fill something in and then it says I am wrong but they did not previously specify what is right.

Design a good help system. It is better to provide the necessary description of what to do with a way to get details than it is to provide no explanation even if all the details are available elsewhere.

When comparing strings, ensure they are case-independent comparisons unless it is clear that case is relevant.

Provide a way to save uncompleted forms so the user can continue later.