Advertisment
I featured many good looking contact forms some time ago – 91 Trendy Contact And Web Forms For Creative Inspiration, so you should know how looks good example. Now 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.
2. Simple Form Example
Very well explained tutorial showing crucial points you should give attention to.
3. Prettier Accessible Forms
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.
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.
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.
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.
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.
9. Forms markup and CSS – Revisited
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).
11. Style:Phreak’s Standard Form Layout Revisited
12. Tableless forms
Create beautiful web forms using just CSS, very good tutorial!
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
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.
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.
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.
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.
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.
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.
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.
23. Nice & Clean Sliding Login Panel built with jQuery
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.
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.
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.
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).
31. LiveValidation
LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete.
32. PrettyForms
33. Pretty Checkboxes, a solution to checkboxes
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.
34. Validation Hints for your form
35. Building a better web forms: Context highlighting using jQuery
36. Control.SelectMultiple
Unobtrusive select multiple input alternative for Prototype.
37. Really Easy Field validation with Prototype
Here’s a form validation script that is very easy to use.
38. Autotab: jQuery auto-tabbing and filter plugin
Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.
39. Grow a textarea
Just make a form, and this script will add the ability to resize each textarea…if you want to, based on MooTools.
40. Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists.
41. Password field with strength meter
These forms do not do anything and have very little validation. They solely demonstrate how you can use Ext Forms to build and layout forms on the fly.
42. Clean and pure CSS FORM design
This tutorial illustrates a proposal about how to design a pure CSS form without using HTML tables.
43. 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.
44. Form Highlighting Redux
45. Styling form controls
36 simple documents, each containing twelve controls of the same kind, but with a different CSS rule for each element. Due to the various controls having different properties to style, there are two three slightly different sets of rules. Check out also follow-up article.
46. cforms II Wordpress Plugin
cforms is a powerful and feature rich form plugin for Wordpress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.
47. A CSS Stylesheet Collection for Web Forms
You can view and download 13 different css stylesheets, great for study!
48. Styling form controls with CSS, revisited
224 screenshots showing the effects of various CSS rules applied to form controls. The screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations. Huge article!
49. 5 uniquely designed and coded web form styles
CSSGlobe is giving away 5 really good web form style designs, which can be used freely and studied as well.
50. 10 Tips for Incredible Web Forms!
In this great article from DesignReviver you will be walked through web form building with explained basic code examples, several tools to help you build up your form as well as incredible contact pages found over the web for inspiration. Must read!
51. Tips For Creating Great Web Forms
Excellent article from CSS-Tricks with 7 tips how to create better web forms.
love is java :)
this is thank you.. :)
thanks for sharing. So mush
great i never seen before.
sevdiğim kız bana abi deyince..
[...] Mendesain Form Dengan CSS Koleksi 51 tutorial untuk membuat form yang aduhai dengan CSS. Beberapa juga dipadukan dengan [...]
Thnx, some of these forms will be very usefull!
[...] 51 outils pour mettre en valeur et optimiser vos formulaires [...]
[...] 51 Form Element Resources and Tutorials Using CSS And Javascript | Graphic and Web Design Blog -Reso… 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 (tags: forms javascript css webdesign tutorials resources inspiration showcase) [...]
[...] 51 Form Element Resources and Tutorials Using CSS And Javascript | Graphic and Web Design Blog -Reso… – [...]
Creating forms that look the same on all browsers can be a tricky affair. Thanks for sharing this post – you have provided a lot of different solutions to the problem at hand.
web2000´s last blog ..Advanced CSS techniques for next level web design
Above tutorial is really useful, thanks to given it
Tanuj Dave´s last blog ..Download and see offline Youtube Video’s
thank you very much this is what i was waiting for, keep it up dude! :D
[...] Best Practices and Examples Log in or sign up? 40 Beautifully-Designed Navigation Menus 51 Form Element Resources and Tutorials Using CSS And Javascript 91 Trendy Contact And Web Forms For Creative [...]
[...] Formularios (Formularios con css y jquery, recomendado!!!!) [...]