When developing a project it’s important to have a good form input structure throughout, most commonly used css forms will tend to be Login, Register and user Profiles, or writing an email through a web-based client such as Gmail - forms are a staple to modern websites and web applications. 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.
In this showcase, We have gathered together a great list of Stylish Examples of Web Forms and tutorials that should have your new forms looking great or breath life into your existing form design.
Remarkable and well-constructed web form designs
40 CSS Style Tutorials of Web Forms
In this article we’ll look at how you can use CSS to create attractive and usable forms.
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.
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.
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.
Lots of really great information on form layouts and optimization.
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.
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.
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.
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.
A CSS Stylesheet Collection for Web Forms.
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
14. Badboy Niceforms
Nice rounded and apple like forms layout.
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.
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 …
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.
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.
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.
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.
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.
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.
A nice simple and effective form styling tutorial.
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.
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.
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?
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.
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?
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.
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.
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.
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.
Quick and simple form tutorial.
A CSS Stylesheet Collection for Web Forms.
Some really great tips or construction professinal wuality web forms.