Top 14 Form Usability Tips

11. Use design to help the user

Use large font in text fields

Email address
default browser font-size

Email address
CSS font-size

input[type="checkbox"] {transform:scale(1.5);margin:4px;}
input[type="radio"] {transform:scale(1.5);margin:4px;}
input {font-size: 1.5em;}

beware IOS - if font size > 15px then IOS disables autozoom

Beef up ALL borders - PLEASE!




Luminosity Brighness of Enabled/Disabled Form Controls using default browser styling - Chrome, Safari, Firefox FAIL Contrast Check ;(

Change the label cursor





label { cursor: pointer; }

Highlight active and/or completed fields


label

Email:
no label


Required

input:focus, input:hover {background:#FFFF00;} (highlites control from keyboard or mouse)
:required {border-left: red double 8px;}

An Ultimate Guide to CSS Pseudo-Classes and Pseudo-Elements

Distinguish primary and secondary actions

YES!! Primary action - Make it BIG and different. Make it FIRST!


 

noooooo.....


   

 

You can easily style the following:

Style mostly. Your results may vary

No style

Resources for styling forms

Accessibility of Styled Form Controls

MDN HTML forms

Advanced CSS-Only Form Styling