Styling Forms Like A Pro With Kendo UI

If you are like me, then nothing makes you feel like more of a failure in life than CSS. There was a GIF being circulated a few weeks ago that sums up how I feel about CSS so poetically.

I'm not saying that there is anything wrong with CSS as a specification. There are many people who can do unbelievable things with it. For me, it's just never clicked. I've been writing CSS for a long time and studying it for a long time as well. It just doesn't seem to be getting any better.    This seems to be especially true with forms.  As a web developer, I tend to create a lot of forms and it's always a struggle.

Fortunately for me AND you, Kendo UI is built on top of a very modular CSS framework that you can take advantage of to match the professional styles of the Kendo UI widgets, which were created by talented designers and CSS artists. The benefit of doing this is that you get a consistent look and feel for your site, and all your elements will change when you change the theme.

HTML Forms

When creating forms, it's common to have DropDowns, DatePickers, AutoComplete's and the like. It's also quite common to just have your own free text inputs. Without any styling, a typical form might look like this:

View Example

Yikes. The widgets all look like they belong, but those first name and last name textboxes and that button look really plain and frankly out of place. This gets even more pronounced if you change the theme.

Lets take a look at how you can use the Kendo UI style framework to make this form pretty and consistent no matter which theme you choose.

Inputs And Buttons

These are really easy to fix. Just add the "k-textbox" class on to any inputs, and they will immediately look and feel like they fit right in with the current theme. For the button, just add a class of "k-button".

View Example

Icons

Icons are a fantastic way to add some character to your UI. However, they can be a pain as you try to deal with bringing images in, sprite sheets and the layout issues you have when trying to put icons next to text or inside elements like buttons. Kendo UI exposes the same icon framework that is used in Kendo UI Widgets for you to use however you want. No additional files are required on your part. Kendo UI provides two different sizes of icons and there is a complete list with previews on the styling demos page.

Once you note the name, you just need a span. The span needs to contain two classes

• k-icon - tells Kendo UI that we are about to specify an icon here
• icon class - this is prefixed with k-i- and then the name of the icon you want to use. For instance, if you wanted to display a '!' icon, your markup would look like this:

<span class="k-icon k-i-note"></span>

You can of course combine icons with other elements. Adding an icon to the submit button involves using an anchor and then adding the span with the icon in front of the text. The result is a perfectly aligned icon and text.

<a class="k-button" data-bind="click: submit">
  <span span class="k-icon k-i-tick"></span> Submit
</a> 

View Example

Icons And Inputs

We could even extend the inputs on this page a bit using icons. If you like how the DatePicker has the button that is attached to the right side, you can make these sorts of inputs yourself. For instance, you might want to add and 'x' button to the first name and last name inputs that allows them to easily be cleared out on a mobile device.

You can wrap your inputs in a span and move the k-textbox class out of the input and onto the span. It will still style your input correctly. Having an icon means adding a space for it on the left or the right side. This is accomplished by adding a class to the span called k-space-right for an icon on the right, and k-space-left for an icon that should be on the left side of the input. Then add your input and create a button just like in the previous example, but without the text.

<span class="k-textbox k-space-right">
  <input id="lastName" type="text" />
  <a href="#" data-bind="click: clear">
    <span class="k-icon k-i-close"></span>
  </a>
</span>  

View Sample

If you wanted the button on the other side, you would specify the k-space-left class on the span and then move the icon on top of the input.

Panels

You can style sections of your page to provide a border and background based on the current theme. This is helpful for providing info, success or error messages that have a color that draws attention to them. To create a style block, use a div with the k-block, class and then specify either the info-colored, error-colored or success-colored style.

<div class="k-block k-info-colored">
  <strong>Note: </strong>Please fill out all of the fields in this form.
</div>

View Example

Styling The Form Container

You can also use the panels to style your own form. In this case, I can wrap the form in a div with a class of k-block. This will put a border around the form and give it a background color based on whatever theme is currently applied.

View Example

The k-block element works great with k-header which will create a header block at the top where you can put in header text for the form. It's just another way to make your form look really pretty without having to do much heavy lifting at all.

<div class="k-header">Sign Up Form</div>

Adding Your Own Style Tricks

Now that you have all the pieces in place, you can override the styles just a bit for your own liking.  Special thanks to Alex Gyoshev from the Kendo UI team for providing me with these two:

100% Width Form Fields

By default, the form fields are quite small in width. You probably are going to want them to fill up their container to make the form look more uniform. You can set the width on the form (or container), and then add in some styles to handle the textboxes and widgets. In my case, I wrapped in form in a div with a class of "signup" to avoid styling the form element itself in case I have other forms in my site where I don't want these same styles. As a general rule of thumb, avoid styling tags as that can come back to bite you.

.signup {
  width: 80%;
  margin: 0 auto;
}
.signup .k-textbox, 
.signup .k-widget {
  width: 100%;
}

Times New Roman Is Ugly

By default, your browser will give you a serif font that looks pretty awful. You can safely change the font on your page to a sans-serif by specifying a font-family

body {
  font-family: Tahoma, sans-serif;
}

Tahoma maps to Geneva on Mac

Putting It All Together

Here is a full demo form using all of the techniques that are discussed in this post. Cycle through the different themes to see how it looks with different colors and styles.

For more information on styling with Kendo UI, make sure you check out the styling demos, as well as the documentation on the CSS classes.

Download Kendo UI today and start building better looking applications using widgets, themes, and the convenient CSS that Kendo UI exposes to make you look like a professional designer, even if in reality you are more like Peter Griffin trying to open the blinds. Nobody has to know!