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.
Read more…
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.
Read more…
Netlify Forms is a form handling feature that receives submissions from HTML forms automatically. In this article, we’ll cover how to use it with Angular reactive forms and how to deploy the finished app on Netlify’s hosting platform, 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, we’ll learn 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. In this article, you will learn how file uploads can be implemented in a GraphQL application.
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…
