HTML Form Basics

HTML is used mainly for presenting and showcasing information for the visitor. But it’s also easy to allow them to enter information and use it in various ways. This tutorial uses the example of a contact form.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Graphic Templates

Graphic Templates

Logos, Print & Mockups
 Graphics

Graphics

Icons, Vectors & More
 Web Templates

Web Templates

Landing Pages & Email
 CMS Templates

CMS Templates

Shopify, Tumblr & More
 Presentation Templates

Presentation Templates

PowerPoint & Keynote
 Fonts

Fonts

Sans Serif, Script & More

Explore Design Resources

Simple Contact Form

Providing your web host supports PHP, you just need to follow our example below to email the contents of a form to yourself. Firstly, this is the HTML code to put on your page:

<form action="submit.php" method="get">
   Name: <input type="text" name="name" /><br />
   Email Address: <input type="text" name="email" /><br />
   Message: <textarea name="message"></textarea><br />
   <input type="submit" value="Send Form" />
</form>

This will result in a form which looks similar to the following:

Name:

Email Address:

Message:


So you’re able to collect the data. Now to explain how to email it. To do this, you need to make a file called submit.php and put it in the same folder as your HTML file. It’s quite complicated to go into exactly how this works, but if you copy and paste the following code it should work fine:

<?php
$subject = "Website Message";
$message = "Someone sent you a message from your website:
Name: $name
Email: $email
Message: $message";
$youremail = "[email protected]";
mail($youremail,$subject,$message,"From: $email");
echo 'Thankyou for filling in a form!';
?>

All you need to do is change [email protected] to your actual email address. You’ll be receiving form submissions from your website in no time!

Other Form Options

HTML doesn’t just use text fields for collecting information. You also have the option to use checkboxes, radio buttons and drop down lists. Feel free to take and use the examples below:

Radio Buttons

These allow you to enforce that the visitor only makes one choice, unlike checkboxes which allow you to select multiple answers/settings. They look something like:

Red
Blue
Yellow

The code you use to create the above is:

<input name="favouritecolor" type="radio" value="red" /> Red
<input name="favouritecolor" type="radio" value="blue" /> Blue
<input name="favouritecolor" type="radio" value="yellow" /> Yellow

Checkboxes

Several checkboxes can be ticked, allowing multiple selections. It is as simple as changing the word radio above to say checkbox:

Red
Blue
Yellow

The code you use to create the above is:

<input name="favouritecolor" type="checkbox" value="red" /> Red
<input name="favouritecolor" type="checkbox" value="blue" /> Blue
<input name="favouritecolor" type="checkbox" value="yellow" /> Yellow

Drop Down Boxes

Drop down boxes work in a similar way to radio buttons, allowing the user to select one option. However, they save a great deal of space if you are dealing with a long list – selecting your country for example:


The code you use to create the above is:

<select name="favouritecolor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
</select>