Rune Madsen

Login Box

  • Save
Login Box login css form web pictos icons html5 gif

This is the login box for For this one, I was inspired by an input field Twitter has in one of the Bootstrap form fields with an @ in front of the field. I don't think they actually use it on the Twitter site, though.

For the entire site, I've taken it a bit further and added icons for every single input field (using Pictos), allowing me to get rid of non-placeholder labels for each form field, and easily convey the field's required content. These forms include, checkout, credit card, profile, contact form, etc. Example:
The "Remember me" box is label that's attached to the checkbox, making it easier to hit.

I've also extended all the grey header for each box throughout site with icons. I know the grey looks a bit dull on its own, but since it's an e-commerce site, I needed the products to stand out more than other site elements.

For input fields that require a bit more information and the icon isn't enough, I use a tip on hover just in case (for example, the site's credit card form where it's paramount the user understands every field).

keyboard shortcuts: L or F like