How to Combine Design and Floating Labels to Create Forms on Web pages

Design and accessibility go handy when creating forms on web pages. Ideally, every input field requires a placeholder and an associate label. But, this may not be applicable from a design perspective because it can cause the form to look overly text-heavy. Floating labels, also known as labels-as-placeholder, are a popular design option for creating accessible and minimalist forms. Popular design systems where floating labels are commonly used include Material Design and Bootstrap.

Material Design Floating Label

To begin with, create an input text, a label, and the markup for the Material Design form. The screen reader will use this to communicate details on the form. Then use an accessibility pane tool to see how you can link inputs and labels in the form markup. Remember to use the (id) of the input and (for) attribute when matching labels with their related input fields.

Float Label

The label can be made to float whenever a user clicks the input. Do this by using + (plus) and (:focus) selectors. However, be sure to change the label's color, size, and position whenever the user is focused on the input. It is a technique that works perfectly, given that the label is just adjacent to the input field. If you place the label before the input, the method won't work because the + (plus) selector focuses on the next immediate element.

User Input Float Label

One fantastic feature of the floating label is that users don't have to focus on the input to float. Instead, it remains floated as long as the input has a value. To achieve this, users can use the required attribute and the CSS (:valid) selector in the HTML markup. Use the valid selector to determine if the input has a value or not. With this, the label will remain floated as long as the input has a value or is focused. But like any other application, using a valid selector has some drawbacks. Using it on an email will make the input invalid because the value won't be in an email format. But this can easily be solved using JavaScript. For more information click here https://maxschmitt.me/posts/material-design-floating-labels-in-react/.