HTML Forms

Overview

HTML forms are how we receive user input on our web pages. If you’ve ever visited a blog and left a comment or used your credit card online to purchase something, you have used HTML forms to interact with the web page you were visiting.

Say we’re trying to create a login page. We will need an HTML form to get the user’s username and password. Let’s first create a form element using the <form> tag:

As you may have noticed, the only thing present in the output is the h1 element. This is because the <form> element only declares the HTML form.

To start accepting user input, let’s add an <input> element that accepts text:

You should now notice that there is an empty text box that you can click (or focus on) that accepts text input. Also, take note that <input> elements do not have a closing tag.

But having just a text box doesn’t indicate what the input is used for. Let’s add a ...