HTML forms: An Introduction & Beginners Tutorial

Olivian Stoica

by Olivian Stoica

(Last update: 13 Sep 2019)

HTML forms collect user input data over the Web with the help of some scripting languages such as PHP and jQuery. HTML forms are widely used on websites from where visitors can send messages directly to the site owner without using an email client.

Because of their popularity, we thought of writing this tutorial on how HTML forms are made and how they can benefit any type of business.

If you are looking for a better way to create web forms without programming, try 123FormBuilder for free. Using it, you can create a variety of HTML forms, in a couple of minutes.

If you are still interested in coding HTML forms, though, keep on reading.

How to make a form in HTML

First of all, you will need markup language knowledge for creating HTML forms. HTML only creates the structure of the form, while scripting languages help do the rest. Before going into scripts, let’s start with the basic layout.

Making the HTML form elements

The most common HTML form elements are:

  • text box inputs
  • radio buttons
  • check boxes
  • drop down lists
  • submit buttons

There are also more advanced form elements that are derivative to the ones mentioned above. These include password fields, matrix fields, and so on.

Before you define any form element, you must first define the form, using the <form> tag. This is what you would type in your HTML file:

<html>
<body>
<form>
</form>
</body>
</html>

Remember to close the form tag, as you would do with any other HTML markup. The form elements are defined between the two tags:

<html>
<body>
<form>
<--! form elements are defined here-->
</form>
</body>
</html>

Because you want to send the form data to your email address, you will need to add this in your HTML:


<html>
<body>
<form method="post" action="mailto:yourname@yoursite.com">
</form>
</body>
</html>

Trivia: Did you know that in the mid-90s, spam started to be a problem, because of the use of email addresses in the action attribute?

Nowadays, 99.9% of the developers add a script to the form that actually sends the form submission. Example:

<form method="post" action="myscript.php">

This way, bots cannot capture your email address, and you’re safe from spammers. Now let’s jump into each form element and how to use it in your HTML code.

1. Text box inputs

Text boxes or text fields are used when you want the user to type in letters or numbers on the HTML form (e.g. name, physical address, email).

This is the HTML code of the text box element:
Your name: <input type="text" name="yourname" >

Notice that I’ve added a form label by simply typing the text (“Your name: “) before the <input> tag. Here’s how your visitors would view it in their browsers:

Your name:

2. Radio buttons

Radio buttons are used when you want the user to select a single option from a fixed list of choices (e.g. gender: male or female). By following the example, this is how you add radio buttons to your HTML form code:
Your gender:
<input type="radio" name="Gender: " value="male" > Male
<input type="radio" name="Gender: " value="female" > Female

What visitors see:

Your gender: Male Female

3. Check boxes

Check boxes are used when you want the user to select one or more options (even all or none) from a fixed list of choices on your HTML form.

HTML code:

<input type="checkbox" name="browser1" value="Internet Explorer"> Internet Explorer
<input type="checkbox" name="browser2" value="Firefox"> Firefox
<input type="checkbox" name="browser3" value="Google Chrome"> Google Chrome

How browsers will display the code:

Internet Explorer Firefox Google Chrome

You can add a form label to your check boxes:

Your browser: <br /><input type="checkbox" name="browser1" value="Internet Explorer"> Internet Explorer<br/>
<input type="checkbox" name="browser2" value="Firefox"> Firefox<br/>
<input type="checkbox" name="browser3" value="Google Chrome"> Google Chrome<br/>

What your site visitors will view:

Your browser:
Internet Explorer> Firefox Google Chrome

4. Drop down lists

Drop down lists are similar to radio buttons, as you can select only one option from a list of choices, but they are preferred in case of a high amount of choices. If you want the user to select one of the 50 US states, using radio buttons would occupy a lot of space in the web page, while the drop down will occupy less.

Here’s the code:


<select name="websites">
<option>None</option>
<option>One</option>
<option>Two</option>
<option>Three or more</option>
</select>

This is how the drop down list element is shown in the browser:

By adding a form label, you can display it like this:

How many websites do you own?

5. The submit button

Submit buttons are the core form elements of HTML forms. Without them, the user input cannot be saved and captured on your side. As the name implies, once your visitors are satisfied with that they filled in the HTML form, they click the button and the input data is sent to you. Simple as that!

Here’s how you code the submit button:

<input type="submit" value="Submit" />

Combining the form elements into an HTML form

If we put all the form elements together from this tutorial, we get this:

Your name: <input type="text" name="yourname" >
Your gender:
<input type="radio" name="Gender: " value="male" > Male
<input type="radio" name="Gender: " value="female" > Female
<input type="checkbox" name="browser1" value="Internet Explorer"> Internet Explorer
<input type="checkbox" name="browser2" value="Firefox"> Firefox
<input type="checkbox" name="browser3" value="Google Chrome"> Google Chrome
<select name="websites">
<option>None</option>
<option>One</option>
<option>Two</option>
<option>Three or more</option>
</select>
<input type="submit" value="Submit" />

Placed in an HTML file, it would look like this:

<html>
<body>
<form method="post" action="myscript.php">
Your name: <input type="text" name="yourname" >
Your gender:
<input type="radio" name="Gender: " value="male" > Male
<input type="radio" name="Gender: " value="female" > Female
Your browser:
<input type="checkbox" name="browser1" value="Internet Explorer"> Internet Explorer
<input type="checkbox" name="browser2" value="Firefox"> Firefox
<input type="checkbox" name="browser3" value="Google Chrome"> Google Chrome
How many websites do you own?
<select name="websites">
<option>None</option>
<option>One</option>
<option>Two</option>
<option>Three or more</option>
</select>
<input type="submit" value="Submit" />
</form>
</body>
</html>

The end result:

Your name: Your gender: Male Female Your browser: Internet Explorer Firefox Google Chrome How many websites do you own?

That’s it, we created a simple form in HTML. However, it does nothing and doesn’t look appealing. To send user input directly to your email address, you will need to use a programming language such as PHP or ASP. If you want to receive messages from your contact page, you can follow our HTML contact form tutorial or the PHP contact form tutorial for more advanced tips. As for the form design, you need will Cascade-Style-Sheets knowledge(CSS).

There are endless of possibilities to craft your perfect form design, so I’m not going to go into details, but you can find more information here.

With 123FormBuilder, you can select from a variety of pre-defined and custom design themes that will make your HTML form shine, without needing CSS knwoledge.

Why HTML forms are good for business

There are plenty of scenarios where businesses can benefit from using HTML forms. To name a few, you can use HTML forms to:

  • Receive messages from your site visitors
  • Collect orders online from your customers
  • Collect resumes online from job candidates
  • Evaluate members of your team
  • Update your supply list
  • Register attendees to an event

Furthermore, HTML forms are easy to customize, they blend in with your website’s source code, and are easily read by web crawlers and search engine bots. Opposed to flash forms, which aren’t that popular today, HTML forms are a better option for collecting data.

Conclusions

HTML forms are actually a mix of markups and scripts. You cannot use only HTML markups and expect for the user input to be send to you on submit, just like that. You will need to work on the CSS to design the form, add jQuery (with Ajax) to validate the information, and PHP to process the data on the server-side and send it. For experienced developers, it’s not that complicated to do.

Luckily for you, 123FormBuilder can help you create any type of HTML form without coding a thing.

Olivian Stoica

by Olivian Stoica 123FormBuilder

Oli is the search engine optimization expert at 123FormBuilder, who digs code from high-school, loves technology, and cannot stop exploring the open Web.

1 comment

Leave a comment

Your email address will not be published. Required fields are marked *

You love forms as much as we do?

Then share your form story with us! We will read all the submitted cases and reach out the selected ones for further details. The chosen ones will have a case study created and will be featured in our blog, newsletter and social media channels.