In this lesson, we’re going to take a closer look at the form HTML tag. Forms let users enter input. They are a very important part of websites.
<html>
<head>
<title>Simple Note</title>
</head>
<body>
<form action="create-note.php" method="POST">
<div>
<label for="title">Title</label>
<input type="text" name="title" id="title">
</div>
<div>
<label for="content">Content</label>
<textarea name="content" id="content"></textarea>
</div>
<input type="submit" value="Create Note">
</form>
</body>
</html>
<form action="create-note.php" method="POST">form
The form is one of the only ways a user can send input (text, images, and videos) to the server where the website is hosted. Forms are everywhere. With the advent of JavaScript, forms aren’t as widely used, but they are still good to know.
action=”create-note.php”
The action attribute is similar to the a tag’s href attribute (<a href=”https://paircode.com”>Pair Code</a>).
The value of the action attribute (“create-note.php”) is a PHP page on a server, and the user is sent to the page when he submits the form, but there’s a major difference. In addition to going to the location, any information that the user entered in the form is sent to the PHP page. It’s one of the only ways to get the user’s input to the server.
method=”POST”
The POST method causes the user’s input to be sent to the server invisibly. There is another method called GET. If we used the GET method, all of the user’s input would be attached to The URL, not the best for security, especially if the user entered a password. We’ll dive deeper into this in a later PHP lesson.
<input type="text" name="title" id="title">The input tag lets the user enter some type of input. The type attribute tells us exactly what type of input the user is entering. In this case, the type is just simple text. The user can type into the input box. The name attribute has a couple important purposes that we’ll go over in another lesson on PHP.
<label for="title">Title</label>The label tag is basically used to describe the input. It’s not required, but it’s good for accessibility reasons. The for attribute should be the same as the input’s name attribute. If the name attribute of the input is “title” (<input type=”text” name=”title” />), the for attribute should also be “title.”
If the user clicks the label, the corresponding input will become active.
<textarea name="content" id="content"></textarea>The textarea tag lets users enter more text than the text input. The textarea can be multiple lines, whereas the text input can only be one.
<input type="submit" value="Create Note">The submit input is actually a button. When the user clicks the submit button, the data in the inputs (text or images) will be sent to the server.
Forms don’t make a whole lot of sense until you get to see what happens after you click the submit button. We’ll get to see what happens to the form’s data in a later lesson.