Stop Forgetting “Email” Text Input Types

This is for all of you CSS authors out there.

Just about every blog has text input fields on it somewhere. From contact forms to email opt-in forms to comment forms, input elements are just as common as links.

Just in case you didn’t know, there’s more than one type of text input field.

While most of us will never need to worry about the majority of them, I do want to make sure we stop ignoring the email input type.

Here’s what regular, barebones text input HTML would look like:

<input type="text" placeholder="Text Input">

Here’s what it would look like for an email field:

<input type="email" placeholder="Email Input">

Simple stuff, right? Let me make a couple of quick points, though.

First of all, I am not here saying that the email type input needs to be used. I’m saying that it is used by many and CSS authors should style for it.

Secondly, email text input types do indeed serve a purpose. An example would be keyboard configuration on certain mobile devices based on the type of input field being used.

For instance, the “@” symbol oftentimes becomes a front keyboard key if the input field is of the email type. That makes sense.

With that understood, my problem is that I see a lot of web forms that look like this:

Screen Shot 2014-01-12 at 6.33.49 PM

What’s wrong, you ask? Check out the difference between the “email” text input field and either text input field above or below it.

The email field has an inset box shadow and it’s missing the rounded corners. It doesn’t look like much of a difference, I know. But I noticed it and the differences could easily be more aggressive on any given website.

Now let me show you why I say we’re forgetting email input types.

It has become pretty common to use attribute selectors with our CSS selectors. They’re cool and they help with specificity. So you’ll see this a lot:

input[type="text"] {
    ...
}

This is great because it helps us specifically target text input fields without altering submit buttons that may also use the same HTML but with the submit input type.

The problem is that too many CSS authors stop there.

When it comes to input elements, they will account for text input types and submit buttons but completely forget about email input types.

Next thing you know, someone installs an opt-in form on his or her design that captures a name (type=”text”) and an email address (type=”email”) and displays a submit button.

The name field will be styled, the email field will look like crap, and the submit button will be style. No good.

Get in the habit of targeting email fields with your CSS selectors write along with plain text fields… like so:

input[type="text"],
input[type="email"] {
    ...
}

That way the two will always display the same whether you used email input fields, a third-party script did, or the user. It shouldn’t matter.

You can also take it a few steps further, which I’d actually suggest, and target some of the other common text input types as well.

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"] {
    ...
}

The bottom line is that unless it’s your website, you don’t know what kind of HTML will be used on it in the future. If you’re going to style text input elements by default, target them all.

At the very least, target email along with text. Again, at the very least…

Author: sdavis2702

I'm a simple guy. I like to code and I like to workout. I'm all about growth and just about everything else is nonsense in my book.

Leave a Reply

Your email address will not be published. Required fields are marked *