Tai Chi 42 Form Tutorial
Jeana Rodia
Forms are commonly used to provide user interaction on websites and in web applications. For example, login, registering, commenting, and purchasing. This tutorial shows you how to create accessible forms. The same concepts apply to all forms, whether they are processed client or server-side.
Aside from technical considerations, users usually prefer simple and short forms. Only ask users to enter what is required to complete the transaction or process; if irrelevant or excessive data is requested, users are more likely to abandon the form.
If possible, forms should not be subject to a time limit to allow users to complete the form at their pace. If a time limit needs to be in place, for example, for security reasons, the user should have the option to turn it off or extend it. This restriction does not apply if the time limit is due to a live event, such as an auction or a game, or if the time to complete the form is essential for a valid submission.
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:
The first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right HTML form controls and other HTML elements, adding some very simple styling via CSS, and describing how data is sent to a server. We'll expand on each of these subtopics in more detail later on in the module.
Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).
Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and visually impaired users.
Before starting to code, it's always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.
Designing forms is an important step when you are building a site or application. It's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles:
This element formally defines a form. It's a container element like a or element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the action and method attributes:
On the element, the most important attribute is the type attribute. This attribute is extremely important because it defines the way the element appears and behaves. You'll find more about this in the Basic native form controls article later on.
Last but not least, note the syntax of vs. . This is one of the oddities of HTML. The tag is a void element, meaning that it doesn't need a closing tag. is not a void element, meaning it should be closed with the proper ending tag. This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an element you have to use the value attribute like this:
The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the element; add the following just above the closing tag:
Note: You can also use the element with the corresponding type to produce a button, for example . The main advantage of the element is that the element only allows plain text in its label whereas the element allows full HTML content, allowing more complex, creative button content.
We provide a name attribute for each form control. The names are important on both the client- and server-side; they tell the browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name. The form data is sent to the server as name/value pairs.
On the server side, the script at the URL "/my-handling-form-page" will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our Sending form data article later on.
\n The first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right HTML form controls and other HTML elements, adding some very simple styling via CSS, and describing how data is sent to a server.\n We'll expand on each of these subtopics in more detail later on in the module.\n
\n Web forms are one of the main points of interaction between a user and a website or application.\n Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).\n
\n Designing forms is an important step when you are building a site or application.\n It's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles:\n
\n On the element, the most important attribute is the type attribute.\n This attribute is extremely important because it defines the way the element appears and behaves.\n You'll find more about this in the Basic native form controls article later on.\n
\n Last but not least, note the syntax of vs. .\n This is one of the oddities of HTML.\n The tag is a void element, meaning that it doesn't need a closing tag.\n is not a void element, meaning it should be closed with the proper ending tag.\n This has an impact on a specific feature of forms: the way you define the default value.\n To define the default value of an element you have to use the value attribute like this:\n
\n The markup for our form is almost complete; we just need to add a button to allow the user to send, or \"submit\", their data once they have filled out the form.\n This is done by using the element; add the following just above the closing tag:\n
\n We provide a name attribute for each form control.\n The names are important on both the client- and server-side; they tell the browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name.\n The form data is sent to the server as name/value pairs.\n
\n On the server side, the script at the URL \"/my-handling-form-page\" will receive the data as a list of 3 key/value items contained in the HTTP request.\n The way this script will handle that data is up to you.\n Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data.\n It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our Sending form data article later on.\n
To begin the tutorial process, the instructor and student will meet to discuss the proposed tutorial. Together, they review the Tutorial Study Request form (PDF) and the Tutorial Course Information Form (PDF), discuss the content they want to write in each response and save their notes for when they enter the information in the workflow.
I decided to share this project after having to build a custom multi step form for a client. I had seen many forms like this before, but none of them worked as I needed so I decided to spice it up with some custom code.
Ok after some playing around I got the form to work. Thank you so much for posting this! If I go on my live site and a user gets to the second part of the form and does not fill it in. Just clicks it away. Tries to head back in to the form the form disappears. Any idea why?
c80f0f1006