40 CSS Web Form Style Tutorials

Feb
6
2009

When developing a project it’s important to have a good css form input structure throughout, most commonly used css forms will tend to be Login, Register and user Profiles. If you have taken the time to develop a custom template for your project more often than not the default appearance of forms you have created are not ideally suited to you designs overall look and feel. We have gathered together a great list of tutorials that should have your new forms looking great or breath life into your existing form design.

Form Tutorials

1. Style Web Forms Using CSS
In this article we’ll look at how you can use CSS to create attractive and usable forms.

2. Fancy Form Design Using CSS
This chapter, which is fresh from The Art and Science of CSS, will explore the ways in which you can design a great-looking form, and provide you with the necessary code, which we’ll work through together.

3. Customizing input boxes (text and others)
This tutorial will show how to change the color of an input box or textarea when they are active. This is very simple and is done using CSS.

4. Prettier Accessible Forms
I wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. So here it is—my attempt at portable, accessible forms.

5. Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Lots of really great information on form layouts and optimization.

6. CSS-Only, Table-less Forms
Most of the CSS-only, table-less forms available suck. So, not wanting to stoop to mediocrity, I decided to take on the task of coming up with something better. This is the result of my efforts. It works in Win/IE6, Firefox v1.0+, Win/Opera v8.0, has minor layout differences in Mac/Safari v1.0.3 and Mac/Safari v1.2, and is usable but fairly buggered in Mac/IE5.2.

7. CSS Tableless Form
This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form.

8. Stylish submit buttons
Most people would concur the default look of submit buttons is rather unattractive. Using CSS and a nice gradient background image, it’s easy to transform a form button from a duck to a swan.

9. Forms markup and CSS – Revisited
Earlier this year I posted an article on a CSS-based form template, originally done for the Sahana interface. It was modified based on the feedback I received from the readers who stumbled upon the article, and the final version made it to the Sahana system. I have come to realize certain shortcomings of that template, hence this modified version.

10. The Form Assembly – Form Layouts
A CSS Stylesheet Collection for Web Forms.

11. CSS Styling of forms, Stu Nicholls
Stu Nicholls demonstratives one of our favorite fun form layouts.

12. Semantic Horizontal Forms
reproduce the registration form at http://www.squarespace.com/signup/ in a semantically correct way with fieldsets, legends, labels and some CSS styling.

13. Trimming form fields
Web forms often ask visitors for non-essential information, but long and complicated forms can seriously hinder the e-commerce sales process. Wouldn’t it be cool to give users the option to hide these optional fields at their own discretion, and with a clever use of Javascript, the DOM and some CSS we can!

14. Badboy Niceforms
Nice rounded and apple like forms layout.

15. Functional Pretty Forms
Forms have been a rough spot when it comes to style. There’s just only so much you can do; the browsers just don’t allow the kind of styling I’d like. The issue is often discussed, and a nice demonstration of the problem can be found over at Roger Johansson’s site. There have also been a few solutions attempted. Until I really started working on this, the best solution I was able to find was at badboy media. But there were problems with that solution, so I went about finding my own way.

16. Subtraction: Free Form for All – Standardkonforme Online-Formulare
All of the blood, sweat and tears that I put into designing that form in XHTML and CSS last week is coming to some good. After much continued fussing, I finally got it to render reliably and consistently across several major Web browsers, so at the very least, my labor satisfied the challenge at hand. But, having heard with near unanimity the general frustration that people feel about forms, I thought I’d do the civic thing and release a genericized version of my work — and let others freely borrow, steal and/or adapt it for their own needs.

17. Form Layout Templates
As the unwanted orphan of web pages, forms are neglected by many and designed by few. Most people are content to put in some text fields, some bold text and a submit button. I’ve come across quite a few tutorials on how to make forms as eye-achingly colourful as possible, and on how to customise form widgets in ways that Safari promptly ignores, but I can’t find any articles telling you how to use semantic, accessible code along with CSS to make better form layout. Layout is where most of the problems lie with forms – grouping objects, labeling fields, helping the user cope with the amount of information that they have to fill in. The only article I could find relating to Standards and form layout was a rather oldish Eric Meyer throwback. So, as a service to the web design community, I have journeyed into the foul depths of forms for the last few days, and come out all the more wiser. Here is the tale of my travels …

18. Form Help without Popups
Thrusting new windows upon visitors of your site is frowned upon, as it goes against device independence by assuming a windowed environment. One situation where developers feel that a new window is appropriate is with web forms. If the visitor requires help on a form field, a new window saves the visitor the trouble of having to leave the form, and possibly losing the data they have entered. This article illustrates a scripting technique to get around the problem without having to open a new window.

19. Fun with forms – customized input elements
Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility.

20. Styling Form Fields
As long as I can remember, forms have always been problematic. They need to be short but complete, good looking but not confusing, informative but not cluttered.

21. Clean and pure CSS FORM design
It’s simpler and faster than use only CSS property “to simulate” a table structure. In any case, for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.

22. Applying CSS to forms

23. Enhance your input fields with simple CSS tricks
We’re all trying to build an effective and good looking web forms. But there are always a new challenges. If you read my previous articles on how to build a better web forms, you could have noticed there are so many details. Label positioning, context highlighting or justifying elements. But, with just a few simple CSS tricks you can make a usual, boring web forms more effective and exciting.

24. Form Highlighting Redux
It seems the form highlighting effect I was experimenting with ended up being fairly well liked overall, so I thought I’d write up an explanation of how this was done, and how you can implement it on your own sites, if you wish.

25. Formal Weirdness
As I described and tweaked my version of reset styling, a fair number of people asked (with varying degrees of politeness) why I didn’t just use a universal selector instead of that big ugly grouped selector. I said that I wanted to avoid styling form controls (inputs, textareas, and so on), and the only way to do that, given the state of selector support in today’s browsers, is to list all the elements I want to reset while leaving out those I don’t want to touch—like all the form controls.

This led to a fair number of questions as to why I’d bother avoiding form controls, and I said it was due to their “inherent weirdness”. By this, I meant that form controls are impossible to describe with current CSS; and if they were treated the way CSS says they should be, we’d all hate the results. Furthermore, the handling of form control styling is going to be a very unstable branch of our field for the foreseeable future. Herein, I scratch the surface of this entire mess. Fair warning up front: this is going to be a long one. Also, as Bette Davis once proclaimed, buckle your seat belts: it’s going to be a bumpy ride.

26. Getting Fieldset Backgrounds and Legends to Behave in IE
I’m sure someone has posted on this issue before I just haven’t found an answer I’m looking for. Jeff Croft has a close answer, but he is trying to solve a different problem. I built off of his exploration for this solution. The “problem” occurs when you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color.

27. Pretty Up Your Forms with CSS
A nice simple and effective form styling tutorial.

28. Push my button
If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can remember. The few times it actually did get some attention, the lowly button was used and abused by the DHTML crowd—forced to accept obtrusive inline event handlers and other such nefarious crimes against semantic markup.

29. reForm: CSS Form Design Template for Any Layout
The reForms technique is a CSS and Javascript solution I’m working on for form design issues. Although it isn’t complete, I’m providing a few code snips from the CSS and HTML that may be useful to other developers.

30. Rediscovering the Button Element
Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.

31. Showing Good Form
arlier this year, I forget exactly when (it’s been a good year), I was building a client site that needed widgets. Building this was a challenge not just in CSS, but in choosing the proper markup – how should such a widget be constructed?

32. Simply Accessible
Designing for accessibility is not just a technical endeavour – like most other pursuits on the web, it involves creative problem solving and experimentation. In this context I mean that we are designing when we produce solutions that are built with intent – they are well thought out and created to be accessible at many levels and (generally) don’t compromise aesthetics and usability.

33. Stylish Buttons
Consider, if you will, the lowly form button…the familiar, dreary workhorse of online forms: Not much to look at, are they? Until recent versions of IE and Mozilla, buttons were simple slabs that looked like bricks in a polished design. Now they’re at least rendered with rounded corners, and with a shadow and rollover effect. Still, you’re stuck with anonymous black-on-beige, and the size is almost always too big for the page. If you’re going to the trouble to control everything else, why stop when it comes to form buttons?

34. Styling form controls
A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems. The short answer is probably disappointing to many: you can’t. Some also argue that you shouldn’t, since doing so may reduce usability. My opinion on that is that light, sensible styling of some form controls can be OK, as long as you don’t overdo it. But what if we don’t think about usability, and just want to see what actually can be styled? I’ve made a few examples that make up a longer answer to the question about styling form controls.

35. Styling even more form controls
This is a follow-up to my previous post about Styling form controls. For some background info and comments, you may want to read that post. In short, this is a reference that shows how differently form controls are rendered by different web browsers and operating systems. It also shows that little can be done to make form controls appear the same across browsers and platforms.

36. Styling form controls with CSS, revisited
Over two years ago, in September 2004, I posted an article called Styling form controls. My intention with that article (and its follow-up, Styling even more form controls) was to show that attempting to use CSS to make form controls look similar across browsers and operating systems in an exercise in futility. It simply cannot be done.

37. Stylin’ Forms
Take out your designer’s scapel and prepare to give forms an extreme makeover without tables. Slight exaggeration, but adding a splash of color and changing the layout dramatically changes a room and the same concept applies to forms. The form code is also accessible.

38. Styling Form Fieldsets, Legends and Labels
Quick and simple form tutorial.

39. The Form Garden
A CSS Stylesheet Collection for Web Forms.

40. Tips For Creating Great Web Forms
Some really great tips or construction professinal wuality web forms.

Form Interactivity

1. AutoSuggest – An autocomplete text field with Ajax
The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).

2. Really easy field validation with Prototype
I wanted a robust javascript validation library that was simple to implement and didn’t require me do any extra work other than creating the form. My favourite idea for a method of doing this is to utilise the field elements’ class attribute to indicate what sort of field it is and hence any validation requirements. There are a few javascript libraries that implement that idea like wForms, but, since I’m currently hell-bent on re-writing all my javascript using Prototype, I thought I’d see how difficult or easy it would be to roll my own. Turns out that this is just the sort of thing that is easy with Prototype. Here’s what I came up with .

3. Scrollable Checklists
Usability and accessibility are all the rage right now and that’s great because it’s slowly making the web a better place. Unfortunately, some of the goodies in our bags of tricks aren’t quite up to snuff when it comes to these two areas. One such goody is the good old select element—specifically with the multiple attribute enabled. How about we do away with them and try something different?

4. Ping-o-matic’s Hover Invitation
Pingomatic uses a hover behaviour, a hover invitation, that works very well to not only invite people to click on something but to educate them that something is indeed clickable. What I am talking about is using hover on a label: label:hover Many people are not aware that labels are clickable, and that may be due to the fact that not everybody uses the label tag when building forms, so the behaviour can be inconsistent. By using label:hover, a person will learn that it is clickable, and your form will become that much easier for that person to use

Form Generators

1. CSS Form Code Maker
This HTML – CSS form generator will create a nice looking layout for forms. The time is now right – to move to ‘tableless’ layout for forms. And at the same time, add a ‘little color’ to the forms.

2. Wufoo – Build HTML Forms, Online Surveys and Invitations
Our HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

3. Icebrrg – HTML Web forms, surveys, and invitations made chillingly simple
Icebrrg lets anyone easily build online forms for websites and blogs — no programming, software or special skills needed.

4. JotForm – a web based WYSIWYG form builder
JotForm allow you to design your forms online without any prior coding knowledge.

5. Accessible Form Builder
Another online generator for accessible web forms.

6. FormLogix – Create web forms for free
FormLogix is an online form builder tool for creating web databases and web forms.
Our forms may be embedded in your website, blog, or may be used internally.
Forget all you know about databases and forms creation – our form builder
is a WYSIWYG tool and it requires zero coding skills. It enables a user to easily create web forms and web databases such as:Contact us forms, Feedback forms, Events registration forms, Surveys, online Polls, Order forms, Invitations, CRM…

Comments

  • December 19, 2010

    very nice css web form style

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright ©2012 SiteBox.net Inc. All rights reserved. | Privacy Policy