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

Chapter 5.9: Special Purpose Input

While we have spent a lot of time talking about the input element, there are still a few more types that can be specified that we should cover. These include reset, button, image (also a button), color, and file.

While there is already a button tag, there are input versions for specifying submit, reset, and buttons. While having both the ability to create buttons with an input element and a button element is redundant, this was most likely due for compatibility issues and for a desire to have the input element represent all types of input even if some of the types are duplicates of other elements.

For buttons we have already seen the submit input type which certainly makes sense as submitting a form clearly is a vital part of the form so having a separate input specifically for doing submissions makes a lot of sense. The reset type is the equivalent of a button with the type of button set to “reset.” The reset activity will set all the form elements back to their default states effectively clearing the form.

You can also have buttons in a form by using the input type button. This creates a button just like the button tag would, with the text to display in the button being in the value parameter. Just like with buttons, to do anything with them you need to write JavaScript to handle the buttons. They do not serve any other purpose with the form. Here is an example:

And the function in the script element:

The image input type is kind of misleading as it is a button. More specifically, it is a submit button. The idea is that you may want to use an image for your submit button so you would use image instead of submit and provide an image. The image type works the same way as the img tag does for specifying the image to use. You have to have an alt attribute to describe the image, src to specify the image file to use, width and height to specify the dimensions of the image with scaling happing if the size specified does not match the image size.

In this empty form we are just going to the same page but doing so with a fancy looking button.

Colors can also be selected. This usually is to allow users to customize some aspect of their browser but can be used for any time you need a color selected. Once we learn about the canvas tag in a later chapter, we could easily use the color tag to create a simple paint program. The value holds a html hex color code and the selected colour will be converted to the color code. You can then use the value to adjust colors. Here is a simple example of the color tag:

Here is text in the selected color.

Finally, there is the file input type. This brings up a dialog box to allow the user to select a file that they want the web page to work with. This use to involve sending the file to the server, something that can still be done in forms, but with the introduction of Web Workers we also got the FileReader API which we will cover in a later chapter. The file type is kind of interesting as the value attribute can only be set by the user selecting a file with other attempts to set it being ignored. This is for security reasons, as otherwise it would be easy to maliciously access the user’s computer.

The file tag allows you to specify what types of files that you want to get from the user by using the accept attribute. These are MIME types but you can use common file extensions which will automatically be mapped to the appropriate file type.

You may also allow the user to request multiple files at the same time by adding the multiple attribute. Here is an example of requesting a file.

The code for handling the file will load the file and put the contents of the file into the file contents pre tag. This is done using some asynchronous methods which we will be discussing in a much later chapter so do not feel discouraged if you do not understand the code but consider this foreshadowing what can be done in modern browsers.

Next we will be looking at letting users select from a list of options.