From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.3: The FORM tag

As the purpose of a form is to get information from the user and send it to the server, we are going to need a way of indicating what part of the page is for sending to the server. While using JavaScript to process the form for internal page use is now a possibility, we still use the form mechanics that HTML provides. As with everything in HTML, this is done by using a tag. Nested inside this tag are additional tags describing the form elements.

This will result in the following:

You will notice that there is no real indication that there is a form. There are additional elements that let you make the form and its different sections clearer, but they are optional. Let’s take a look at the attributes used in the form tag.

The action attribute is optional and is the URL of the page that will be loaded to process the results of submitting the form. If omitted, or if “” is used, then the same page is loaded. While reloading the page you are on may seem senseless, remember that languages like PHP let you control what the HTML sent to the browser will be and so you can have different content on the same page based on what was sent by the form.

The method attribute has 3 possible values which are post, get, and dialog. These determine how the form information is sent to the server (or client, in the case of dialog). Recall that the original intent of forms is that we are sending the results of the form to the server for processing.

The “get” option sends the form information by adding it directly to the URL. If you have seen a URL that has a question mark followed by a set of parameter=value statements separated by ampersands then you have seen a get request. It is possible to use other characters used but those characters are the standard ones. This is a very convenient way of sending forms and has the advantage that you can manually write the URL by hand for testing. It also has the advantage that you can create a bookmark that will return the results of sending the exact same form. The downside is that the form information is sent in the clear so you do not want to use get if you are sending sensitive information. This is the default if you omit the method attribute.

To hide the form within the HTTP query, we use the “Post” option. All the form information is still being sent, but it is not part of the URL so is harder to get at, and if you are using HTTPS, the form will be encrypted. This is what you use to send sensitive information to the server.

The newest method, which was introduced in 2022, is the “dialog” option. We will cover dialog boxes at the end of this chapter.

To control where the result page from submitting a form will appear we have the target attribute. I didn’t fully explain this attribute when we covered links. It simply tells the browser where to show the new page. This can replace the existing page (the default) by using “_self”. If you want the results on a new page you can use “_blank” which opens in new tab or window making the current page the parent of that page. “_parent” lets you change the parent page, while “_top” replaces the topmost parent, which would be the very first page that spawned related children. You can also used a named page for a browsing context, which generally is used for iframes and since iframes are evil we will not be discussing them.

Sometimes you do not want the browser to fill out a form for the user. The autocomplete attribute can be used to stop the browser from using autocomplete by setting it to “no”.

The form is filled out with input elements, which we will be spending the bulk of this chapter explaining, but, for client-server use there is one input element that is required and that is the submit button. There are several ways of creating a submit button, with the easiest way being using a <button> tag.

Buttons work a bit differently based on whether they are in a form or not. This is due to the way the type attribute works. If inside a form, the type of the button defaults to “submit”, while outside of the form the type defaults to “button”. Submit makes the button a submit button which sends the form data to the URL specified in the form’s action. The button type does nothing, expecting the button’s action to be controlled by JavaScript. A third type is “reset” which is tied to a form and will set all the form elements back to their default state.

There are several attributes that you can set on the button to change how the button behaves when in a form. Buttons outside a form can be tied to a form by using the form attribute. To change the URL to send the form to, we can use the formaction attribute, you can change how to post the form using the formmethod attribute, and the formtarget attribute changes where the submitted page will be returned to.

From a client-side perspective, we will be using buttons not to submit forms but to do our own work. Button elements support the onclick method which can be set up from JavaScript or have the code right in the tag. The ButtonDemo in the git repository demos this and other uses of buttons. Here is the code used to set a button to run a function:

Right now we just have a form that has buttons in it, while most forms request that users input information such as their name, rank, and serial number. We will look at getting text into a form in the next section.