Advanced HTML Tutorial
Part 3 - Forms
Interactivity is increasingly becoming a major part of many websites. Although the systems are all run by backend software, such as PHP or ASP, there must still be a front-end interface for the visitors to use. The sending of data to a script on a website is achieved by using HTML forms.
The basic idea of an HTML form is the same as that for a paper form. You are presented with a number of related sections of a page where you must input information. There are a number of different ways to enter data, including typing it in, selecting it from a list and ticking boxes. HTML deals with forms exactly the same way as you would with a paper form. There are groups of items and single items all gathered together in one large form and, like a paper form, the HTML tells the browser where to return it to.
Defining A Form
In HTML the first thing you must do is to define a form as a whole. This is done using the tags:
As with any other HTML tag, they apply to everything in between, so everything you contain inside form tags will be part of that particular form. You are not limited to one form on a page, though, as you can have as many sets of <form> tags as you need (for example to provide a login form and a signup form on the same page) as long as they are not nested. <form> is an invisible tag, as it will not change the way in which the page is displayed (although some browsers seem to leave a small space after a form).
A form tag on its own is almost completely useless. There are three main attributes you can use, though, which make the form more useful. The first of these is action, which is used as follows:
The action of a form tells the browser where to send the data entered, in this case the file at http://yoursite.com/cgi-bin/formmail.cgi. This file will then be responsible for dealing with the data. The useful thing about form tags is that the script you are sending the data to can be anywhere on the web, so you are not simply limited to scripts on your site.
The second attribute is the method, which is either used as:
These two methods, POST and GET, refer to the standard HTTP metods of sending data across the internet. The GET method puts the data into the URL of the next page, so that it is visible in the browser's address bar, for example:
This has both an advantage and a disadvantage. The advantage is that URLs can easily be typed in or linked to using GET, although when using forms this is not vital. The disadvantage of this, though, is that the data can be seen by anyone looking at your browser and it can show up in the history. If you are sending sensitive information from your form, you shouldn't use this method.
POST is slightly different. Instead of encoding the form data into the URL, it is sent in a special data stream. This means that it is invisible in the browser, so is far more secure than GET (although sensitive information should still not be sent without encryption). By default a form will submit using GET unless you specify the method (although it is good practice to always specify whichever one you are using).
Usually form tags only ever include the method and action attributes, but occasionally you will need to use the name attribute. This is used as:
In practically every case you should use both the method and action tags when defining a form, and should only use name if you particularly need it.
The most basic type of form input is the standard textbox, like this:
It allows the user to enter text and will send this data to the processing script when the form is submitted. Nearly all input options use the same basic tag, which is the:
tag. This is combined with a number of attributes to provide different types of input on your form. To give a standard text box, you use the following:
This is not quite enough to have a working text box, though, as there is another inportant attribute, name. Name allows you to give the textbox a name with which the data can be referred to later. It should be entered without spaces or special characters, but it is important that each item on the form is given a different name. The name attribute is added as follows:
<input type="text" name="username">
Which names this textbox 'username'. As with many tags involved with HTML forms, this is an invisible change, and is only really of use once you start processing forms. If you are submitting your form using GET, though, the input's name will be shown in the URL of the page (it is also sent with the data if you use POST, but this is invisible), for example:
A third attribute which can be used with your textbox is value. This allows you to set an initial value for your textbox, which can be changed by the user, for example if I had a textbox to take in an e-mail address, I could set the inital value to 'firstname.lastname@example.org' by the following code:
<input type="text" name="email" value="email@example.com">
There are a few more attributes which can be used with textboxes, but they are not necessary for basic forms, so these will be covered in the next part.
More HTML In Forms
Although it is probably obvious, I will just mention that all other HTML tags are available to you inside your <form> tags. It is important to remember, for example, to label all your input elements, so that the user knows what to enter in them. You can use all other types of HTML formatting as well as text, though, and often the use of tables can help set out an HTML form in a better way.
Once you have got the user to enter some data into a form, however basic it may be, you will need some way for them to send it on to the next page. This is where buttons come in. There are two basic buttons available to you in HTML, submit and reset. Submit is the most commonly used. Basically, when you put in a submit button, a button will appear on the page which, when clicked, tells the browser to send the form data to the URL which you defined in the action part of the form tag, using the method you supplied. The most basic submit button is added using the following code:
There is an optional attribute of the submit button, though, which allows you to customize it slightly. This is the value attribute, which is used in exactly the same way as for a textbox, although in this case it simply changes the text on the button's face.
<input type="Submit" value="Sign Up">
You can have as many submit buttons in a single form as you like (for example many websites provide an 'I Agree' button at the top and bottom of a long page of terms and conditions, but all submit buttons in a single form will do the same thing.
The second button you can add to your form is a reset button. All this does when clicked is to reset the form to its initial state (usually clearing all values but, in the case of the value attribute being set for an input option, it will also restore the initial values you set). This is added to a form using:
Like a submit button, reset can also have its text changed using the value attribute.
In this part you have learned the basic format of an HTML form, including how the form is structured with it, how to submit and reset the form and how to get basic inputs. HTML offers a huge number of other input options, though, which will be covered in the next part.
1999 - 2019 FreeWebmasterHelp.com