HTML Forms

HTML forms are used to capture user input and they are represented by using the <form></form> tags. Take a look at an example form below:

HTML Form Example

This is an example of a login form. The login form is requesting the users email and password.

Take a look at a quick example of how an HTML form is displayed in code:

<form action="page.php" method="GET">
	<!-- Add for elements here -->
</form>

There are 2 common attributes inside of most form tags which are the action attribute and the method attribute.

action attribute

The action attribute specifies the location of where the form should be submitted. In this case it is page.php, so when a user presses the submit button on a form it will submit the form data to a file called page.php.

You don't need to understand how that file captures the user data because this will happen later when you learn about server side scripting languages. For now, just remember that the action attribute specifies where the form data should be submitted to.

method attribute

The method attribute will specify how to submit the data. There are 2 typical ways to send the data in a form which are GET and POST. When you use the GET method the form data is sent through the URL, like so:

http://your-website.com/page.php?email=yoshi%40gmail.com&password=ninja123

This is the page the login form above would submit data to if the user submitted an email of [email protected] and a password of ninja123.

So you can see that the form data would be sent in the URL. Then the server side scripting language would have access to this form data. But, as you can see we probably do not want to submit the users password and make it available in URL parameters. Since this info is confidential we would want to use the POST method in our method attribute of our form like so:

<form action="page.php" method="POST">
  <label for="email">Email Address</label><br>
  <input type="text" name="email"><br>
  <label for="password">Password</label><br>
  <input type="password" name="password"><br>
  <input type="submit" value="login">
</form>

Notice in the code above we are using a few new tags which include the <label></label> tags. The label tags are used to explain what a specific input type is for.

<label for="email">Email Address</label>

So, in the code above we are saying that we want to create a label that prints out Email Address above the email address input. Additionally we want to specify what the label is used for which is email and this will correspond to the name attribute of the input you are explaining.

You'll also notice that inside of our form we are using <input> tags. These are referred to as form elements, and these are used to capture user input via a text box, drop down, or many other form elements. Let's move on to talking more about these form elements in the next section.