CSS Forms

Home » CSS (1250) » Forms (34)

Create a unique "contact us" form with css3 transitions
It works in browsers supporting css3 transitions. In IE the envelope is not visible, I certainly could have played a bit more with jQuery to reproduce a similar effect, but it’s not a part of this tutorial.

Styling password text fields with text-security property
Webkit have lots of experimental CSS properties that you can currently use on your website, one of the properties we are looking at now is the text-security property. This CSS property allows you to change the the shape of the letter that are displayed in text input boxes.

Enhance Required Form Fields with CSS3
Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones.

Build a Quick and Elegant Login Form
In this tutorial you’re going to code up Orman Clark’s Elegant Login Form using CSS3 and HTML5, plus some of Dan Eden’s CSS animations to embellish the experience.

Apple-like Login Form with CSS 3D Transforms
In this tutorial you will see how you can use CSS3 transforms to create an interesting flipping effect on an Apple-inspired form.

CSS3 signup form
In this article you will find out how to design a clean and attractive CSS3 signup form.

Glowing form field on focus
You may have seen glowing form fields on focus on many modern websites like twitter.com Form fields will glow when you focus on it. This can be done using CSS3 box-shadow and transition property.

Image inside the Input fields of form
You can spice up a login form with images inside the input fields. Include icons inside the login form and show what is supposed to be inside the fields.

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.

Home » CSS (1250) » Forms (34)