Forms are used to submit data that is collected on a web page, to a database or an email address - or some other application or program which can use the data input.

open online HTML editor
^{Online editor Works only in IE - If you use another browser you can Download Web Page Teacher}.

<FORM> - used to surround the other elements in a form which capture the data - example. The action attribute specifies the url of the form handler, the script use to process the data. The METHOD specifies the method of accessing the url - it can be either GET or POST. The method should be POST if the url is going to process the data.

The form handler is the url specified in the action attribute. This is usually a cgi script written in PERL, ASP, PHP, or a number of other scripting languages used on the web. To learn how to create forms which will work for your website we recommend getting "The Strategy of Web Design" from http://www.TheWebsEye.com/HTML//ebook.htm

The fields in a form contain Name-Value pairs. Each field in the form has a name and a value which is sent to the form handler.

<input type="xxx" name="xxx" value="xxx"> - this represents a field whose contents can be edited or selected by the user. The name of the input element is the name of the data sent to the form handler. The value of the field will be the actual data that is sent to the form handler - example.

There are several types of INPUT fields. They are differentiated by the type attribute.

type="text" - is the default field used for an input box - example.

type="hidden" - will not be display the field in the browser, and so can be used to submit data the user does not see -for example the subject of an email.

type="SUBMIT" - will submit the contents of the form to the form handler at the url specified in the action of the <form> element. The value of the field is displayed as a button. In this example the value is set to "Send"- example.

type="RESET" - will reset any fields back to their default values. The value of the field is displayed as a button. In this example the value is set to "Clear" - example.

radio - shows a radio button. Only one button can be selected. The name in the example could be color and the value could be red, green or blue - example. View the code for this example - click here.

checkbox - shows a chekcbox. This is used when an option can either be selected or not, or more than one option can be selected. For example subscription to a newsletter - example. View the code for this example - click here.

<textarea name="xxx" cols="xx" rows="xx"> - this is the same as an input field except that you can set the size of the input box with the cols and rows attributes - example. View the code for this example - click here

<select name="xxx"> - this field allows you to display a number of options in a drop-down menu. The difference here is that the name of the field is hard-coded in the <select> element and the values are selected by using a number of <OPTION> elements inside the <select></select> element - example. View the code for this example - click here