The most important HTML element for our game is the form tag.  The FORM is basically an HTML element that allows you to pass information from your webpage to the server. Note that you can have more than 1 form on a page! Each form has 2 main parts:

  • form declaration - this begins and ends with the <form> </form> tags, and tells your webpage that the information between the two tags will be sent to the server.  You also specify where the information will be sent to and how it will be sent.  You can include many different kinds of inputs between these two tags.  For an explanation of the <form> tag, visit the w3schools reference
  • submit button - this is simply a button that can be used to pass the information from your form to the webserver for processing.  It is not strictly necessary; instead of a form button, you can also use javascript to send information to your website.  When might you use a form button?  See below for this more advanced idea.

Within your form, you can pass information to the webserver using the <input> element in several different ways.  For information on some of the different types of Input types you might include in your page, visit the w3schools reference.  

  • text - passes basic information to the server.  This passes a user-enteredline  It might include an email address, a name, a place, but because it can be almost anything it might be as useful for our game, where maybe we want to restrict the user to specific inputs.  For example if the user wants to go to the library, it's probably best not to use this to obtain that information. What if they enter in "libraryu" or "libary" (spelled wrong)...your program might understand that.  That's why some of the other options might be better.  This can be good for output.  For an example of how this element has been used to display output only (and not receive input) visit http://sdssinfotech.netne.net. 
  • radio boxes - when you want the user to choose only one of a certain number of choices. 
  • check boxes - when you want the user to be able to make several yes/no choices
  • hidden - when you want to pass specific information to the server, but you don't necessarily want it to be displayed on the page.
  • button - creates a button.  This by itself is not really useful unless you want to use javascript to make something happen
  • submit - creates a button.  When this button is pressed, the form is submitted to the server.  Not strictly necessary, because you can use javascript to duplicate this.

Another useful way to send information is to use the <select> </select> element.  This creates a drop down list and you can choose one of the options.

Alternatives to the Submit Button

Imagine you want to have a drop down menu with different places to visit.  You could have the user choose the option, and then press the submit button to go there.  Alternatively, you could have the user choose an option from the drop down menu, and as soon as it is selected, the user could go to that location.  This is sometimes preferable, especially if you want to have the form on your page handle things within the page.  

For example, consider you might want to have a "shop" as a location in your game.  Users would choose what items they might want to buy and how much.  These would be form elements.  However, you might have a separate form that tells you that the user wants to leave the shop and go to a new location.  You can save the user an extra click by using some javascript to send the user to the new location without pressing a submt button.

Login Form

Back to Top