Web Development
GUIDE

Creating Forms In HTML

Description: Need some kind of form for your web pages? Then you'll need to know how to create them using HTML.

There are plenty of good uses for forms on web pages, which is why it helps to know the basics for creating them using HTML commands and tags.

If you know anything about HTML you will know that most commands involve beginning and end tags. It's also the case that when it comes to more in depth parts of a web page, such as forms and tables, you will find other tags occurring within the main ones that indicate a form or a table is being created.

The form tags are as follows:

<form> and </form>

These indicate the beginning and the end of a form. Everything else goes in between these two tags.

The difference with forms is that you need to use a server side scripting language for them to work. It's not just a case of creating the HTML that allows a page to be shown to someone on the internet. People need to be able to fill that form in and send the information off, so they can receive what they are asking for - which is what you are offering on the form itself.

Once your scripting is in place to be able to interpret the information you send it via the form, you can create your form. These can get extremely complicated, so let's look at a simple form to get an idea of how they work.

One of the most popular types of form in use on the internet today (which you may not even think of as being a form at all) involves getting the user to sign into their account. This will consist of asking them for their user name and password, which can then be confirmed by the server side scripting as being correct, before the user's personalized website account information is returned to them to see.

Here is how we would create this kind of form. We need to insert the requests for the information required in between the form tags. So in this case we are requesting the user name and the password as follows:

<form>
Username:
<input type="text" name="username">
<br>
Password:
<input type="text" name="password">
</form>

If the user should type their user name and password into the form in the wrong order, the server side scripting would recognize this error and the information would need to be inputted again. This is because each specific part of the form occurs in a specific order as specified by the HTML.

You can also specify which kind of form you are creating by using different "type" commands within the HTML. For example, after the opening form tag you could use <type="submit"> to create a submit button for someone to click to submit the information they have typed into a form, and <type="checkbox"> to create a small square which can be clicked on and ticked to indicate a certain piece of information within the form is correct, or is agreed to by the user of the website.

If you want people to be able to subscribe to your mailing list you can use a "form action" within the form itself to indicate that the request needs to be sent to your server side script to be processed. If your script is identified by the name "applications.cgi" for example (CGI stands for common gateway interface and it is capable of processing forms) then you will want to create a form that has this capability within it. This is how the "form action" looks:

<form action="applications.cgi" method="post">

You would then create the rest of your form around this command.

There are numerous different examples of forms and different ways of creating them in HTML so they communicate with your server and send back the appropriate information to the visitor. It's best to start by experimenting with the first example given and then take a proper tutorial to explore the countless options that are available to you.

The most important thing to remember is that you shouldn't use forms just for the sake of it. Make sure there is a worthwhile reason for doing so, and your website will benefit as a result.