≡ Menu

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!

{ 17 comments… add one }
  • Tom February 2, 2016, 2:31 pm

    How will I get the details to show on the address bar using Java. I’m making a program to validate login details using Java and HTML only (no scripting language).

  • Wilson July 22, 2016, 8:04 am

    I am trying to do a database offline. pls how can i get the output of a form from an offline platform. I am programmimg with HTML

  • dedicated servers April 29, 2017, 11:17 am

    Thankfulness to my father who shared with me about this blog, this
    web site is in fact remarkable.

  • Elliptical taines May 29, 2017, 4:25 pm

    hello!,I reallʏ like yoᥙr writing ѕo ѕo much!
    share wᥱ bе іn contact extra abоut your post оn AOL?
    I require an expert in this space to unravel my рroblem.

    Mаybe that is you! Takіng a look forward to ѕee yoս.

  • piano guys tee July 16, 2017, 1:16 am

    always i used to read smaller articles or reviews that as well clear their motive, and that is also happening with this post which I am reading here.

  • donald trump facts July 17, 2017, 10:16 pm

    Pretty! This was a гeally wonderful article. Tһanks for providing
    tһese details.

  • plantrustler.com September 21, 2017, 3:11 pm

    Microsoft has chosen to integrate the Zune software into the phone,
    which can be mature and full-featured, previously being inside
    Microsoft Zune for years. May be using this type of expense of advancement today it
    might be very challenging to keep pace because of the generation coming ahead.
    Upon inspection the Slingbox Pro distinguishes itself from the sibling
    the Slingbox by getting the link and control over approximately four audio-visual sources as well as providing an integrated
    Freeview DBV-T tuner for basic cable connections.

  • chelsea fc news blog September 21, 2017, 3:19 pm

    Looking for a new position with good salary seems to be a tough task nowadays.
    Anyone can compose and reveal any topic, from hobbies to political vies.
    Many blog authors will not approve an undesirable comment, so you have
    to take the time to add real value and make certain your
    comment goes live.

  • health o meter scale review September 21, 2017, 3:40 pm

    We are typical seeking tips on how to lose weight, live longer and eat healthier.
    5) Red Wine – A glass of burgandy or merlot wine that assures longevity does help to lessen BP.
    After foods undergo fermentation, they go by having a biochemical change, which will has completely
    different nutritional properties than the foods did in their original state.

  • renwerks.com September 21, 2017, 4:49 pm

    So now referring full circle back to the average person who may have taken on the role
    in the blogging site administrator. The readers of the blog are obviously thinking about the
    overall field of knowledge with the blog.

    The informal form of your site gives Internet consumers to be able
    to familiarize yourself with individuals who’re behind the
    business better, rendering it easier for them to trust you and buy your site.

  • https://ewizmo.com September 21, 2017, 5:05 pm

    The phone is integrated with 8-GB and 16-GB memory and expandable Micro – SD memory option that supports around 32GB memory.
    Try to research before leaving your home on the lifestyle from the location. Possible complications inlcude drug reactions, infection, bleeding, or perforation with the digestive system that might require surgery.

  • Latoya September 22, 2017, 1:43 pm

    Everything is ver open with a very clear description of the challenges.
    It was truly informative. Your site is very useful.
    Many thanks for sharing!

  • news u poynter September 22, 2017, 6:29 pm

    Not surprisingly, this sort of rhinoplasty isn’t just inexpensive, but fast.
    The relationships you establish will be the difference between your
    success and valuable time wasted. You has decided to recognize similar movement patterns for
    several currency pairs.

  • travel quotes wall art September 22, 2017, 6:44 pm

    This marketplace is definitely not your run-of-the-mill grocery store, in fact it is worthy of a call
    whether you may buy anything or not. Sometimes it’s
    much easier to just stay closer instead of require transport back and forth from the big event — explore accommodation that’s within walking
    distance. Bald Mountain attracts experienced skiers from all
    over the world, as well like a decent share of celebrity and well-to-do travelers
    as well.

  • news 08701 September 29, 2017, 7:38 am

    It works as being a cms, but provides you with lots of control
    over what are the blog will look like and the way it is going to function. You can market t-shirts
    and bags that are branded along with your blog’s logo
    to improve some income. Normally, these would contain dummy
    text to acquire a thought the way the finished font side in the card you
    are creating.

  • oroskopiosexkaigynaika.wordpress.com October 25, 2017, 10:09 am

    What’s Happening i’m nnew to this, I stumbled upon this I ave discoverred It positivwly useful and
    it has helped me oout loads. I hope to give a contribution & aid
    other users like its aided me. Great job.

  • Niyonsaba June 18, 2019, 8:57 am

    is it possible for me to create an html form whose back end is developed in java without using jsp or servlets

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Next post:

Previous post: