Example Post
Lately webmaster and web designer are obsessed about User Experience and how to improve it. Tasks such as reducing the website loading time or finding a good font combination are always in the to-do list. However we are forgetting about focussing on the elements where the real contact between the user and the website happens: the forms.
Designing pages and sections with contact forms properly is challenging because you have to guide your users through each field to get them filled correctly. Moreover, if the info added by the user doesn’t fit the field’s pattern, you should let the user know what he/she is doing wrong. And this has to be clear for all users, included non-tech visitors.
Fortunately, new HTML5 specs for forms have helped to improve the validation before sending the form without using server-side requirements nor JavaScript. By default inputs type like email or tel (telephone) use a pattern that checks that the info filled is correct and forms can be submitted when the user clicks on the submit bottom.
The key questions are: Could we improve this behaviour getting a live check? Could we also get an extra info about how to fill out a form if we get stuck? Does this help get a better UX? Yes to all, and we will do it with CSS.
Knowing CSS pseudo-class and HTML elements and attributes to improve a form
Let’s revise some CSS pseudo-class and HTML elements we are going to use in our demo. Some of them are very well-known but others have been added recently in the last CSS updates.
input and textarea
The classics. They will define the fields the users are going to fill out. The typology of input is defined by the type attribute in the HTML, and this is important, as we said above, for custom HTML5 browser validation
required
This HTML attribute can be used with input and textarea. It indicates that the field should be filled out before the form is submitted. It is very useful to let user know that we need that information, for example the email or the phone number.
The required attribute is directly related with two pseudo-classes we can use through our CSS to know if the input is required or optional. They are :required y :optional, vary semantic as you can see.
pattern
Another HTML attribute to check the information added by users. In that case we can build our own pattern or use one of the patterns by default. It depends on the type attribute. For example, if we use the email type, it will looking for an email string (with @ in the middle and a valid domain extension such as .com, .org or whatever.) The same for tel or url. Here you have the complete list of input type attributes.
However, the power of this attribute is that we can create our own pattern, excluding numbers for instance or any character we want to avoid. The pattern attribute requires a regular expression in order to work properly.
placeholder
The most useful attribute in this collection for UX. It helps user to understand what kind of info we are looking for. It can also display an example data that will disappear when the user starts filling out the input (typing a character) and not when the input is :focus.
::placeholder
Pseudo-element related with above attribute. It helps us style the placeholder, so we can change the text colour or other font properties to let users know that this is an example and not a real text.
Browser compatibility is good enough, however, we can add some alternative prefixed rules for each browser: ::placeholder, ::-moz-placeholder, ::-webkit-input-placeholder and :-ms-input-placeholder.
:focus
A basic pseudo-class that runs when the user is focusing an input or textarea. It is necessary that the user click on it or navigate with the keyboard to considerate the input as focused.
:valid
This pseudo-selector will let us know if the string added in the input is correct and check with the pattern we have set. So basically we can style the input if the info is correct.
:invalid
The opposite of valid. The question here is: What happens when no value is added to the input? Will it be :valid or :invalid? Well, the answers in that case depends on the required attribute. If it exists for that input and no value has been added, then is an :invalid element. Otherwise it will be :valid.
:placeholder-shown
The new kid in town. It is still in the draft of CSS level 4 specification, but the compatibility with browsers is quite reliable at this moment (except on IE and Edge).
This is a pseudo-class that runs only when placeholder is being shown. It means that it will be enabled when the input is not focused and when it is focused but the user has not typed any character yet.
So the possibilities here are thrilled. Now, we can know if users get stuck in one of the inputs. For example, if an user has clicked on an input but doesn’t know what to write, we can show a notice after 5 seconds that helps the user complete it, and all of this only with CSS!
Another possibility: the user is filling the input, but 30 second has passed and the input is still invalid. Maybe the user has not understand what pattern we are looking for. Time to help with a message or something similar!