HTML Forms 101

Forms are an essential piece of any modern website. In this article we're going to learn what HTML forms are, how they work, and how you can use them.

What Are HTML Forms?

Commonly called web forms, HTML forms are an essential piece of any modern website. When you post to Twitter, search on Amazon, or sign in to Facebook - you're seeing a web form in action.

They enable an essential layer of interaction between the user and the website or application they're interacting with. That interaction happens when the user - or client - sends information to the web application - or server. This interaction is an example of the Request-Response cycle.

How Do HTML Forms Work?

Let's take a look at how this Request-Response cycle works in a real-world example. The form we'll examine is the Twitter login.

The Twitter login page

When we enter our username and password and click "Log in" a request is made to the Twitter server.

If we entered something incorrectly, the server will return a response telling us the email or password used is wrong.

GIF of using the incorrect username or password when logging into Twitter

Now if try again with a valid username and password, we see a different response from the Twitter server. It signs us on.

GIF showing a successful Twitter sign on

Parts of an HTML Form

Now that we've seen a working form, how can we create one of our own?

Forms are composed of different parts working together. Think of each part like a Lego brick. Individually they are simple, but combine them and you can create unique projects.

These parts are called HTML elements and for any form to work the way we want it to, these elements need to be used together. To understand how these parts work, let's define a simple form and then look at what each line of the form does.

This example form is for an email sign up that you might use on a website to grow your newsletter subscribers.

            
              <form action="https://example.com/" method="POST">
                <label for="email-input">Email:</label>
                <input type="email" name="email-address" id="email-input">
                <input type="submit" value="Subscribe">
              </form>
            
          

Let's look at the first and last lines.

            
              <form action="https://example.com/" method="POST">
              ...
              </form>
            
          

The <form> HTML element defines the start of the form. Everything between it and </form> is a part of our form. We then have the action attribute, which specifies where our form data will be submitted to on the server. If this were a working form, our action might contain logic to save the email to our database.

Then there's the method attribute, which we have set to POST.

            
              ...
              <label for="email-input">Email:</label>
              ...
            
          

This is the HTML <label> element. It's used to describe the input that it's next to. We're setting the for attribute, with the value of "email-input". Then the text that's displayed to the user Email:.

The value of the for attribute needs to match the id of the HTML input it corresponds to.

Let's look at that now.

            
              ...
              <input type="email" name="email-address" id="email-input">
              ...
            
          

The HTML <input> element is used to create an area where users can enter data.

The type attribute we're using here is "email". There are many different values to use for the type attribute. We're using "email" because this is an input for email addresses.

When the form is submitted, the data in it is sent to the server in a name/value format. The name attribute defines the "name" that the entered value is sent to the server under. The name for this input is "email-address", i.e. email-address="hello@formjelly.com".

Going back to the for attribute in the <label> element, the id uses the same value "email-input" to associate the two. The input with the id of "email-address" is associated with the <label> that has the "for" attribute of "email-address".

            
              ...
              <input type="submit" value="Subscribe">
              ...
            
          

Our form needs a way for users to submit it. That's exactly what this input does. We're using another HTML <input> element. This time the type attribute is "submit", which means this input will be rendered as a button.

When clicked the form will be submitted to the location specified in our action attribute in the <form> element above. The value attribute we're using to specify what text to render for our submit button.

Now that we've walked through all the parts of this form, let's see what it would look like rendered on an HTML page.

Next Steps

This was a simple introduction to how forms work on the web, but there's still a lot more to learn. Different input types and attributes, dropdowns and checkboxes, not to mention styling with CSS.

If you need complete control over your form and where it's posted, then creating your form from scratch is the way to go, but sometimes it's not convenient to do that.

We created formjelly to make it easy for anyone to create a form.

Learn More