Tagged

Understanding HTML Forms, with Examples

Updated: September 27, 2023 by Tyler Von Harz | Leave a comment

Key Points

HTML forms are essential for submitting user information to websites, such as requests for callbacks, emails, appointments, or surveys.
To create a functional HTML form, you need to use the
tag and provide it with an action and method.
Labels and placeholders are both important for accessibility in HTML forms.
CSS can be used to style HTML forms and improve their appearance.
Google Forms is an alternative to HTML forms for collecting data and can be linked to a Google Sheet for easy analysis.

HTML forms are everywhere. It’s difficult to interact with the internet without coming across a form in one way or another. Forms are how you submit information to a website, whether it be a request for a callback, an email, setting an appointment, or filling out a survey.

If you’re new to programming, starting with HTML and CSS is one of the first things you should tackle. Building a strong foundation in basic markup languages will give you a leg up for building more complex websites and apps in the future. And one of the most fundamental parts of an interactive website is the ability to submit user information.

That’s why HTML forms are so important. In today’s guide, we’re going to check out how HTML forms work, some of their most essential elements, attributes, and ways you can implement them in your projects. Let’s get into it!

What are HTML Forms

HTML forms take input from the user through various input types, and submit them to a PHP file for processing. All you need to do is place your <input> tag within the <form> tag. Below are the different types of inputs you can use with an HTML form.

<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">

To create a functional HTML form, you’ll need to use the <form> tag and provide it with an action and method. Depending on what you want to do, you can use a method get request or a method post request.

Examples

Below is an example of a simple form that sends data to a PHP file.

<form action="welcome_get.php" method="get">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>

The result will look something like this:

*A simple HTML form*
©History-Computer.com

Then, data is sent to a PHP file for processing. That looks like this:

<html>
<body>

Welcome <?php echo $_GET["name"]; ?><br>
Your email address is: <?php echo $_GET["email"]; ?>

</body>
</html>

This will send the user’s data to your web server or database, where you can do with it as you please.

Labelling Inputs in HTML Forms

The most common type of input for HTML forms is the text input: <input type=”text”>

Of course, you’ll want to have more than a blank text field in your form, especially if you want your users to know what to type there. There are three common ways to do this. In the previously given example, we simply wrote “Name” or “E-mail” directly before starting the <input> tag.

This way technically works, but it is a little sloppy and isn’t regarded as the best practice.

A better course of action is to use the <label> tag, which will place a label above or below your text field. The end result will look the same, but the code is slightly different:

<form action="welcome_get.php" method="get">
<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" "><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" ><br><br>
<input type="submit">
</form>

Alternatively, you can give your inputs a placeholder. That will put the label directly within the text field. When the user starts typing, the placeholder will go away.

<form action="welcome_get.php" method="get">

  <input type="text" id="fname" name="fname" placeholder="first name"><br>
  
  <input type="text" id="lname" name="lname" placeholder="last name"><br><br>
<input type="submit">
</form>

The end result looks somewhat different, and can usually fit better with more modern designs or websites that are trying to look more minimalist.

html forms placeholder input — *Using a placeholder in our text input simplifies the appearance.*
©History-Computer.com

The best practice is to use both labels and placeholders. Labels are vital for accessibility, which we’ll get to in a minute.

Styling HTML Forms with CSS

The forms we’ve made so far are pretty ugly. If you want to improve the look of your forms, you’ll need to break out some CSS. Short for “cascading style sheets,” CSS is vital for making your website look better.

To style your form, you’ll need to target the inputs via CSS selectors. Applying attributes such as width, padding, margin, and borders will transform the appearance of your form.

Have a look at the example code below to get an idea of some of the attributes you can apply to your form:

<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid black;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: green;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
}
</style>

Remember what our form looked like before? Applying these styles to it will make it look much better:

*HTML form with CSS*
©History-Computer.com

Making HTML Forms Accessible

Building with accessibility in mind is paramount, especially if you want everyone to be able to access your site. Blind users rely on things like labels so that screenreaders can detect what your form is about and read the information out loud.

Proper use labels will ensure that users who can’t see your form can still access it. Additionally, labels are helpful for users who have trouble clicking on smaller buttons or input fields. You may have noticed the for attribute in the previous examples. The for attribute must match the id of the input.

If you opt to not use a label for your form, and use a placeholder instead, then you must still create an accessible label for your input. One way to do this is with the aria-label. Simply place the aria-label immediately after your placeholder. That looks like this:

<form action="welcome_get.php" method="get">

  <input type="text" id="fname" name="fname" placeholder="first name" aria-label="first name"><br>
  
  <input type="text" id="lname" name="lname" placeholder="last name" aria-label="last name"><br><br>
<input type="submit">
</form>

Alternatives to HTML Forms

As simple as HTML forms are, they aren’t the best fit for every situation. If you’re building out a website for a business or an app, it makes sense to build a form using HTML. But what if you are just trying to collect information without building a whole website?

Say you’re conducting a poll or a survey, and all you want to do is put a form somewhere on the internet and collect answers in a database. That’s where Google Forms comes in handy.

With Google Forms, you can collect data from visitors by sending them a link, and you can see all of the answers in a Google Sheet.

Visit Google Forms (make a Google account if you don’t already have one), and you can start building your own form, or select a template. If you select a template, you can still customize it as you wish. Once you finish up, link it to a Google Sheet so you can peruse the responses.

Finally, you can send out the link to your social media followers and co-workers, or just post it online and watch the responses come rolling in.

Google forms sheet — *Responses will flow into a linked Google Sheet.*
©History-Computer.com

Wrapping Up: HTML Forms

So, there you have it. HTML forms are super simple, and they are everywhere on the web. You’ll need to know how they work to build a deeper understanding of how HTML works with the rest of the tech stack. Once you have a solid understanding of HTML forms, you can implement more advanced solutions.

Summary Table

HTML Forms Topics	Description
What are HTML Forms	HTML forms take input from the user through various input types, and submit them to a PHP file for processing.
Labelling Inputs in HTML Forms	Labels are used to guide users on what to type in the input fields. They can be placed above, below or within the text field.
Styling HTML Forms with CSS	CSS is used to improve the appearance of the forms by applying attributes such as width, padding, margin, and borders.
Making HTML Forms Accessible	Labels are vital for accessibility, especially for blind users who rely on screenreaders. Proper use of labels ensures that everyone can access the form.
Alternatives to HTML Forms	Google Forms is an alternative to HTML forms, especially when collecting information without building a whole website. It allows data collection by sending a link and the responses can be viewed in a Google Sheet.