Home| About US |Website Development Tutorial| Ecommerce Tutorial
Back to Basic HTML Programming
Using Form on HTML Code
HTML forms are an easy way to gather data from the end user. Processing them requires a server-side scripting language or (in some cases when limited interaction is to be provided within a single page) a client-side scripting language such as JavaScript.
Here is a simple form:
<form id="" action="" method="post"> <fieldset> <legend>Personal details</legend> <label for="first">First name</label> <input type="text" name="first" id="first"><br> <label for="family">Family name</label> <input type="text" name="family" id="family"><br> <input type="submit" name="personal"> </fieldset> </form>
Here's an explanation -
ID = name of the form or control.
ACTION = the URL of a server-side script which can process the data.
METHOD = the method used to send the information. Two methods are supported, POST and GET. POST is the preferred method except for simple searches which generally use GET. Use with server-side languages.
FIELDSET = Form controls are normally contained in a fieldset element. Complex forms may have multiple fieldsets. Fieldsets can contain other fieldsets.
LEGEND = Each fieldset begins with a legend element. The content of the element is used as a title placed in the border of the fieldset.
INPUT TYPE="" NAME ="" ID="" = various types of input controls. Supported types are - submit, text, password, checkbox, radio, reset, file, hidden, image and button. The name attribute is used by the server to identify which piece of data was entered in a given box on the form. The id attribute is used to match an input with its label. The name and id attributes normally have identical values for text inputs but different values for checkbox and radio inputs.
LABEL FOR="" = a label for a single form control. The value of the for attribute must match the id attribute of a form control in the same form.
There is also a SELECT element for drop down lists and a TEXTAREA element for multi-line text input.
This simple example uses <br> tags to force newlines between the different controls. A real-world form would use more structured markup to layout the controls neatly.