Introduction to HTML forms
This guide walks through HTML form basics, including a discussion on how forms work and what code needs to be implemented for a basic form structure.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this section of the course, we're going to walk through how to use HTML forms.

HTML forms are an important part of application building. At the same time, you can't use it as a mere HTML code. Rather, you'll have to tie it with a server code such as Rails, PHP, NodeJS, or anything similar. This is because by its very nature HTML is stateless, which means it's not going to know what information is sent from page to page, and where it is stored. So, no kind of functionality such as sending emails is possible with HTML forms, until you integrate it with a server code.

That said, we're going to see how to create a basic form skeleton.

There are a few requirements while creating a form, and this is what we'll go through in this video.

Let's start with a <form> tag. There are some attributes that have to go inside of this form tag, and they are:

action - The page that we want our system to get directed to.

method - You can use GET or POST as methods, and they are the only ones you can use. When you use GET, all the parameters will get passed into the string itself.

For example, if you open Google and search for any string, then this value gets added to the string, like this:

large

If you look at the URL closely, the first parameter is something called "safe" that Google has, in order to check if the safe search feature is on or not. The second parameter is "q", which is the short form for query, and this is what I typed in the search box. Since our URL can't have spaces, it is represented by the symbol "+".

In the case of POST, none of this information is available in the URL. POST is mostly used for secure HTML forms, where you don't want anyone to know the information that is being passed.

large

In this case, I'm submitting an email ID and password, so it's not a good idea to pass such sensitive information in the URL. For such secure forms, we use the POST method.
So, those are the two things required in an HTML form.

Inside this form, we're going to create a "Submit" button, just for a demo. This way, you can see the form on the browser. You can change the content on the button using a parameter called value.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML Forms</title>
  </head>

  <body>
    <form action="contact_form.php" method="get">
      <input type="submit">
    </form>
  </body>

</html>

So, this is the form skeleton.