September 10, 2017

Form UI Basics


When it comes to forms, a UI designer must use caution when styling for the sake of all users. I created a basic form with the help of jQuery UI and played around with some field designs. The following styles I found may be useful depending on the site style and form purpose.

The use of tabs

I don’t see tabs in forms all that much. However to save loading multiple pages for different contact methods or information, tabs may be the way to go.

Use of padding when cell for inputs

Some people would use background colors, borders, and even text-shadow when either hovered or focused inputs. I personally always liked a transition effect by expanding the padding.

Enable/Disable radio and checkbox

When you don’t want to use the browsers default icons for radios/checkboxes, jQuery UI has designed an alternative style that uses the label to display what is checked. My design is similar, but with the added feature of slightly shaking the field using is focus pseudo and adjusting the padding.

Submit and Clear never should be similar

If you are going to use a clear form button, it would be best to isolate the two from each other. Preferably, use straight text for a function that may not often be used.

The UI style is pretty basic and should be considered more of a template than anything.

Click here to view on CodePen

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Stjepan Erdeljac

Junior web developer starting a web blog on my progress in web design and showing some techniques and ideas for myself and other that may find useful.

Latest Posts By Stjepan Erdeljac


Forms, None


, , , ,