HTML Forms

Learn how to create interactive forms in your Web pages with the ‘form’ element.

Banish JavaScript in Web Forms with HTML5

Matt Doyle / 3 September 2010

For years now, most Web forms have included at least some lines of JavaScript code. Typically this JavaScript is used to validate the form — that is, check all the fields have been filled in correctly before the form is sent to the server. JavaScript is also used to enhance forms with additional functionality, such as calendar widgets and the like.

While using JavaScript for these purposes is a pretty good solution, it’s not without its problems:

Not all browsers have JavaScript enabled, or can even run JavaScript.
Each Web developer builds their JavaScript form validation and widgets differently. This means that, when confronted with a new form, a user has to learn the form’s unique quirks and foibles in order to use it.
Adding decent validation to a form — not to mention creating custom widgets for things like dates and number ranges — is both fiddly and time-consuming.

The good news is that these dark days of JavaScript-laden Web forms may soon be coming to an end. Thanks to the joys of HTML5, we can now create forms with built-in validation and rich widgets for dates, numbers and so on, all without including a single line of JavaScript code. Hallelujah!

As with most cutting-edge Web stuff, there’s a catch to all this, and that is browser support (or lack of it). Fortunately, there are a few JavaScript libraries out there that can emulate HTML5 form validation and widgets, as we’ll see later in the tutorial. Sure, this does mean we’re not exactly banishing JavaScript for now, but at least we can remove it once the browsers catch up!

In this tutorial I’m going to walk you through the process of creating a nice, self-validating, widget-rich, HTML5 Web form. It’s an online order form for an imaginary software company.

You can play with the form now by trying out the demo. Fill in a couple of fields, then click “Place Your Order” to see the validation kick in. Try clicking the “Expiry date” field and see what happens.

Ready to code it? Let’s get started!

Creating Accessible Forms

Matt Doyle / 22 November 2006

In HTML forms we looked at the basics of creating HTML forms: GET vs POST, text fields, checkboxes, radio buttons and so on. In this tutorial we’re going to go a step further and look at some of the ways you can make forms more accessible and usable for your visitors.

Web accessibility is important because it makes it easier for users to visit and use your site. This means happier visitors and more traffic!

We’ll cover the following topics:

Using the fieldset and legend elements to group form fields in a logical way
Adding labels to form fields with the label element
Controlling the tabbing order of the elements in a form
Speeding up form access and improving accessibility through the use of access keys

By the end of this tutorial you’ll be well on your way to designing wonderfully accessible forms. Read on…

HTML Form Buttons

Matt Doyle / 29 November 2001

As well as fields such as text fields, checkboxes and select menus, an HTML form can contain different types of buttons. Form buttons allow the user to submit the filled-in form to the server for processing. Your form will generally contain at least one form submit button so that the form can be sent.

[Read more…] about HTML Form Buttons

HTML Forms – Hidden, Password and File Upload Fields

Matt Doyle / 27 November 2001

This tutorial explores three special types of HTML form input fields:

hidden fields, for passing information without displaying it to the visitor
password fields that allow the visitor to enter sensitive information, and
file upload fields that allow visitors to upload files from their hard disk to your Web server.

HTML Checkboxes, Radio Buttons and Select Form Fields

Matt Doyle / 13 November 2001

This tutorial takes a look at three HTML form fields that allow your visitors to choose from a list of options: checkboxes, radio buttons, and select menus.

HTML Text and Textarea Form Fields

Matt Doyle / 6 November 2001

In this tutorial you explore two HTML form fields that allow visitors to enter text: text fields, suitable for short, single-line text, and textarea fields, which are suited to longer paragraphs of text.

HTML Forms

Matt Doyle / 1 November 2001

This series of tutorials shows how to create HTML forms in your Web pages. Forms allow you to make your site interactive — your visitors can use the forms on your site for giving you feedback via email, navigating your site, posting messages and other content to your site, voting and polling, and almost anything else you can dream of!

In this tutorial, you start by looking at the HTML form element, the basic building block of Web forms. You then learn how to use disabled and read-only controls to enhance your forms. Finally, you’ll look briefly at ways to process the results of your forms after they’ve been submitted.

The remaining tutorials in the series look at 8 different types of form fields that you can place in an HTML form, including text fields, checkboxes, radio buttons, menus, text areas, hidden fields, password fields and file upload fields. You’ll also learn how to create submit, image and reset buttons, and how to create generic form buttons. Buttons are needed to “activate” your Web form — for example, to enable the user to send the form after they’ve filled it in.

[Read more…] about HTML Forms

HTML Forms

Footer

Contact Matt

Follow Matt