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.
| Prerequisites: | A basic understanding of HTML. |
|---|---|
| Objective: | To gain familiarity with what web forms are, what they are used for, how to think about designing them, and the basic HTML elements you'll need for simple cases. |
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).
A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the element, although there are some other elements to learn about too.
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:
In this article, we'll build a simple contact form. Let's make a rough sketch.
Our form will contain three text fields and one button. We are asking the user for their name, their email and the message they want to send. Hitting the button will send their data to a web server.
Ok, let's have a go at creating the HTML for our form. We will use the following HTML elements: , , , , and .
Before you go any further, make a local copy of our simple HTML template — you'll enter your form HTML into here.
All forms start with a element, like this:
form action="/my-handling-form-page" method="post">…form>
Note: We'll look at how those attributes work in our Sending form data article later on.
Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding :
In terms of HTML code we need something like the following to implement these form widgets:
form action="/my-handling-form-page" method="post"> ul> li> label for="name">Name:label> input type="text" id="name" name="user_name" /> li> li> label for="mail">Email:label> input type="email" id="mail" name="user_email" /> li> li> label for="msg">Message:label> textarea id="msg" name="user_message">textarea> li> ul> form>
Update your form code to look like the above.
There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users. You'll find further details of form labels in How to structure a web form.
input type="text" value="by default this element is filled with this text" />
On the other hand, if you want to define a default value for a , you put it between the opening and closing tags of the element, like this:
textarea> by default this element is filled with this text textarea>
li class="button"> button type="submit">Send your messagebutton> li>
Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At the moment, you'll see that it looks rather ugly.
Note: If you don't think you've got the HTML code right, try comparing it with our finished example — see first-form.html (also see it live).
Forms are notoriously tricky to style nicely. It is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some CSS to make it look OK.
style> … style>
Inside the style tags, add the following CSS:
body /* Center the form on the page */ text-align: center; > form display: inline-block; /* Form outline */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; > ul list-style: none; padding: 0; margin: 0; > form li + li margin-top: 1em; > label /* Uniform size & alignment */ display: inline-block; min-width: 90px; text-align: right; > input, textarea /* To make sure that all text fields have the same font settings By default, textareas have a monospace font */ font: 1em sans-serif; /* Uniform text field size */ width: 300px; box-sizing: border-box; /* Match form field borders */ border: 1px solid #999; > input:focus, textarea:focus /* Additional highlight for focused elements */ border-color: #000; > textarea /* Align multiline text fields with their labels */ vertical-align: top; /* Provide space to type some text */ height: 5em; > .button /* Align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ > button /* This extra margin represent roughly the same space as the space between the labels and their text fields */ margin-left: 0.5em; >
Save and reload, and you'll see that your form should look much less ugly.
Note: You can find our version on GitHub at first-form-styled.html (also see it live).
The last part, and perhaps the trickiest, is to handle form data on the server side. The element defines where and how to send the data thanks to the action and method attributes.
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.
To name the data in a form, you need to use the name attribute on each form widget that will collect a specific piece of data. Let's look at some of our form code again:
form action="/my-handling-form-page" method="post"> ul> li> label for="name">Name:label> input type="text" id="name" name="user_name" /> li> li> label for="mail">Email:label> input type="email" id="mail" name="user_email" /> li> li> label for="msg">Message:label> textarea id="msg" name="user_message">textarea> li> … ul> form>
In our example, the form will send 3 pieces of data named " user_name ", " user_email ", and " user_message ". That data will be sent to the URL " /my-handling-form-page " using the HTTP POST method.
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.
Congratulations, you've built your first web form. It looks like this live:
form action="/my-handling-form-page" method="post"> div> label for="name">Name:label> input type="text" id="name" name="user_name" /> div> div> label for="mail">Email:label> input type="email" id="mail" name="user_email" /> div> div> label for="msg">Message:label> textarea id="msg" name="user_message">textarea> div> div class="button"> button type="submit">Send your messagebutton> div> form>
form /* Just to center the form on the page */ margin: 0 auto; width: 400px; /* To see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; > div + div margin-top: 1em; > label /* To make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; > input, textarea /* To make sure that all text field have the same font settings By default, textarea are set with a monospace font */ font: 1em sans-serif; /* To give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* To harmonize the look & feel of text field border */ border: 1px solid #999; > input:focus, textarea:focus /* To give a little highlight on active elements */ border-color: #000; > textarea /* To properly align multiline text field with their label */ vertical-align: top; /* To give enough room to type some text */ height: 5em; /* To allow users to resize any textarea vertically It works only on Chrome, Firefox and Safari */ resize: vertical; > .button /* To position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ > button /* This extra margin represent the same space as the space between the labels and their text fields */ margin-left: 0.5em; >
That's only the beginning, however — now it's time to take a deeper look. Forms have way more power than what we saw here and the other articles in this module will help you to master the rest.
