HTML Forms

Forms are everywhere on the internet. For entering your search into Google, to paying with your credit card at checkout.

Let’s dive into how to build an HTML form.

HTML Form Tags

Forms are defined with the <form> tag. They almost always include two attributes: action & method. Let’s take a look at this example:

<form action="/submit.html" method="POST">
</form>

Action attribute

The action attribute is where the form data will be sent. This could be Stripe’s URL if it’s credit card information or an email list provider if it’s your email.

The action URL could be on the same domain or an external domain.

METHOD

The method is an HTTP request method. HTTP requests are how computers communicate. HTTP stands for Hypertext Transfer Protocol and it’s often in front of every website URL (for example – https://www.risingblock.com).

There are four main HTTP request methods (sometimes referred to as types):

  • GET – retrieves information or a collection of information
  • POST – creates a new resource
  • PUT – updates an existing resource
  • DELETE – removes a specific resource.

Most forms use POST, as they usually create a new form submission on the backend.

Adding Additional Content In Forms

You can add additional content such as headings or paragraphs in your form if you’d like.

See the Pen HTML Forms with headings and paragraph by Eddy Chung (@rising_block) on CodePen.

You can also add the headings and paragraphs above your form – it’s up to your own preference. Some people prefer to have all related HTML inside the form tag.

Text Input

Text inputs are the most common input types for forms. Search queries are a common example for this input type (example: Google.com).

To create an input, you use the <input> tag. Then use the attribute type to set it to text.

You also need to set the name attribute, which attaches the value of the input to the name attribute you set (example: search_query=”What’s the weather today?”). This is important for submitting your form.

See the Pen HTML Forms search query by Eddy Chung (@rising_block) on CodePen.

You can also set the value attribute if you want to form to be prefilled.

See the Pen HTML Forms search query prefilled by Eddy Chung (@rising_block) on CodePen.

Or you can use the placeholder attribute if you want to give a suggestion, but don’t want to pre-fill. The placeholder is completely replaced when the user types anything into the form input.

See the Pen HTML Forms search query placeholder by Eddy Chung (@rising_block) on CodePen.

Input Labels

If you have some text that describes an input field – it should be a label.

In our example, we should change our prompt “What are you searching for?” from a paragraph to a label.

Labels are defined with the <label> tag and need a for attribute. The for attribute refers to the id of the input field.

So let’s add our new label and an id attribute to our existing input.

See the Pen HTML Forms search query label search query by Eddy Chung (@rising_block) on CodePen.

Number Input

Let’s run through a bunch of more input types. Up next numbers:

See the Pen Numbers by Eddy Chung (@rising_block) on CodePen.

Range Input

Range input is a slider. Great for volume inputs. Requires min, max and step attributes. The step attribute defines the minimum increment or decrement of the input.

See the Pen Range Input by Eddy Chung (@rising_block) on CodePen.

Checkbox Input

Checkboxes allow the user to select multiple options for one question. Thus, these inputs have the same name attribute.

Typically the label for the checkbox input is after the checkbox. This is just how we’re used to seeing checkboxes.

See the Pen Checkbox by Eddy Chung (@rising_block) on CodePen.

Password Input

Password inputs hide the text that is being inputted into the field. It also allows auto-fill password feature of most browsers to work.

See the Pen Password field by Eddy Chung (@rising_block) on CodePen.

Radio Button Input

Radio buttons are great when you want the user to choose one choice.

See the Pen Radio button input by Eddy Chung (@rising_block) on CodePen.

Dropdown List Input

An alternative, more compact option to the radio buttons is drop down lists. These inputs also only allow one choice.

See the Pen Dropdown list by Eddy Chung (@rising_block) on CodePen.

Autocomplete Datalist Input

Sometimes you have a long list of choices for the user to choose from. In this case, consider using a data list input. It comes with autocomplete and is great for geolocation inputs such as a city or country.

See the Pen Data list by Eddy Chung (@rising_block) on CodePen.

Notice that we have to define a separate data list with the <datalist> and <option> tags. Then we set the input’s list attribute to the datalist id.

Text Area Input

The text area input is great for paragraphs. This allows the user to input multiple lines of text.

See the Pen Text Area by Eddy Chung (@rising_block) on CodePen.

Submitting Your Form

The submit type is pretty important – otherwise your form can’t do anything!

To create a submit button, use the input type submit and set the value to the text of the button:

See the Pen Checkbox with submit button by Eddy Chung (@rising_block) on CodePen.

Right now the submit button won’t do much. That’s because we haven’t sent the method or the action!

In another lesson, we’ll look at how to create an endpoint where we can send this form submission.

Learn More

Want to learn more? Get my free developer roadmap for beginners here.

Leave a Comment