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.
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.
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.
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.
Now if try again with a valid username and password, we see a different response from the Twitter server. It signs us on.
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>
<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
... <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
with the value of
"email-input". Then the text that's displayed to the user
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"> ...
<input> element is used to create an area where users can enter data.
type attribute we're using here is
"email". There are many different values to use for the
"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="email@example.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
"email-address" is associated with the
<label> that has the
"for" attribute of
... <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
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.
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.
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.