5 Best Practices For Better HTML Forms

•

🔷 5 Best Practices For Better HTML Forms A Thread🧵 👇

📌 Forms are an essential part of any UI. 📌 It can be intimidating to work with HTML forms. 📌 They don't only use a few specialised HTML elements; they also blur the barrier between static material and user involvement.

📌 Forms can be complex and even irritating for users; they frequently interrupt a user's main focus and direction on a page: they want to buy that gift or try out your new web app, not give you their mailing address or create yet another password.

📌 These pointers will make form development and design easier for you as a developer or designer, as well as for your users.

1️⃣ Label fieldset with Legends → It's hard to justify using a fieldset without giving it a name. → We may improve the code above by titling our fieldset with the legend element.

→ The legend will arrange itself over the border of the fieldset element, which has a border by default.

2️⃣ Use the label Element → While there's nothing wrong with using a span to mark the inputs, the label tag is a natural fit for them.

3️⃣ Name Your Inputs → Each input element must have a name if you wish to transfer form data to a script; if you're using PHP, these names will become the keys of a superglobal array, commonly $_POST or $_GET.

4️⃣ Give Labels the for Attribute → The for attribute allows you to associate a label with an input. → The id of the input you wish to tie it to should be the same as the value of for.

5️⃣ Use optgroup to Categorize Options → The optgroup is a little-known element that will indent and title choices. → It is important to note that the label attribute is essential.

Thanks for reading this thread ❤️ If you like it , make sure you: 🔷 Like the tweet 🔷 Retweet the first tweet ⚡ For more content , follow: @MrunayU