Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead. Some people assume float labels are best because Google’s Material Design uses them. But in this case, Adam Silver recommends using conventional text fields which have the label outside the input (to tell the user what to type), and a distinct border all the way around (to make it obvious where the answer goes).
Read more…
Working with native HTML Form Controls has been such a pain point for web developers, from styling to extending them, the limitations are so great that countless dev hours have been spent recreating them. But why are form controls so difficult to work with?
In this article, Stephanie dives into the past by going back to the beginning of HTML and tracing the evolution of form controls through to the present and the current state of working with them. She shares her thoughts and takes a glimpse at what the future holds for working with these essential pieces of the web.
Read more…
Netlify Forms is a form handling feature that receives submissions from HTML forms automatically. In this article, Zara Cooper will explain how you could use an Angular reactive form with Netlify Forms. Since Netlify Forms only work when deployed on Netlify, she’ll also illustrate how to deploy your app on Netlify Edge.
Read more…
Forms are an integral part of how users interact with our websites and web applications. Validating the data the user passes through the form is a critical aspect of our jobs as web developers. However, it doesn’t have to be a pain-staking process. In this article, Nefe Emadamerho-Atori will show you how Formik handles the state of the form data, validates the data, and handles form submission.
Read more…
From a user’s profile picture to other media assets, data collection and storage to cloud services through file uploads have become an essential feature for most modern applications. Today, Nwani Victory will show you how to file uploads that can be implemented in a GraphQL application. This article will be beneficial to developers who are interested in or considering using Google Cloud Storage for file uploads in their React and Nodejs GraphQL application. While this article is not an introduction to GraphQL, each GraphQL concept used within this article is explained and referenced for better understanding.
Read more…
Ionic Framework provides first-class support for building fast and mobile-optimized applications for any platform using React. In this tutorial, Jerry Navi will show you how to build forms using Ionic React’s UI input components in this tutorial. You will also learn how to use a library to help with detecting form input changes and responding to validation rules. Finally, you will learn to make your forms accessible to screen readers by adding helpful text to your inputs’ ARIA attributes.
Read more…
In this episode of the Smashing Podcast, we’re talking about inclusive components. What does it mean to be inclusive, or let alone a component? And what has that got to do with accessibility? Drew McLellan talks to Smashing author Heydon Pickering to find out.
Read more…
The user experience from a developer point of view is seriously lacking. We don’t get any helpful warnings when we misspell words, misuse APIs or, well, anything, really! We’ve already seen how we can implement the basic parts of our validation library, and how to add all the nice-to-have features we needed. In this final part of this series, Kristofer Giltvedt Selbekk will focus on improving the user experience for the people that will use our validation library: the developers.
Read more…
In Kristofer’s previous article, he explained how the basic parts of a validation library can be implemented. While the next part will focus on improving the developer experience, today’s article will focus on adding more features to what was created in Part 1. Kristofer will continue implementing the validation library you started implementing in the previous part of this series. These are the features that are going to take us from a simple proof of concept to an actual usable library!
Read more…
Ever wondered how validation libraries work? In this article, Kristofer Giltvedt Selbekk will tell you how to build your very own validation library for React step by step. You will go through the process step by step, and you’ll find CodeSandbox examples as we go along. By the end of this post, you will know how to write your own validation library, or at the very least have a deeper understanding of how other libraries implement “the magic of validation”. The next part will add some more advanced features, and the final part will focus on improving the developer experience.
Read more…
