HTML Forms

html formsForms, forms, forms!

We’re all familiar with forms right?

We’ve probably all filled out hundreds of forms in our lifetimes.

Forms to apply for a drivers license.

Forms to renew our drivers license.

Forms to apply for health insurance.

You get the idea.

The point is that all these forms have one thing in common. They are a way for us to organize questions in a way that we collect data from people.

And when we talk about HTML forms, things are no different!

What are HTML Forms used for?

HTML Forms are used as a sort of “container” that houses all the input elements used to collect data from a user. You can think of an HTML form like the piece of paper that houses all the boxes that you need to fill out when you’re renewing your license.

Without that piece of paper, the form would be useless. That’s kind of like an HTML form. If we didn’t actually use HTML forms, then all the input elements wouldn’t really DO anything.

HTML forms are used as the means to deliver the data from the HTML page to a server of some sort. Once the data is delivered to a server, the server can then take the data and DO something with it (hopefully something useful).

Since information should be delivered to a server (most commonly a web server), HTML forms require you to tell them where to send the data using an action property within the form tag. This is where you’ll specify the URL where the data should be sent… then ideally you’d have a web server running and “listening” on that URL so that it can receive the data.

In Java, we use the Spring Framework with Controllers to set up this workflow. The URL in the action property will point to a Spring Controller which is programmed to receive the HTML data. We talked a little bit about Spring controllers back in Episode 34 of the podcast.

How to code Forms in HTML

Alright, so now that you get the concepts behind HTML forms, let’s look at the syntax!

In this example, I’m going to create a form that would hypothetically handle a user login/password field with a submit button… unfortunately the actual code won’t work, as I don’t have it hooked up to a web server.

<form action="/someUrl" method="POST">
  Username: <input type="text" id="username" /><br/>
  Password: <input type="password" id="password" /><br/>
  <input type="submit" value="Submit"/>
</form>

Here’s what the above code would look like:

Username:
Password:
    
Note: If you click on this submit button, it will take you to “/someUrl” which doesn’t exist, so you’ll need to hit the ‘back’ button in your browser.

Alright, so as I mentioned, when you click on the “submit” button, it WILL actually try to submit the data that you entered into the username/password input fields… however, since I don’t have any code set up to receive data via the specified action URL, you’ll just receive an error saying the page doesn’t exist. However, if I *had* created a Controller that was “listening” for data on that URL, then I could have processed any usernames/passwords entered into the textboxes.

Pretty neat right?

Html Form Method Post vs Get

Okay, one thing you may have noticed from the above code was that I used a property called method in the form tag.

What was that about?

Well when it comes to HTML forms, you have the option of using two methods by which to “submit” the form’s data to your web server. Get or Post.

GET: is used when the data you’re submitting isn’t sensitive. The common example is something like a Google search. If you don’t need the data to be “hidden” from the user, then you can use a GET. Here’s what that would look like with our previous example:

<form action="/someUrl" method="GET">
  Username: <input type="text" id="username" /><br/>
  Password: <input type="password" id="password" /><br/>
  <input type="submit" value="Submit"/>
</form>

Here’s what that would look like:

Username:
Password:
    
Note: If you click on this submit button, it will take you to “/someUrl” which doesn’t exist, so you’ll need to hit the ‘back’ button in your browser.

The only difference in the code above is that we’re using method="GET", everything else is identical.

You might wonder why the “GET” method is less secure… well it’s less secure because it sends the data from the form fields you filled out in the URL itself.

If this code was properly hooked up to a web server and you clicked the “Submit” button, you’d see the following URL appear in your browser:

https://howtoprogramwithjava.com/someUrl?username=trevor&password=myPassword

The above URL makes the assumption that you had typed in the value “trevor” as the username and the value “myPassword” for the password field.

Having said that, when you DO have sensitive data (like say a username and password) then it’s recommended that you use a POST when creating a form.

In Summary

When you need to submit data from a webpage to a server… HTML forms are the way to go!

There are a few other options that you have when using forms. An example of an uncommon scenario would be when you want to submit something other than typed data, like say, you want to upload a picture. For this, you’ll need to specify a different enctype property for your form.

For a comprehensive list of all the things you can do with forms, just visit the W3Schools via this link.

And as always, don’t forget to sign up for our email list by submitting the appropriate information in the form below. I’ll be sure to send you a special gift when you do! I’m cool like that 😉

Have a good one!