CSS Forms
How to Create a 3D Search Bar in HTML / CSS
We will bring to life the 3D search bar that we did in the past, this tutorial will help you to start everything from scratch. I think this is a good way to practice your skills in HTML and CSS.
Learn to Create a Pretty Search Form
In this tutorial we are going to style text boxes and buttons to create pretty search forms. We are going to create three forms which will match the image above.
How To Build a Handwritten Letter Style Contact Form
Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS. We’ll use a mix of basic and intermediate CSS techinques to give the form the appearance of a letter, then use the @font-face CSS property to transform the digital text into handwriting.
Style a spacious grey form using CSS3
This tutorial will show you how to create a stylish grey form using CSS and a couple of simple images. It wont take long to complete and beginners with a basic understanding of CSS should be able to follow.
To add some effects, such as rounded corners, or drop-shadows, CSS3 will be utilised. These means that the form styling will only work properly in modern browsers.
Create Custom Search Bars with Image Replacement using CSS
This tutorial will teach you how to add custom form boxes (a search bar) to your designs, and in browsers that format CSS correctly, we’re going to have nice, fancy image replacements when you click on the search box, using the :focus pseudo class.
Uni-Form Framework
Uni-Form is a framework that standardizes form markup and styles it with CSS giving you two most widely used layout options to choose from. Anyone can get nice looking, well structured, highly customizable, accessible and usable forms. To put it simply: it makes a developer's life a lot easier.
Better Web Forms: Redesigning eBay's Registration
Designing interactive forms is one of the most challenging aspects of web design. Done with the user’s experience in mind, and some finesse, it can be one of the most rewarding, too, resulting in increased visitor satisfaction and conversion. Let’s walk through some of the fundamentals of good web form design by taking an existing form and making some very simple changes to take it to the next level.
Styling File Input with CSS and DOM
File inputs (<input type="file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.
How to create a 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.
CSS only: Tableless Forms
Most of the CSS-only, table-less forms available suck. So, 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.
Tableless forms using CSS
This CSS example transforms a conventional form so it's tableless. A form that doesn't use tables for its layout is much more lightweight and semantically correct.
Advanced tableless forms
We'll create a form with nice clean markup, hardly any extra CSS and no messy tables.
Clean and Stylish CSS3 Form
This article is about creating a form using some of CSS3 properties. You can easily customize the style.
Vintage typewriter: The sexiest jQuery contact form ever
A fancy typewriter contact form powered with jQuery, CSS and PHP along with a nice vector illustration
Create a stylish green form using Photoshop and CSS3
Create a stylish Form for your website using some simple photoshop techniques & a couple of CSS3 properties.
Styling Forms
CSS can work wonders with boring Web forms. In this tutorial, you start with an ugly HTML form and turn it into something beautiful.
Carbon Fiber Signup Form With PHP, jQuery and CSS3
We are making a carbon fiber style form, build using progressive enhancement. This means that we first ensure that the form works well without JavaScript and fancy CSS support (think of IE6 here) and later move on by layering over cool styling, AJAX and jQuery magic .
Fighting Spam
It can be very frustrating when you have a form on your site which has a good and useful purpose, but almost becomes obsolete because of relentless spamming. I had this problem a few months ago with my old site, and was thus forced to find a solution that was light-weight, easy to implement, and most importantly was effective. I decided to turn toward my friend CSS to help me out.
Table-less Forms
How to make a form with out using tables. If your a CSS freak like me you might have your own way of creating table-less structures, one of my favorites is creating table-less forms. In my example, I created a contact form which you will notice the name text floats to the left and the input field floats to the right.
Styling Form Elements
How to style form elements in the way that you want them. Adding classes to each input field gives your contact form a new look with CSS.