Forms Tutorial

5 Great Tools to Help You Build Your Own HTML5 Forms

Learn more about some of the most important tools used for creating HTML5 forms. Cristian Ionescu guides you through some of the form and resource design tools to help you optimize your Web form designs.

Building Security Support in Our HTML5 Application Using the Keygen Markup Control

This article walks web developers through the basics of the keygen markup element, a new element introduced in HTML5.

What's New in HTML5 Forms: The Datalist Control

The topic of today's article, the Datalist control, is a little more complex than a simple input, and thus requires more care if you decide to use it. So for those of you who can't wait to take advantage of the latest and greatest that HTML5 has to offer, this article is for you!

Using Wishbox, the Free Feedback Tool with Screenshot Capability

It's hard enough to get your site's visitors to leave you feedback, let alone get them to submit a screenshot. By using the free Wishbox script, however, you can easily add a feedback form to your site that has screenshot capabilities!

The Three Models of Web Form Validation

Today's article will outline the different ways of validating form data and relaying validation error messages to the user. In doing so, we're going to see why it's time to consider preferable alternatives to the ole' one field at a time style of error handling such as displaying all the form errors at once and inline validation.

HTML5 Forms: How To Use The New Email, URL, and Telephone Input Types

HTML5 has presented developers with plenty of new options for web form design and functionality. In this tutorial we will be looking at Input Field types, and will begin with the new Email, URL and Telephone Input Types.

What's New in HTML5 Forms: Handling Numeric Inputs

This article will focus on a couple of new HTML5 elements that facilitate the inputting of numeric data: the number and range input types. Both accomplish the same thing, albeit using slightly different User Interfaces (UI).

The Three Laws of Form Design

An efficient and user-friendly user interface (UI) design cannot be overlooked if you want to keep your visitors engaged. To that end, I'd like to present to you some design principles that are so important, they are regarded as law!

Web Developer Class: Creating Forms with CSS3

You only have to look as far as Twitter's relatively new interface to see that stylized text boxes are still a popular design choice for input fields and forms. In this tutorial we will teach you a few different techniques to create styled forms and input fields using CSS3.

The Mobile Web with jQuery Mobile

In October of 2010, the jQuery team released a mobile version of their awesome JavaScript library. This tutorial will tell you all about jQuery mobile, and show you how you can use it with mobile devices.

jQuery Basics for Web Developers: Other Events

So far I have talked about form events, mouse events, and keyboard events, to finish out the events; I will discuss the remaining events: ready(), load(), unload(), error(), resize() and scroll().

jQuery Basics for Web Developers: Keyboard Events

In the last article we discussed jQuery mouse events; in this article we will discuss how to bind keyboard events to HTML elements using jQuery.

jQuery Basics for Web Developers: Form Events

Recently we discussed how you can use mouse events with jQuery, and in this article we will discuss form events. jQuery provides several form events to bind to. The form events are the same standard JavaScript events, but with added support by jQuery.

jQuery Basics for Web Developers: Mouse Events

As with JavaScript, jQuery supports a lot of events. Events are methods that can be attached to HTML elements. If you want to add a click event, change event, or double-click event, it's really easy with jQuery. In this article, we will explore many of these events and the ways to apply them to your objects.

jQuery Basics for Web Developers: Animation

In the last article, we talked about some effects you can add to your web site using jQuery. In this article, we will look into more animations that can be accomplished. These are a little more advanced than a simple hide or show type effect, but this tutorial will get you up to speed in no time!

How To Use JavaScript To Copy Text From One Field To Another

Often when creating a form on a web page, you need your customers to fill out a field such as a mailing address, as well as a billing address. Instead of having your customers fill out the form twice, you can use JavaScript to copy the form's data from one field to another.

HTML Forms: jQuery Basics -- Effects

The jQuery library has several effects that can be added to almost every HTML element. In this article, we will explore some of these effects and how to add them to your web page.

HTML Forms: jQuery Basics - Getting Started

So what is jQuery? From the jQuery web site: "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development." This article will show you how to let jQuery do the heavy lifting so you can concentrate on the more important stuff.

HTML Forms: From Basics to Style: Enhancing with jQuery

In the last article, we discussed form layouts. In this article, we will discuss how to enhance our forms with jQuery--a JavaScript library that allows for easier HTML DOM support, animations, event handling, and Ajax support--along with various jQuery plugins.

HTML Forms: From Basics to Style: More Layouts

In my last article, I wrote about how to create form layouts using CSS. I had a few people ask about doing multi-column layouts with CSS, so in this tutorial I will show you how to do just that!

HTML Forms: From Basics to Style: Layouts

Now that we have discussed the different elements of a form, it's time to look into putting it all together. In this article, I will discuss different table layouts and how to achieve the same results using pure CSS.

HTML Forms: From Basics to Style: The Rest of the Input Fields

In the last article, we talked about the input element and how it can transform into many different form elements. In this article, we will discuss the rest of the form field elements which includes a way of grouping elements together.

HTML Forms: From Basics to Style: The Magical Input Element

In the last article in our HTML Forms series, I talked about the basics of HTML forms. This article will discuss the magical input element. Why is it magical? Because this one element can transform into many different input fields!

JavaScript Class: How To Populate a Selection Box Using a Dropdown

You are creating a form on your website, and need to populate the contents of a selection box in the form based on the choice made in a dropdown field. Sound difficult? This tutorial will show you how you can add this functionality using JavaScript!

HTML Forms: From Basics to Style--Getting Started

Forms are a staple of web sites--almost every web site has one or more forms. This tutorial for web developers will show you how to create forms, make them look nice and make them accessible to your website's visitors.

Form Attachments Part 2

This article begins where Part one in our Form Attachment series left off--this time we cover ENCTYPE, ACTION and more!

Using Autocomplete On Your Forms (Or Not)

Most of us have seen a web site that uses autocomplete fuctionality to help the end user fill out a form. Read this article to find out how you can use this functionality on your own site (or not)!

A New Forms Solution Using ASP

An ASP Alternative to Mailto: Forms

A New Forms Solution Using Perl or FrontPage

Your Email forms Won't Work? Is it because they're not supported? Read on!

Altering Select Boxes in Forms

Another Forms Solution

Your Email forms Won't Work? Is it because they're not supported? Don't want the Perl or ASP solutions? Read on

Beginning HTML at HTML Goodies

Use AltaVista or HotBot for your own site.

Checkboxes: Only Two

Here's a script that limits the number of checkboxes a person can choose. If you've ever put up checkboxes and found that users checked every box, every time...this one's for you.

Fieldsets and Legends

Form Attachments

So, You Want Text Commands, Huh?

Forms Tutorials: Table of Contents

Select Script

So, You Want Text Commands, Huh?

So You Want Fancy Drop Boxes, Huh?

So, You Want A Form, Huh?

So, You Want A Form, Huh?

So, You Want A Guestbook, Huh?

So, You Want A Guestbook, Huh?

So, You Want An Image Starting Your Form, Huh?

Instead of using the dull gray submit button, why not use a colorful image to submit your form data? Here's how.

So, You Want CSS Commands With Forms, Huh?

So, You Want Text Commands, Huh?

TABINDEX and a Couple of Other Form Tricks

So, You Want Text Commands, Huh?

Triminds - Enable and Disable

Use a checkbox to either enable or disable your form elements.

Working with Internet Explorer's AutoComplete

So, You Want Text Commands, Huh?