Learn how to build and design websites with our tutorials.

HTML and HTML5 Forms Tutorial

View Tutorial Contents


Introduction to HTML and HTML5 Forms

This tutorial will show you how to build HTML forms that allow you to collect information that is submitted by users as well new HTML5 form features. This particular tutorial will not cover either client side or server side form validation.

HTML forms are used to collect information from users.


The <form> Element

The <form> element defines an HTML form. The <form> element by itself does nothing. An HTML form is a container for form elements and their controls.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<form>

</form>

</body>
</html> 


HTML Form POST And GET Methods

The two most common HTTP request methods that are used to send and receive form information are GET and POST. In general, it is best to use the POST method, which is the most commonly used of the two methods.

The most important thing to know is to not use the GET method if you will sending passwords or any other sensitive information because the information will be passed as part of the URL.


The action Attribute

The action attribute defines where the information will be sent to when it is submitted. This will usually be another web page, script or application which is specified as the value of the action attribute.


The method Attribute

The method attribute specifies the HTTP method that will be used to send the information that is collected from the form. The two most common methods are GET and POST.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<form action="someApp.php" method="POST">

</form>

</body>
</html> 


HTML Form Elements

HTML form elements are different types of input elements: text fields, checkboxes, radio buttons, submit buttons, text areas and more.


The <input> Element

The HTML form <input> element lets you specify an input field where the user can enter data. The <input> element has a variety of input options that can be specified, depending on what information you want that particular <input> field to gather or not gather.

The <input> element is an empty element, it only contains attributes.


HTML Text Fields

The HTML form input type attribute with text value defines one-line input field for text.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<form action="someApp.php" method="POST">

	<label for="firstName">First Name:</label>
	<input type="text" name="firstName" id="firstName" value="first name" />
	<br />
	<label for="lastName">Last Name:</label>
	<input type="text" name="lastName" id="lastName" value="last name" />
	<br /><br />
	<button type="button">Submit</button>

</form>

</body>
</html> 





HTML Password Fields

Password fields are similar to text fields, except that the text that is entered shows up as either an asterisk (*) or a dark circle, depending on the web browser.

Password fields are made up of an <input> element with a type attribute and value of password.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<form action="someApp.php" method="POST">

	<label for="firstName">First Name:</label>
	<input type="text" name="firstName" id="firstName" value="first name" />
	<br />
	<label for="lastName">Last Name:</label>
	<input type="text" name="lastName" id="lastName" value="last name" />

	<label for="password">Last Name:</label>
	<input type="password" name="password" id="password" />	
	<br /><br />
	<button type="button">Submit</button>

</form>

</body>
</html> 






HTML Form label Tag

You should use the <label> tag to label <input> elements. This helps in that, if a user clicks the text within the <label> element, it toggles the <input> field. The value of the for attribute of the <label> element should be same as the id value of the <input> element that you would like it bound to.

The <label> tag also makes it easier to style and position both the <label> tag and the <input> elements.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<form action="someApp.php" method="POST">

	<label for="firstName">First Name:</label>
	<input type="text" name="firstName" id="firstName" value="first name" />
	<br />
	<label for="lastName">Last Name:</label>
	<input type="text" name="lastName" id="lastName" value="last name" />
	<br /><br />
	<button type="button"></button>

</form>

</body>
</html> 





HTML Form Buttons

There are two ways to add buttons to HTML forms. This section will go over both ways.

HTML <input type="submit"> Button

One way to add a button a form is the <input> element with an atribute and value pair of type="submit". This will submit the data collected to the form-handler, which is the what the value of the action attribute points to. The action attribute should always located within the opening <form> element. You have to include this type of button within the form itself. otherwise it will not work.

The <input type="submit"> tag does not require anything the tag itself to submit the collected data. When the button is clicked, it submits automatically. The browser knows what to do.

You can style the button just like any other HTML element. The issue that comes up sometimes is that when design websites, you may want to be able to do more than add simple styles to a button.

It's recommended that you use the <input type="submit"> tag when your form has to be accesible even in web browsers that do not have Javascript or that have it turned off.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<form action="someApp.php" method="POST">

	<label for="firstName">First Name:</label>
	<input type="text" name="firstName" id="firstName" value="first name" />
	<br />
	<label for="lastName">Last Name:</label>
	<input type="text" name="lastName" id="lastName" value="last name" />
	<br /><br />
	<input type="submit" />

</form>

</body>
</html> 




HTML <button> Element

The <button> element gives you the option to be able to place other HTML elements within in as well as the ability to style each of them and it also gives you the option of being able to place the <button> element outside of the form.

The only drawback is that it requires some type of script (for example, Javascript) to activate it. This means that if a user has their web browser's Javascript turned off, the button will not work. So if it is important for a web page's forms to work no matter what, it is recommended that you use <input type="submit"> instead.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<form action="someApp.php" method="POST">

	<label for="firstName">First Name:</label>
	<input type="text" name="firstName" id="firstName" value="first name" />
	<br />
	<label for="lastName">Last Name:</label>
	<input type="text" name="lastName" id="lastName" value="last name" />
	<br /><br />
	<button>Button</button>

</form>

</body>
</html>