Lara Kannan

Let's take some other samples designed form elements from scratch ourselves. Its new collections.

Read my previous PART 1 : Creating a forms without table (10 Samples) - Part 1
Read my previous PART 2 : Creating a forms without table (10 Samples) - Part 2

21. Form field hints with CSS and JavaScript

It’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.

View demo & source/

22. Improve form usability with auto messages

Animated auto messages are useful to improve FORM usability and Scriptaculous is a great framework to use in this case.

Download source

23. Nice & Clean Sliding Login Panel built with jQuery

View demo & source

24. “Select” Something New

With a little DOM scripting and some creative CSS, you too can make your <select>s beautiful… and you won’t have to sacrifice accessibility, usability or graceful degradation.

View demo & source

25. Uni-Form

Uni-Form is an attempt to standardize form markup (xhtml) and css, "modularize" it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

26. CSS-Only, Table-less Forms

Modern and comprehensive web form example. 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.

27. FancyForm

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

View demo & source

28. Showing Good Form

The function of the interface is to input information, so semantically this is a form, so way of building it will be using form elements: fieldset, legend, label and input.

View demo & source

29. jQuery checkbox

Lightweight custom styled checkbox implementation for jQuery 1.2.x and 1.3.x.

30. AutoSuggest: An AJAX auto-complete text field

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).

View demo & source

Thanks : Smashingmag.

I hope this will be useful. Feel the CSS stuffs!

Let's take some other samples designed form elements from scratch ourselves. Its new collections.

Read my previous PART 1 : Creating a forms without table (10 Samples) - Part 1

11. Style:Phreak’s Standard Form Layout Revisited

View demo & source

12. Tableless forms

Create beautiful web forms using just CSS, very good tutorial!

View demo & source

13. A form with style

7 different style examples, where you can study code and creat good looking forms.

14. A Simple Tableless Form

Use CSS to build your form without any use of tables. Code examples are written in good-old-fashioned HTML instead of ASP.NET and do not contain validation, ID’s, etc. Continue with second part on their
website, to learn how to send and receive that data – Staying in Touch – How to Build a Contact Form .

15. Fancy Form Design Using CSS

View demo & source

16. Make your forms beautiful with CSS

In this tutorial, you’ll learn how to take a standard form and then make it special with some simple CSS tricks and techniques. You will improve the usability, aesthetics and layout, while picking up design cues from the existing design elements.

Download tutorial files

17. How to create perfect form markup and style it with CSS

This post will explain choices when marking up the forms, and the CSS styling involved in making them cross-browser compatible.

View demo & source

18. Background Images into Form Fields with CSS

Adding some expressive background images to your HTML form can be considered sometimes as a relevant point. This can be done easily with pure CSS.

Download link

19. Formy – CSS Form Framework

This is universal CSS for forms who will interact in the simple natural way with HTML form and HTML form will work decently well even without CSS.

View demo & source

20. Changing Form Input Styles on Focus with jQuery

A lot of forms can be boring and plain, don’t let yours blend in. This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

View demo & source

Thanks : Smashingmag.

I hope this will be useful. Feel the CSS stuffs!

Let's take a look how to create outstanding and beautifully designed form elements from scratch ourselves.

Things can get tricky even if you are experienced designer. It’s hard to attract visitors attention, but this article should help to stand out and create semantically correct, good looking and accessible web forms, checkboxes, radio buttons, buttons, fieldsets – everything you can think of when you are creating contact or login page!

1. How create good looking form without table

This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. You can use all CSS/HTML elements to design your custom form for your web projects.

View demo & source

2. Simple Form Example

Very well explained tutorial showing crucial points you should give attention to.

View demo & source

3. Prettier Accessible Forms

View demo & source

4. Adding Style with CSS: A Beautiful Form

Forms don’t have to be ugly and boring, and certainly don’t have to be inside tables to look nice and aligned.

View demo & source

5. NiceForms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

View demo & source

6. Turn postcard photo into a stunning comment form using CSS

This tutorial will teach you how to make a stunning comment form using an old postcard photo.

View demo & source

7. Enhance your input fields with simple CSS tricks

The example you are going to see is something that you use every day: blog comment form.

View demo & source

8. 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.

View demo & source

9. Forms markup and CSS – Revisited

View demo & source

10. Semantic horizontal Forms

Semantically correct web forms with fieldsets, legends, labels and some CSS styling. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable).

View demo & source

Thanks : Smashingmag.

I hope this will be useful. Feel the CSS stuffs! 'A Thanks' would be nice!