HTML - Form

Example:
<HTML>
<HEAD>
<TITLE>Simple Form</TITLE>
</HEAD>
<BODY>
<FORM name="LoginForm" method=POST  action="login.php"> <P>User name:  <INPUT type="text" name="userName" size="10"> 
<P>Password:  <INPUT type="password" name="password" SIZE="12"> 
<P> <INPUT type="submit" value="Log in"> 
<INPUT TYPE="button" VALUE="Cancel" onClick="window.close()">
</FORM>
</BODY>
</HTML>
 
The <FORM> tag creates an HTML form. The form can contain interface elements such as text boxes, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices. Each interface element in the form must be defined with an appropriate tag, such as <INPUT> or <SELECTION>. All elements in the form must be defined between the <FORM> and </FORM> tags. As well as user input elements, the form can contain other elements such as headings, paragraphs, tables, and so on. When the form is displayed in a web browser, the user can fill it out by making choices and entering text using the interface elements, and then submit the form by clicking a "Submit" button.
 
Various attributes of <FORM> tag are:
 
action: This attribute tells the form where to send the data it collects. Without an action, data won’t be sent anywhere. Your action will be the URL of a file containing a script that does something with the data or the URL of a page containing server-side processing. 
 
method: This attribute specifies how information is sent to program invoked by submitting the form. There are two values: get (default) and post. When you use the get method, you send the data as part of the URL. 100 characters are limited with the get method. With the post method, no limits exist on the number of characters you can send. Also, the values of all the input fields aren’t displayed on the browser’s address bar and it sends all the information from the form separately from the form.
 
name: This attribute specifies the name of the form. The name is not displayed on the form. JavaScript can use this attribute to differentiate different forms if there are multiple forms on a page.
 
Adding Elements or Controls
You can add nine types of controls to your web page. You can add an element using <INPUT>, <BUTTON> and <BUTTON>, <SELECT> and </SELECT> and <TEXTAREA> and </TEXTAREA> tags. These tags are explained below with respective attributes.
 
Example:
<HTML>
<HEAD>
<TITLE>Input Elements</TITLE>
</HEAD>
<BODY>
<FORM name="inputElements">
Simple Text Box:<INPUT type="text" name="txt" size="5" maxlength="25" value="Hello">
<BR>
Password Text Box:<INPUT type="password" name="pass" size="5" maxlength="25">
<BR>
Check Box:<INPUT type="checkbox" name="falvour" value="Vanilla" checked>
<BR>
Radio Button:<INPUT type="radio" name="gender" value="female" checked>Female
<INPUT type="radio" name="gender" value="male">Male
<BR>
Upload Resume:<INPUT type="file" name="resume">
<BR>
<INPUT type="hidden" name="e-mail" value="me@mysite.com">
<BR>
Submit Button:<INPUT type="submit" name="btnSubmit" value="Ok">
<BR>
Reset Button:<INPUT type="reset" name="btnReset" value="Clear">
<BR>
Image in Button:<INPUT type="image" src="file:///F|/MyMix/Extra Icons/AquaFusion/24x24/apps/blender.png" align="Accept">
<BR>
Button:<INPUT type="button" value="Custom Button" name="btnButton">
<BR>
<BUTTON type="submit">Click here to submit!<IMG src="file:///F|/MyMix/Extra Icons/AquaFusion/24x24/apps/blender.png"></BUTTON>
<BR>
<SELECT name="test3" multiple size="8">
<OPTGROUP label="Ice Cream">
<OPTION>Chocolate
<OPTION>Vanilla
<OPTION>Strawberry
<OPTION>Chocolate Chip
<OPTION>Mint Chip
<OPTION>Cookie Dough
<OPTION>Peanut Butter and Chocolate
</OPTGROUP>
<OPTGROUP label="Sorbet">
<OPTION>Raspberry
<OPTION>Lemon
<OPTION>Lime
</OPTGROUP>
<OPTGROUP label="Frozen Yogurt">
<OPTION>Vanilla
<OPTION>Chocolate
<OPTION>Peanut Butter
<OPTION>Raspberry
</OPTGROUP>
</SELECT>
<BR>
Favourite Food:
<SELECT name="food">
<OPTION value="pizza">Pizza</OPTION>
<OPTION value="ice cream" selected>Ice Cream</OPTION>
<OPTION value="eggsham">Green Eggs and Ham</OPTION>
</SELECT>
<BR>
Multiline Text Box:
<TEXTAREA rows="10" columns="30" name="comments">
Please include any comments here.
</TEXTAREA>
</FORM>
<BODY>
</HTML>
 
<INPUT> tag’s attributes are:
type: This attribute specifies which type of control is to be displayed on the web page. Possible values are text, password, checkbox, radio, file, hidden, submit, reset, image and button.
 
Various controls are explained in detailed:
 
text: This displays the normal single lined text box where user can enter the text. Its attributes are:
 
name: This attribute gives the name to the input field which is used when its value is given to script.
size: This attribute specifies the size of the text box when he views it on the web page.
maxlength: This attribute specifies the maximum number of characters you are willing to accept as the value of this field.
 
password: This  type is used when you want a text field to accept data that is not to be displayed to anyone. Its attributes are:
 
name: This attribute gives the name to the input field which is used when its value is given to script.
size: This attribute specifies the size of the text box when he views it on the web page.
maxlength: This attribute specifies the maximum number of characters you are willing to accept as the value of this field.
 
checkbox: This type is used to create checkbox which sends data either yes or no based on user selection. Here the user does not have to enter any text, just selection is to be done. If the checkbox is selected, yes is send on the submission and if it is not checked, no is send on the submission. Multiple checkboxex can be selected. Its attributes are:
 
name: This attribute give the name of each option.
value: This attribute specifies what value is returned if the user selects the particular option.
checked: This attribute makes the checkbox checked when page is loaded in the browser. It is a Boolean value.
disabled: This makes the checkbox grayed when page is loaded in the browser. It is a Boolean value. User can enable this checkbox using JavaScript.
 
radio: This type is used to create radio button. This gives the choice to user to select. They are created in sets. In a set only one radio button can be selected. Each set of options uses the same name. Its attributes are:
 
name: This attribute give the name of each option.
value: This attribute specifies what value is returned if the user selects the particular option.
checked: This attribute makes the radio button checked when page is loaded in the browser. It is a Boolean value.
disabled: This makes the radio button grayed when page is loaded in the browser. It is a Boolean value. User can enabled this radio button using JavaScript.
 
file: This type allows the users to upload files to server. The user is prompted with a dialog box for selecting the file to upload. When the user submits the form, the browser takes a copy of the file and sends it with the other form data. Its attributes are:
 
name: This attribute specifies the name of the file which will be used in the script.
enctype: This attribute Specifies the format of the data being submitted by the form.  For eg. application/msword for a .doc file.
 
hidden: A hidden field gives you  a way to collect name and value information that the user can’t see along with the rest of the form data. a hidden field isn’t really a form field, but a way to pass data from one page to another. For example, you may have already asked for information on a previous page that you don’t want to ask for again. By using a hidden field, you can pass that data into your script without the user knowing. Its attributes are:
 
name: This attribute gives the name to the hidden field.
value: This is the value of the hidden field which is to be passed.
 
submit: This type create buttons that submits the form data to the action attribute of the <FORM> tag. Its attributes are:
 
name: This attribute gives the name to the submit button.
value: This attribute allows the user to give label to the button.
 
reset: This type create buttons that clears form data. This button do not send any data Its attributes are:
 
name: This attribute gives the name to the reset  button.
value: This attribute allows the user to give label to the button.
 
image: This attribute enables user to create a submit button that uses an image for the button. This can be more visually appealing, but it can also be more confusing. Users are used to buttons on the web. Unless you make your image look like a button, you risk having people complete your form and then not understand how to submit the data. Its attributes are:
 
src: This attribute specifies the path of the image to be displayed in the button.
 
buton: This type is yet another way to create a button on your page. The button value of the type attribute is a way to execute client-side scripts, rather than the standard submit or reset actions of the other buttons. For eg. you might want to include checks to make sure a password meets your criteria. By including a button labeled “Check Password” next to two password entry fields, you can perform this type of verification on the client’s machine even before you send the data across the network.
 
<BUTTON> tag:
 
Why to use <BUTTON> tag when you can create buttons in above described ways, The <BUTTON> tag is far more flexible than any of the other ways of creating buttons. Additionally, the <INPUT> tag’s variations of buttons doesn’t actually depress on the page the way people expect buttons to depress when they are clicked. Defining a button with the <BUTTON> tag is different from defining a button with the <INPUT> tag because the <BUTTON> tag takes content. It is an empty tag. If you include an image as the button in the <BUTTON> tag, use the <IMG> tag between the start tag and the end tag. You should also include text in the content so that if for some reason the image doesn’t load, text is available to indicate what the button does. Its attributes are:
 
type: This attribute specifies the which button to use. Possible values are submit and button.
 
<SELECT> tag:
 
The drop down list box i.e. combo box or simple list boxes are created with the help of a pair of two tags - <SELECT> and </SELECT> to hold to list and <OPTION> and </OPTION> to hold the list items. A <SEELCT> tag must have at least one <OPTION> tag. If you want the group heading to appear in the list, use <OPTGROUP> and </OPTGROUP>.
 
Attributes of <SELECT> tag are:
 
name: This is the important and mostly used attribute which gives name to the entire list a common name.
multiple: This attribute allows the user to select more than one item in the list. It is a Boolean value.
size: This attribute tells the browser that how many items should be displayed in the list at a time.
 
Attributes of <OPTION> tag are:
 
value: This attribute assigns a unique value to each item in the list.
label: If one of the item for eg. is “Very Berry Razzamatazz Strawberry” and you didn’t want to send all this information to the script, use this attribute. The value in this attribute will be used in place of this big name.
selected: If you want the list to start with the word other than first option in view, use this attribute in the <OPTION> tag. It is a Boolean value.
disabled: This makes the option grayed when page is loaded in the browser. It is a Boolean value. User can enable this option using JavaScript.
 
Attributes of <OPTGROUP> tag are:
 
label: This attribute specifies the title of the group in the select list.
disabled: This makes the option grayed when page is loaded in the browser. It is a Boolean value. User can enable this option using JavaScript.
 
<TEXTAREA> tag:
 
This is multi line text box. This gives the user the facility to enter lengthy text. <TEXTAREA> and </TEXTAREA> tags are used for creating multi line text box. Its attributes are:
name: This attribute gives the name to the textarea with which it will be referred.
rows: This attribute indicates the number of rows for the text which is to displayed.
cols: This attribute indicates the number of columns for the text which is to displayed.
disabled: This makes the textarea grayed when page is loaded in the browser. It is a Boolean value. User can enable the textarea using JavaScript.