Your first HTML form

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

The first article in our series provides your very first experience of creating an HTML 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 how data is sent to a server.

Prerequisites: Basic computer literacy, and a basic understanding of HTML.
Objective: To gain familiarity with what HTML forms are, what they are used for, how to think about designing them, and the basic HTML elements you'll need for simple cases.

What are HTML forms?

HTML Forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, generally sending that data to the web server, but a web page can also use form data client side.

An HTML Form is made of one or more widgets. Those widgets can be single or multi-line text fields, select boxes, buttons, checkboxes, or radio buttons. The single line text field widgets can even require data entered to be of a specific format or value. Form widgets should be paired with a properly implemented label that describes their purpose — labels help instruct both sighted and blind users on what to enter into a form input.

The main difference between a HTML form and a regular HTML document is that most of the time, the data collected by the form is sent to a web server. In that case, you need to set up a web server to receive and process the data. How to set up such a server is beyond the scope of this article, but if you want to know more, see Sending form data later in the module.

Designing your form

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. From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk losing users. Keep it simple and stay focused: ask only for that 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.

The form to build, roughly sketch

Our form will contain three text fields and one button. We are asking the user for their name, their e-mail and the message they want to send. Hitting the button will send their data to a web server.

Active learning: Implementing our form HTML

Ok, now we're ready to go to HTML and code our form. To build our contact form, we will use the following HTML elements: <form>, <label>, <input>, <textarea>, and <button>.

Before you go any further, make a local copy of our simple HTML template — you'll enter your form HTML into here.

The <form> element

All HTML forms start with a <form> element like this:

<form action="/my-handling-form-page" method="post">

</form>

This element formally defines a form. It's a container element like a <div> or <p> element, but it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's usually standard practice to always set at least the action attribute and the method attribute:

  • The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted.
  • The method attribute defines which HTTP method to send the data with (it can be "get" or "post").

Note: If you want to dig into how those attributes work, it is detailed in the Sending form data article.

For now, add the above <form> element into your HTML <body>.

The <label>, <input>, and <textarea> elements

Our contact form is not complex: the data entry portion contains three text fields, each with a <label>. The input field for the name is a single-line text field. The input field for the e-mail is an input of type email: a single-line text field that accepts only e-mail addresses. The input field for the message is a <textarea>; a multiline text field.

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">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </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.

The <li> elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the for attribute on all <label> elements; it's a formal way to link a label to a form widget. The for attribute takes as its value the id of the form control with which it is associated. 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 widget, and provides an accessible name for screen readers.  If you want a better understanding of the other benefits of this attribute, you can find the details in How to structure an HTML form.

On the <input> element, the most important attribute is the type attribute. This attribute is extremely important because it defines the way the <input> element appears and behaves. You'll find more about this in the native form widgets article later on.

  • In our simple example, we use the value <input/text> for the first input — the default value for this attribute. It represents a basic single-line text field that accepts any kind of text input.
  • For the second input, we use the value <input/email> that defines a single-line text field that only accepts a well-formed e-mail address. This turns a basic text field into a kind of "intelligent" field that will perform some checks on the data typed by the user. It also provides for the inclusion of the @ symbol on the default keyboard on devices with dynamic keboards. You'll find out more about form validation in the form data validation article later on.

Last but not least, note the syntax of <input> vs. <textarea></textarea>. This is one of the oddities of HTML. The <input> tag is an empty element, meaning that it doesn't need a closing tag.  <textarea> is not an empty element, meaning is should be closed it with the proper ending tag. This has an impact on a specific feature of HTML forms: the way you define the default value. To define the default value of an <input> element you have to use the valueattribute like this:

<input type="text" value="by default this element is filled with this text" />

If you want to define a default value for a <textarea>, you just have to put that default value between the opening and closing tag of the <textarea> element, like this:

<textarea>
by default this element is filled with this text
</textarea>

The <button> element

The markup for our form is almost complete; we still have 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 <button> element; add the following just above the closing </form> tag:

<li class="button">
  <button type="submit">Send your message</button>
</li>

You'll see that the <button> element also accepts a type attribute — this accepts one of three values: submit, reset, or button.

  • A click on a submit button (the default value) sends the form's data to the web page defined by the action attribute of the <form> element.
  • A click on a reset button resets all the form widgets to their default value immediately. From a UX point of view, this is considered bad practice.
  • A click on a button button does... nothing! That sounds silly, but it's amazingly useful for building custom buttons with JavaScript.

Note: You can also use the <input> element with the corresponding type to produce a button, for example <input type="submit">. The main advantage of the <button> element is that the <input> element only allows plain text as its label whereas the <button> element allows full HTML content, allowing more complex, creative button text.

Basic form styling

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, so for the moment, we will just get you to add some CSS to make it look OK.

First of all, add a <style> element to your page, inside your HTML head. It should look like so:

<style>

</style>

Inside the style tags, add the following CSS, just as shown:

form {
  /* Center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* Form outline */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  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: .5em;
}

Now our form looks much less ugly.

Note: You can find it on GitHub at first-form-styled.html (also see it live).

Sending form data to your web server

The last part, and perhaps the trickiest, is to handle form data on the server side. The <form> element defines where and how to send the data thanks to thethe action and method attributes.

We provide a name to each form control. The names are important both browser and server sides; 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">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>

  ...

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 embodied 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. 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 the Sending form data article.

Summary

Congratulations, you've built your first HTML form. It looks like this live:

That's only the beginning, however — now it's time to take a deeper look. HTML forms are way more powerful than what we saw here and the other articles of this guide will help you to master the rest.

In this module