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 <label> element to better indicate the <input>'s meaning:

The <label> element has a for attribute that associates the <label> with a specific <input> element. The for attribute’s value should match that of the <input> element’s id value. <label> elements are useful as they allow your <input> elements to be identified by screen readers.

We can now add an additional <input> element that will accept the user’s password, and a <label> to indicate the input’s meaning.

Notice if you write in the password field, the text is obscured since we’ve indicated the <input>'s type attribute has a value of password.

With this example in mind, let’s dive in and look at the variety of inputs we can use with HTML forms.

Text inputs

<input>

We’ve seen how the <input> element can accept text values. There are several different type values that can be used, including:

• text: For plain text.
• password: To obscure a password input field.
• search: To indicate the text field is used for searching a page/multiple pages.
• url: To validate input as a URL address.
• tel: For inputting phone numbers.
• email: To validate input as an email address.

In the case of url and email, the browser will check to see if the input is a valid URL or email address.

<textarea>

If you want your user to be able to include new lines (by pressing “return” or “Enter”) in their text input, you can use a <textarea> element:

Notice how <textarea> elements have a closing tag. You can also specify the size of <textarea> by using the rows and cols attributes.

Buttons

A <button> element should be used whenever you want to create a clickable button to perform some action on the page.

<button> elements are simple to define, and have three different type values:

• submit: Submits form data to a server.
• reset: Resets all the data in the current form.
• button: No default behavior.

Selection inputs

<select>

You can use <select> (with nested <option>) elements to create a drop-down selection of items that a user can choose from:

Including the selected attribute in an <option> element will show that option by default.

Additionally, if you want to group options into different categories, you can nest <option> elements in an <optgroup> element:

Radio buttons + check boxes with <input>

The <input> element has other type values that accept inputs other than text. For instance, radio buttons can be used to create a list of options where you only want one option selected:

To group the radio buttons into one selection, each <input> element’s name attribute must have the same value. The optional checked attribute will select one of the radio buttons when the page loads.

If you want to create a list where the user can select multiple options, you can use checkboxes. A checkbox can be specified by using an <input> element with a type value checkbox:

Like radio <input> elements, checkboxes must have the same value for the name attribute to be considered part of the same group. The main difference is that multiple checkboxes within the same group can be selected.