登录查看更多内容

What are the best practices for labeling and grouping web form elements?

由人工智能和领英社区提供技术支持

Web forms are essential for many online interactions, such as registering, logging in, shopping, or filling out surveys. However, not all web forms are easy to use or understand, especially for people with disabilities or different preferences. In this article, you will learn some best practices for designing and coding web forms that are both accessible and SEO-friendly.

在这篇协作文章中查找专家回答

由社区从 3 条内容中精选。了解更多

1 Use semantic HTML elements

Semantic HTML elements are those that convey the meaning and purpose of the content, rather than just the appearance. For example, using <form>, <label>, <input>, <select>, and <button> elements for web forms helps screen readers, browsers, and search engines understand the structure and function of the form. Semantic HTML elements also provide default styles and behaviors that can be customized with CSS and JavaScript.

添加您的观点

2 Provide clear and descriptive labels

Labels are text that explain what each form field is for and what kind of input is expected. Labels should be linked to the corresponding form fields using the for and id attributes, or by nesting the form fields inside the label elements. This way, screen readers can announce the labels when users focus on the form fields, and users can click on the labels to activate the form fields. Labels should also be concise, informative, and visible.

添加您的观点

Justin Ferrell

Building the internet.
举报内容
While technically possible to nest elements within a label, the semantics of linking them with for and id attributes is also necessary for an accessible experience.

已翻译

赞

3 Group related form fields with fieldsets and legends

Fieldsets and legends are semantic HTML elements that help organize form fields into logical groups. For example, you can use a fieldset to group form fields that belong to the same category, such as personal information, payment details, or preferences. You can use a legend to provide a title or description for each fieldset. This helps users navigate and understand the form, and also helps screen readers announce the context and structure of the form.

添加您的观点

4 Use appropriate input types and attributes

Input types and attributes are HTML features that specify the kind and format of the data that users can enter in the form fields. For example, you can use input type="email" to indicate that the form field accepts email addresses, or input type="number" to indicate that the form field accepts numeric values. You can also use attributes such as placeholder, pattern, required, min, max, and step to provide hints, validation, and constraints for the input. Using appropriate input types and attributes helps users enter the correct data, and also helps browsers and search engines optimize the form functionality and appearance.

添加您的观点

Mike Campbell

Former Senior Fullstack Engineer at Divvy
举报内容
While this answer could go anywhere, this is my biggest pet peeve. If your onboarding form includes inputs that are improperly typed, I might not sign up. Think of your Bank's website not having a Number input for an amount for deposit? In a high trust, situation, something like this can shift the user experience without them even realizing it. Attributes do far more than just validate, they are essential for E-Readers and other forms of accessibilty, and mobile access as mobile keyboards use input types heavily. So while they're effective at making better forms, input types and attributes communicate to the user, implicitly and explicitly, that you have taken the time to craft an experience that is frictionless, and subtly smooth.

已翻译

赞

5 Ensure sufficient color contrast and focus indicators

Color contrast and focus indicators are visual cues that help users see and interact with the form fields. Color contrast is the difference between the foreground and background colors, and it should be high enough to ensure readability and accessibility. You can use online tools such as WebAIM's Color Contrast Checker to test and adjust the color contrast of your web form. Focus indicators are outlines or highlights that show which form field is currently active or selected, and they should be clear and consistent. You can use CSS properties such as outline, border, and box-shadow to style the focus indicators of your web form.

添加您的观点

6 Test and improve your web form accessibility and SEO

The final step is to test and improve your web form accessibility and SEO using various tools and techniques. For example, you can use the W3C's Markup Validation Service to check and correct any HTML errors or warnings in your web form. You can use the Web Accessibility Evaluation Tool (WAVE) to check and improve the accessibility of your web form. You can use Google's Lighthouse tool to check and optimize the performance, usability, and SEO of your web form. You can also use user feedback, analytics, and A/B testing to measure and enhance the user experience and conversion rate of your web form.

添加您的观点

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Mike Campbell

Former Senior Fullstack Engineer at Divvy
举报内容
You might not need a framework. Often times, when building forms, we jump to some package that has validation, "touch" and "dirty" props, and while there are cases that call for that level of interactivity, don't be afraid to store your form data in state, and just run validations on each render. Remix and Deno's Fresh has helped me fall in love with Native HTML Form API's and I highly recommend looking at how they use JS-less forms It can feel less cool to go vanilla, but you ship code with less/no JS, leading to faster load times, less bugs, and that is way cooler than a fancy tool. But, if you're building a ton of forms constantly? Absolutely use Formik or Final Form, don't be insane. It's just overkill for your site's login page.

已翻译

赞

Web Development

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What are the best practices for labeling and grouping web form elements?

1

2

3

4

5

6

7

1 Use semantic HTML elements

2 Provide clear and descriptive labels

3 Group related form fields with fieldsets and legends

4 Use appropriate input types and attributes

5 Ensure sufficient color contrast and focus indicators

6 Test and improve your web form accessibility and SEO

7 Here’s what else to consider

Web Development

给文章评分

感谢您的反馈

更多Web Development相关文章

更多相关阅读内容

What are the best practices for labeling and grouping web form elements?

1

2

3

4

5

6

7

1 Use semantic HTML elements

2 Provide clear and descriptive labels

3 Group related form fields with fieldsets and legends

4 Use appropriate input types and attributes

5 Ensure sufficient color contrast and focus indicators

6 Test and improve your web form accessibility and SEO

7 Here’s what else to consider

Web Development

给文章评分

感谢您的反馈

查看其他技能