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>
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.
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.
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 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.
You can also set the value attribute if you want to form to be prefilled.
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.
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.
Let’s run through a bunch of more input types. Up next numbers:
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.
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.
Password inputs hide the text that is being inputted into the field. It also allows auto-fill password feature of most browsers to work.
Radio Button Input
Radio buttons are great when you want the user to choose one choice.
Dropdown List Input
An alternative, more compact option to the radio buttons is drop down lists. These inputs also only allow one choice.
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.
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.
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:
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.
Want to learn more? Get my free developer roadmap for beginners here.