Emore Ogheneyoma Lawrence

Posted on Jan 8

Enhancing Form User Experience with CSS: Real-Time Feedback Techniques for Better User Interaction

#css

Introduction
Prerequisites
CSS Pseudo-Classes for Real-Time Feedback
Conclusion

Introduction

Imagine this: You're completing a registration form with multiple fields. You push yourself to finish it, only to be met with an alert that says, The value entered input field X is invalid or you see an error message slightly below the input field(s) with the error(s). While these methods do provide feedback, there are more user-friendly ways to enhance the experience.

The ultimate goal of any software is to simplify life for its users, and feedback plays a crucial role in achieving this. Providing immediate, clear feedback improves user experience. In this article we'll explore how CSS can deliver real-time feedback, making your forms more responsive and user-friendly.

Prerequisites

To follow along with this tutorial, all you need is a basic understanding of HTML and CSS. That's it. Let's go!

CSS Pseudo-Classes for Real-Time Feedback

To show how CSS pseudo-classes can provide real-time feedback in forms, we'll use this HTML and CSS code below. The code features a few basic input fields to get us started.

<form>
    <div>
        <label for="name">Name</label>
        <input 
            type="text" 
            id="name" 
            placeholder="Name"
            required
        />
    </div>

    <div>
        <label for="email">Email</label>
        <input 
            type="email" 
            id="email" 
            placeholder="email@gmail.com"
            required
        />
    </div>

    <div>
        <label for="password">Password</label>
        <input 
            type="password" 
            id="password" 
            placeholder="6+ characters"
            required
            minlength="6"
        />
    </div>

    <button>Submit</button>
</form>

Here is the CSS:

form{
    padding: 1rem;
    width: 50%;
    div {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;

        label{
            font-weight: bold;
            margin-bottom: 5px;
        }

        input{
            padding: 10px;
            border-radius: 5px;
            outline: 2px solid black;
        }
    }

    button{
        padding: 10px 1rem;
        border-radius: 5px;
        cursor: pointer;
    }
}

Here's what we have at the moment:

So the pseudo-classes we will focus on are :valid, :invalid, :user-valid, :user-invalid, :placeholder-shown, :focus

So let's start with the :valid pseudoclass

we can use this directly in our CSS file to target the input element and this checks if the input in question is Valid i.e contains the required element

Here's an updated snippet of the CSS code containing the code:

 input:valid{
   outline-color: lightgreen;
 }

Here we are changing the outline-color to lightgreen when the user types in valid(acceptable) data in the input fields

While the :valid pseudo-class helps users see when their input meets the required criteria, the :invalid pseudo-class is equally important for improving user experience. This pseudo-class allows you to style input fields that contain invalid data.

The :invalid pseudo-class is triggered when the value entered into a form field does not match the expected type or format, examples being missing the @ symbol or a password that is too short or below the minimum length for the password field

Now let us add the :invalid pseduo-class to our existing CSS code

input:invalid{
  outline-color: red;
}

Here's the output of using the :invalid class:

This is expected because the input fields have the required attribute and they are at the moment.

We obviously don't want this, but then CSS has yet another pseudo-class we can use in this case: the :user-valid and :user-invalid pseudo-classes

Let us update our code to use :user-valid and :user-invalid pseudo-classes

 input:user-valid{
   outline-color: lightgreen;
 }

input:user-invalid{
  outline-color: red;
}

NB: :user-valid pseudo-class gives feedback to the users when they have filled the input field and are moving to another input field. (restructure this)
It works the same way for :user-invalid pseudo-class. When you fill in a value and then remove the entered value, the red colour from the :user-invalid pseudo-class is triggered.

Here's how it looks

Note: :user-valid and :user-invalid do not currently have wide-range user support for all browsers at the moment. You can choose to use it in personal projects but be careful where you use it

Even with the existing caveat of using the :user-valid and user-invalid, there's another pseudo-class we can use to avoid the browser support issue, the :placeholder-shown.
The :placeholder-shown is used with a combination of the :valid pseudo-class and a :not() pseudo-class. I have an article on using the :not() pseudo-class. You can read it here

input:not(:placeholder-shown):valid{
  outline-color: lightgreen;
}

input:not(:placeholder-shown):invalid{
  outline-color: red;
}

In the code above, the outline-color is triggered if and only if the placeholder-shown is false. It only runs if the placeholder is not there(if a value has been entered into the input)

Here's how it looks when tested(run on the browser)

Now, looking at the :placeholder-shown in action in the picture above, you notice that on the Email Input element, the red outline is activated immediately the user starts typing in, and it changes to red when the criteria is met, i.e the user put in a proper email format.
Now the issue is that some users don't like this and it isn't user friendly as users will definitely have to type in a bunch of characters til they get to their correct email word.
So what do we do when the CSS rule we write is picking the invalid styles due to the reason above, we use the :focus pseudo-class.

Add the following code to your CSS:

input:focus:invalid{
  outline-color: orange;
}

Now let's check and see how it is on the browser

Conclusion

In this article, we have learnt about pseudo-classes that help to make our forms more user friendly. Thank you for reading to this point. I ask that you drop a like and share this article with your peers who will benefit from this.

You can check the codebase here

What are your thoughts on this article? Do you know other pseudo-classes we can use to make our forms give immediate feedback to users in CSS? Feel free to share your thoughts in the comments section below.

Top comments (10)

Okoro chimezie bright • Jan 8

Nice work thanks for sharing.

Emore Ogheneyoma Lawrence • Jan 8

I'm glad you found it useful

Wizard • Jan 8

Nice inbuilt techniques, thanksmfor reminding this again

Ankit Jain • Jan 8

Great Work.

leob • Jan 8

Thanks, I never heard about the :valid and :invalid pseudo-classes!

... and, it would be of limited value if the only thing you could do with it was checking whether the required attribute is met, or whether an input type like "email" has valid input - however, browsing the MDN I see there exists a Constraints API which allows you to implement custom validations:

developer.mozilla.org/en-US/docs/W...

which right away makes this a LOT more useful ...

Pretty amazing how much you can accomplish these days just with web/browser standards (standard web APIs) - although most devs (including myself) are hardly aware of it, and tend tor reach for frameworks like React or Vue instead ..