Hey i got an idea for style input element with label

1

What do you think guys?

is great style?

https://jsfiddle.net/273ntk5s/2/

input with label

2

BUMP! No one like it? hm

3

Don’t misconstrue this as being mean… but it’s a bad UI/UX idea.

Your CSS are absolutes, what happens if there’s a paragraph before the form instructing the user what to do? Your design falls apart.

idea.png854Ă—201 18.5 KB

Also, “Your email address” shrinking and occupying the same space as the input field, well… it’s just clutter.

Why not just use the placeholder property? i.e. like this

<input type="text" placeholder="enter your email address">

As soon as the user starts typing inside the field, the prompt “enter your email address” disappears.

4

And for people with disabilities/eyesight/blind problems, it doesn’t conform to web accessibility guidelines.

You need a label, linked/tied to the input field so blind people with screen readers will know what label/prompt corresponds to what input field.

Kinda like this:

<label for="username">Enter username: </label>
<input type="text" id="username">

Using this site to check your site/design is a good idea.
http://wave.webaim.org/
https://webaim.org/

For example: Here’s the report for a site I created for a client.

2 Likes