Enter your search terms Submit search form
	HTML COURSE FOR EASY LEARNING

This course is developed for the  online community who are willing to learn online in the leisure periods,  the web designing course,and this is the first step in  learning the web designing. Every one can easily  learn this  by sitting before their personal computers and practice themselves.ok wish you good luck.

FORMS

The Forms chapter explains how to prepare webpages which require some action from the side of the webpage viewers(users). Examples:- 1) An online application form with blank places to be filled by the applicant 2)An online order for goods and services.3)An online survey form.and 4)An online Data base entry form etc.

The forms contain blank text boxes and check boxes or radio buttons or drop down lists with options to select or tick a choice and with a submit or reset button.
IMPORTANT TAGS USED IN FORMS
<FORM>, <INPUT>, <TEXTAREA>, <SELECT>, <OPTION>, MAILTO, METHOD

The basic form

<FORM ACTION="...">
<INPUT TYPE="hidden" NAME="subject" VALUE="Title of Form">
 
form dialogs in here
 
<INPUT TYPE="submit">
<INPUT TYPE="reset">
</FORM> 

PERSONAL DATA FORM FOR CONDUCTING A SURVEY Name of the Person: Age Group: below 25 above25 and below50 above50 Sex: male female Education: intermediate Degree Post graduate other About yourself: About myself: languages known: English Hindi Chinese Japanese Now You learn how to make a form as seen above:- IMPUT TYPE="TEXT" form type form output html code for this form output text boxSIZE=50 <INPUT TYPE="text" NAME="text box example1" SIZE=50 MAXLENGTH=75 VALUE="default text"> text boxSIZE=25 <INPUT TYPE="text" NAME=" text box example2" SIZE=25 MAXLENGTH=75 VALUE="default text"> text boxsize:40(blank) <INPUT TYPE="text" NAME=" text box example3" SIZE=40 MAXLENGTH=75 VALUE=""> Imput dialog items:- the dialog item explaination for the dialog item NAME="text" Identifying what the user was responding to when they filled in the text box SIZE=value Specify the width of the text box in characters MAXLENGTH=value Specify the maximum number of characters that can be written in the text box. If this is greater than can be displayed (as defined by the SIZE attribute, then the field will scroll VALUE="text" Specify some default text for the text box(if it is blank then the text box will be blank) TYPE="textarea" form type form output html code for this form output text area with three rows <TEXTAREA COLS=40 ROWS=3 WRAP="hard" NAME="personal text area"> </TEXTAREA> textarea with four rows <TEXTAREA COLS=30 ROWS=4 WRAP="hard" NAME="personal text area"> </TEXTAREA> textarea with default text default text <TEXTAREA COLS=30 ROWS=4 WRAP="hard" NAME="personal text area"> default text </TEXTAREA> The <TEXTAREA></TEXTAREA> element is used to provide a editable text input area for the user. Any default text you wish to give the text area should be placed between the two tags. You must include the end tag even if you don't want to provide any default text. You can specify the width and height of the text area and, for some browsers, the type of wrapping to apply to the input text. the dialog item explaination for the dialog item NAME="text" This assigns a label to the text input by the user, thus identifying what the user was responding to COLS=characters Specify the width of the text entry area in characters ROWS=number Specify the height of the text entry area in rows WRAP="off|soft|hard|l" Specifies how the text input should wrap. Setting WRAP="off" means no wrapping will occur - text is sent exactly as typed. Setting WRAP="soft" means the display wraps but the text is sent as typed. Setting WRAP="hard" means the display wraps and text is sent with line breaks at all wrap points. The default for Netscape browsers is off, for Internet Explorer it is soft TYPE="radio button" form type form output html code for this form output radiobutton(2 options) yes no <INPUT TYPE="radio" NAME="Radio Button example" VALUE="yes" CHECKED> yes<INPUT TYPE="radio" NAME="Radio Button example" VALUE="no"> no radiobutton(3 options) below18years 18 -50 years above 50 years <INPUT TYPE="radio" NAME="Radio Button example" VALUE="one" > below 18 years<INPUT TYPE="radio" NAME="Radio Button example" VALUE="two" checked>18-50 years <INPUT TYPE="radio" NAME="Radio Button example" VALUE="three" >above 50 years All buttons within the same group must have the same NAME. A single radio button can be shown, provided it has a unique NAME the dialog item explaination for the dialog item NAME="text" Tells the browser which radio button group the radio button belongs to. Also serves to assign a label to the radio button group, thus identifying what the user was responding to when they selected a radio button. VALUE="text" The text that accompanies the radio button if it is selected by the user. This text can be used by a program (cgi-script, JavaScript, etc.) written to process the form; see "Making a form work". CHECKED Specifies the default radio button TYPE="checkbox" form type form output html code for this form output checkbox(2 options) yes no <INPUT TYPE="radio" NAME="checkbox example" VALUE="yes" CHECKED> yes<INPUT TYPE="radio" NAME="checkbox example" VALUE="no"> no checkbox(3 options) below18years 18 -50 years above 50 years <INPUT TYPE="radio" NAME="checkbox example" VALUE="one" > below 18 years<INPUT TYPE="radio" NAME="checkbox example" VALUE="two" checked>18-50 years <INPUT TYPE="radio" NAME="checkbox example" VALUE="three" >above 50 years All buttons within the same group must have the same NAME. A single checkbox can be shown, provided it has a unique NAME the dialog item explaination for the dialog item NAME="text" Tells the browser which checkbox group the checkbox belongs to. Also serves to assign a label to the checkbox group, thus identifying what the user was responding to when they selected a checkbox. VALUE="text" The text that accompanies the checkbox if it is selected by the user. This text can be used by a program (cgi-script, JavaScript, etc.) written to process the form; see "Making a form work". CHECKED Specifies the default checkbox TYPE="password" A password text box is exactly the same as an ordinary text box except the text the user types does not show up on-screen; instead each character is usually rendered as an asterisk (*). form type form output html code for this form output password text box size 30 <INPUT TYPE="password" NAME="Password Text Box" SIZE=30 > password text box with default password <INPUT TYPE="password" NAME="Password Text Box" value="defaultpassword" SIZE=20 > the dialog item explaination for the dialog item NAME="text" This assigns a label to the password submitted by the user, thus identifying what the user was responding to when they filled in the password box SIZE=value Specify the width of the password box in characters VALUE="text" Specify some default text for the password box TYPE="submit" TYPE="reset" SUBMIT OR RESET BUTTON html CODE FOR THE BUTTON <INPUT TYPE="submit" VALUE="SAMPLE SUBMIT BUTTON"> <INPUT TYPE="RESET" VALUE="SAMPLE RESET BUTTON"> <INPUT TYPE="submit" VALUE="SAMPLE SUBMIT BUTTON"> <INPUT TYPE="RESET" VALUE="SAMPLE RESET BUTTON"> <INPUT TYPE="submit" VALUE="SUBMITINFO"> <INPUT TYPE="RESET" VALUE="RESET"> Note: the length of the button depends on the length of default text Button is used to a put a button on the screen. Unfortunately, without the power of JavaScript functions added in, the button cannot actually do anything. NAME="text" (This assigns a label to the button, thus identifying what the user was responding to when they clicked the button.) VALUE="text"( Specify the button text) end of LESSON-9