Design Modern HTML Forms

The word “modern” gets thrown around a lot in UI design. I feel like it often gets misinterpreted into meaning whatever you want. To add to the confusion, a quick look in the dictionary defines modern as.

Modern: of or relating to the present or recent times as opposed to the remote past.

The issue here, is that the present soon becomes the past. So when we get to modern, it becomes the remote past rather quick. So modern turns into fad and fads die into oblivion. My take on modern design are lightweight and nimble elements designed for radical change. This means keeping the implementation minimal while retaining its intended purpose. The way HTML forms look today will change, so we want to leverage the default without looking too boring. Instead of building on top of it, why not knock out some of it? Instead of adding more and more, why not subtract from it? By subtracting, we stay lean and agile. If you get tired of staring at the default HTML forms, I welcome you to take a look. It may spruce up your web HTML forms and make them pretty slick. This is by no means a once for all solution to web forms. If you are happy with what you have, by all means keep it. My intention is to provide a simple alternative.

Basic structure

The basic HTML is as follows:

<form action="">
    <label for="textbox">Textbox</label>
    <input id="textbox" name="textbox" type="text" />
    <label for="select">Select</label>
    <select id="select" name="select"></select>
    <label for="textarea">Textarea</label>
    <textarea id="textarea" name="textare" rows="10"></textarea>
</form>

Face it, when was the last time you enjoyed working with HTML forms? I’ve simplified a lot of the nuances to show the basic technique. Labels get a for="id" to associate them with an element. Users can hover over the label and the browser knows you mean the form element. Labels create semantic HTML so I recommend use proper labels. Each element gets its own row to keep to a mobile first approach. The DOM structure itself is flat so I don’t have to work hard styling form elements. Keeping it simple, will take some of the suckiness out of web forms. As a UI designer, your job is to deliver value not make your life hard. Clients will appreciate simple forms if they are able to get through it in a short time. In truth, no one likes filling out forms, no matter how pretty they are. When you sit at the doctor’s office, for example, do you sit back and stare at the copious amount of paperwork? Or would you rather not to think about the fact that you are filling out information? This is the mindset you must have as a web designer when working with forms.

Textboxes

Here is what the textbox looks like in Edge:

To achieve this, I have knocked out side and top borders. The label sits nice on top and doesn’t infringe on the textbox. Textboxes get used for many things in the modern web. They are numbers, dates, phone numbers, etc. The line at the bottom gives it a look and feel that is close to a form on paper. This gives it the necessary affordance to make it functional. Users are only concerned with two things, the what and where. The what comes from the label at top. The where comes from the affordance which is a single line as the bottom border. This is enough aid so folks can fly through these without giving it much thought. Imagine users focusing on the content and able to go through it pretty quick. The CSS3 for this is not complex at all.

label {
    display: block;
}

input[type=text] {
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    display: block;
    transition: border-bottom-color .5s;
}

Borders get wiped out using CSS. The label on top has a display: block so it takes up the entire row. Notice there is a transition property in here. The point is to make the element come alive when folks are clicking on the label or the element. To bring it to life:

input[type=text]:active,
input[type=text]:focus {
    border-bottom-color: #5c1916;
}

Clicking on the element will change the border color to make it come alive. The transition property takes care of adding a nice animation when users focus on it. The transition animates the border color in half a second. This works on all modern browsers. Each browser has its own interpretation of what texboxes look like which is consistent. This frees you from writing code that it tailored for each device. The necessary affordance lets them know it is for filling in.

Dropdowns

Here is what the dropdown looks like in Edge:

Good news everyone, the CSS is the same. So we can leverage what we have for textboxes.

select, input[type=text] { ... }
select:active, select:focus,
input[type=text]:active,
input[type=text]:focus { ... }

I did the same to pseudo-classes active and focus. By leveraging existing code, we get a lean and agile solution. Each browser vendor will interpret the down arrow in the dropdown in its own way. Firefox 43, for example, puts an outline around the down arrow whereas Edge does not. The specific affordance is up to the browser to decide. You can dive into vendor CSS to tailor the down arrows. My recommendation is to keep it simple. The browser decides how it wants to interpret all your CSS anyway. And, you can't guarantee that future versions will not make your CSS hacks look like crap. Vendor prefixed CSS are not part of the open standard, and for good reason. The standard embraces the ebb and flow of the web. With this, I am designing UI elements best suited for future change. Whether that change comes from my code or future browsers. The best part of it is, we get all this awesomeness without doing much work.

Textareas

Here is what the textarea looks like in Edge:

The textareas are not so different. I like to leave the left-hand side alone to show the area is for filling in. You can choose to it knock it out if you like. This is the extra CSS:

textarea {
    font-family: consolas, inconsolata, monospace;
    overflow-y: auto;
}

Because I’m a programmer, I like to use a monospace font in textareas. Some browsers like IE show the right scrollbars by default. You can disable those by setting the overflow property to auto. All the CSS techniques I’ve mentioned, apply to textareas too. Textareas are consistent across all the modern browsers so no need to worry. The only minor difference is affordances appear different as you focus on the element. Firefox 43, for example, applies a different border color than Edge. This specific behavior is likely to change in future browsers. The goal is make the textarea come alive, and it fulfills this in both Firefox and Edge.

Conclusion

So there you have it, a simple alternative to web forms. Once upon a time, I hated working with these stupid HTML forms. But I’ve come to embrace the “ebb and flow” of the web. The key is to reduce, not add more convolution. I have not been able to come up with alternatives for checkboxes and radioboxes. I feel these are atomic enough to knock anything out of them. But, I am open to ideas. If interested, you may checkout this JSFiddle. Feel free to chime in with more ideas!

The post Design Modern HTML Forms appeared first on BeautifulCoder.NET.