51 Form Element Resources and Tutorials Using CSS And Javascript

Posted in Coding, Coding, HTML & CSS, Tutorials • Posted on 21 Comments

title-form-element-resourcesI 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.

good-looking-web-forms-without-table-css-tutorial

View demo & source

2. Simple Form Example

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

simple-web-forms-css-tutorial

View demo & source

3. Prettier Accessible Forms

pretty-accessible-web-forms-css-tutorial

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.

beautiful-web-forms-adding-style-withcss-tutorial

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.

nice-web-forms-css-tutorial

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.

turn-postcard-photo-into-comment-box

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.

enhance-input-fields-web-form-tutorial-css

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.

customized-input-elements-tutorial

View demo & source

9. Forms markup and CSS – Revisited

form-markup-css-web-forms

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

semantic-horizontal-forms-css-tutorial

View demo & source

11. Style:Phreak’s Standard Form Layout Revisited

standard-layout-web-forms-css-tutorial

View demo & source

12. Tableless forms

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

tableless-login-personal-web-forms-css-tutorial

View demo & source

13. A form with style

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

a-stylish-web-form-css-tutorial

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.

simple-tableless-web-forms-css-tutorial

15. Fancy Form Design Using CSS

fancyform-design-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.

make-beautiful-web-forms-css-tutorial

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.

perfect-makeup-web-forms-css-tutorial

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.

background-image-for-search-form-css-tutorial

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.

formy-css-form-framework

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.

change-form-input-styles-on-focus

View demo & source

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.

form-field-hints-with-css-javascript

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.

search-input-field-display-message

Download source

23. Nice & Clean Sliding Login Panel built with jQuery

nice-clean-sliding-login-panel-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.

select-replacement-test-css-dom

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.

uni-form-making-forms-simple

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.

css-only-table-less-web-forms

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.

fancyform-css-radio-checkbox-buttons

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.

showing-good-web-form

View demo & source

29. jQuery checkbox

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

jquery-checkbox-demo-web-forms

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

ajax-auto-suggest-autocomplete-form

View demo & source

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.

live-validation-web-forms-tutorial-javascript

View demo & source

32. PrettyForms

prettyforms-form-css-tutorial

View demo & source

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.

prretty-check-boxes-web-forms

34. Validation Hints for your form

validation-hints-css-web-form-tutorial

View demo & source

35. Building a better web forms: Context highlighting using jQuery

building-better-web-forms-highlightning-with-jquery

View demo & source

36. Control.SelectMultiple

Unobtrusive select multiple input alternative for Prototype.

control-select-multiple-fields

37. Really Easy Field validation with Prototype

Here’s a form validation script that is very easy to use.

really-easy-field-validation-with-prototype

View demo & source

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.

autotab-jquery-plugin-autotabbing-filtering

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.

grow-text-area-web-forms-resource-1

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.

custom-checkboxes-buttons-form-elements

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.

password-field-with-strenght-meter

42. Clean and pure CSS FORM design

This tutorial illustrates a proposal about how to design a pure CSS form without using HTML tables.

clean-pure-css-design-web-form

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.

css-tableless-form-resource

44. Form Highlighting Redux

form-highlightning-examples-web-form-tutorial

View demo & source

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.

styling-form-elements

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.

cforms-ii-wordpress-plugin

47. A CSS Stylesheet Collection for Web Forms

You can view and download 13 different css stylesheets, great for study!

css-stylesheet-collection-web-forms

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!

styling-form-elements-revisited-tutorial

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.

5-uniquely-designed-web-form-styles

View demo & source

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!

10-tips-for-incredible-web-forms

51. Tips For Creating Great Web Forms

Excellent article from CSS-Tricks with 7 tips how to create better web forms.

193 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

21 Comments Best Comments First
  • Orfebre Martin

    Thursday, June 3rd, 2010 00:58

    15

    Thank you very much this is what i was waiting for the Formulary!

    +6
  • Roser

    Friday, October 15th, 2010 23:44

    17

    You have to love superbly designed and yes simple contact forms. I continue to be in overwhelming awe in the resource you routinely assemble.

    +1
  • Rob

    Friday, November 6th, 2009 02:25

    10

    That uni-form is amazing! Great find

    +1
  • Brad Czerniak

    Tuesday, September 22nd, 2009 22:32

    7

    How about Hawidu CSS’s form styles?
    It includes essential ALA-style pretty form layout, CSS-only rounded-corner buttons with gradient overlays for quick hover effects and site-wide color changes, and some other goodies. All of this plus non-form elements and CSS best practices to boot. Yeah, Hawidu CSS is the bee’s knees.

    0
  • Jason

    Wednesday, September 23rd, 2009 06:17

    8

    Many of these have helped me out in the past while making forms and validating them, good list.

    0
  • Prowl

    Thursday, September 24th, 2009 08:22

    9

    That’s a great list, I especially love round forms like #5, #23 thanks there giving me some great ideas.

    0
  • BunnygotBlog

    Monday, September 21st, 2009 21:09

    6

    This is a great list I have sent it to a couple of my friends and really appreciate all your time you spent collection these resources.

    Fantastic job!!!

    0
  • Jason Zuckerman

    Monday, September 21st, 2009 21:08

    5

    You have to love superbly designed and yes simple contact forms. I continue to be in overwhelming awe in the resource you routinely assemble.

    0
  • Janko

    Sunday, September 20th, 2009 23:14

    2

    What a huge list, thanks again for including my tuts :)

    0
    • Dainis Graveris

      Sunday, September 20th, 2009 23:32

      1

      To be honest I am amazed of your beautiful tutorials and how many you have them, because I know how much time takes to create something like that! Big respect!

      0
      • Seal

        Tuesday, March 22nd, 2011 02:47

        19

        I think the same! The tuts of Sixpacl are very detailed and easy to continue

        0
  • Eren Mckay

    Monday, September 21st, 2009 09:16

    3

    I’m in love with the number 6 – postcard form, number 16, number 47,49 and 50. Gorgeous and creative.
    Gonna stumble this.
    Now I have to find a way of creating my own gorgeous form :-D

    0
  • Ajay

    Monday, September 21st, 2009 12:32

    4

    Awesome collection, thanks for including our tutorial.

    0
  • Tanuj Dave

    Monday, December 14th, 2009 18:21

    11

    Above tutorial is really useful, thanks to given it.

    0
  • Lucio Boda

    Wednesday, June 29th, 2011 16:13

    20

    Thank you very much this is what i was waiting for the Formulary!

    0
  • Shibby

    Tuesday, August 16th, 2011 23:57

    21

    Very good article!
    Exactly what i was looking for

    0
  • Yasin Yıldız

    Thursday, November 4th, 2010 22:12

    18

    this is thank you. 1stwebdesigner

    0
  • njmehta

    Friday, September 10th, 2010 16:38

    16

    I’ve seen all of these elsewhere on other sites. Sorry, nothing new here for me to thumb up.

    0
  • John

    Sunday, January 3rd, 2010 16:36

    12

    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.

    0
  • ThunderWolf

    Monday, February 22nd, 2010 01:45

    13

    Thanks for these great scripts, a must have.

    Cheers,
    Mario

    0
  • Shibby

    Tuesday, August 16th, 2011 23:57

    21

    Very good article!
    Exactly what i was looking for

    0
  • Lucio Boda

    Wednesday, June 29th, 2011 16:13

    20

    Thank you very much this is what i was waiting for the Formulary!

    0
  • Yasin Yıldız

    Thursday, November 4th, 2010 22:12

    18

    this is thank you. 1stwebdesigner

    0
  • Roser

    Friday, October 15th, 2010 23:44

    17

    You have to love superbly designed and yes simple contact forms. I continue to be in overwhelming awe in the resource you routinely assemble.

    +1
  • njmehta

    Friday, September 10th, 2010 16:38

    16

    I’ve seen all of these elsewhere on other sites. Sorry, nothing new here for me to thumb up.

    0
  • Orfebre Martin

    Thursday, June 3rd, 2010 00:58

    15

    Thank you very much this is what i was waiting for the Formulary!

    +6
  • ThunderWolf

    Monday, February 22nd, 2010 01:45

    13

    Thanks for these great scripts, a must have.

    Cheers,
    Mario

    0
  • John

    Sunday, January 3rd, 2010 16:36

    12

    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.

    0
  • Tanuj Dave

    Monday, December 14th, 2009 18:21

    11

    Above tutorial is really useful, thanks to given it.

    0
  • Rob

    Friday, November 6th, 2009 02:25

    10

    That uni-form is amazing! Great find

    +1
  • Prowl

    Thursday, September 24th, 2009 08:22

    9

    That’s a great list, I especially love round forms like #5, #23 thanks there giving me some great ideas.

    0
  • Jason

    Wednesday, September 23rd, 2009 06:17

    8

    Many of these have helped me out in the past while making forms and validating them, good list.

    0
  • Brad Czerniak

    Tuesday, September 22nd, 2009 22:32

    7

    How about Hawidu CSS’s form styles?
    It includes essential ALA-style pretty form layout, CSS-only rounded-corner buttons with gradient overlays for quick hover effects and site-wide color changes, and some other goodies. All of this plus non-form elements and CSS best practices to boot. Yeah, Hawidu CSS is the bee’s knees.

    0
  • BunnygotBlog

    Monday, September 21st, 2009 21:09

    6

    This is a great list I have sent it to a couple of my friends and really appreciate all your time you spent collection these resources.

    Fantastic job!!!

    0
  • Jason Zuckerman

    Monday, September 21st, 2009 21:08

    5

    You have to love superbly designed and yes simple contact forms. I continue to be in overwhelming awe in the resource you routinely assemble.

    0
  • Ajay

    Monday, September 21st, 2009 12:32

    4

    Awesome collection, thanks for including our tutorial.

    0
  • Eren Mckay

    Monday, September 21st, 2009 09:16

    3

    I’m in love with the number 6 – postcard form, number 16, number 47,49 and 50. Gorgeous and creative.
    Gonna stumble this.
    Now I have to find a way of creating my own gorgeous form :-D

    0
  • Janko

    Sunday, September 20th, 2009 23:14

    2

    What a huge list, thanks again for including my tuts :)

    0
    • Dainis Graveris

      Sunday, September 20th, 2009 23:32

      1

      To be honest I am amazed of your beautiful tutorials and how many you have them, because I know how much time takes to create something like that! Big respect!

      0
      • Seal

        Tuesday, March 22nd, 2011 02:47

        19

        I think the same! The tuts of Sixpacl are very detailed and easy to continue

        0

Comments are closed.

54.89.233.81 - unknown - unknown - US