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
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
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
actionattribute specifies where the form data should be submitted to.
The method attribute will specify how to submit the data. There are 2 typical ways to send the data in a form which are
POST. When you use the
GET method the form data is sent through the URL, like so:
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
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
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.