Unit 2.11 - Forms

289 views
244 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
289
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unit 2.11 - Forms

  1. 1. Programming and Development Tools Web Programming UNIT 2.11Web ProgrammingForms OBJECTIVES This unit helps you to add Forms to your Web page to get the data from the user. At the end of this unit, you will be able to Add a Form to your Web page. Add a Text Field to a Form. Add a Radio Button to a Form. Add a Text Area to a Form. Add a Check Box to a Form. Add a Drop-Down List Box to a Form. Add a Button to a Form.Benchmark standard Design Web pages with Forms to get the data from the user for further processing.Forms 2.11-1
  2. 2. Programming and Development Tools Web ProgrammingLet us Revise! 1. Define Frame. 2. Name the different types of Framesets. 3. Write the code segment to create a Web page with horizontal frames.. 4. State the use of <NOFRAMES> tag. 5. Write the code segment to create a Web page with Inline Frame. Introduction You would have filled up a Form in many places. For example, when joining the school you would have given the particulars about yourself such as Name, Age and Date of Birth in a Form. Similarly, the Form in HTML is an element used to get the data from the user. The Form is like a container having elements called controls. The controls used to get data from the user are Text Field, Check box, Radio button, Text area and Drop-down List box. 2.11.1 Designing the Form A Form should be carefully designed keeping in mind certain conditions like the questions to be asked and the controls to be used to get the data from the user. Identifying the questions Before adding a form, you should know the requirement such as the data to be received, the control to be used to receive the data and placement of the controls in the Form element. For example, the data to be received from a student applying for admission in a college are Name, Date of Birth, Address, Grade obtained in his schooling, etc. Hands-On! The following example illustrates the use of forms in a Webpage. Open the HTML file Form.html in Internet Explorer. The code in Form.html file is given below: <HTML> <HEAD> <TITLE> Form </TITLE> </HEAD> <BODY Bgcolor="LightYellow"> Forms 2.11-2
  3. 3. Programming and Development Tools Web Programming<FORM> <FONT Size="4"><H2 Align="Center"> ABC College of Engineering </H2><H2 Align="Center"> Application Form </H2>1) Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;<INPUT Type="Text" Name="Name" Size="60"> <BR><BR> Adds a Text Box2) Date of Birth&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;<INPUT Type="Text" Name="DOB"> <BR><BR> Adds a Text Box3) Sex&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;<INPUT Type="Radio" Name="Gender">Male&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT Type="Radio" Name="Gender">Female <BR><BR> Adds a Radio Button4) Nationality&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;<INPUT Type="Text" Name="Nation" Size="40"> <BR><BR> Adds a Text Box5) Parent/Guardian Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;<INPUT Type="Text" Name="Name" Size="60"> <BR><BR> Adds a Text Box6) Address <BR>Forms 2.11-3
  4. 4. Programming and Development Tools Web Programming&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<TextArea Rows="5" Cols="50"></TextArea><BR><BR>7) Extra Curricular Activities Adds a Text Area&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;<INPUT Type ="Checkbox" Name="Extra"> Football<INPUT Type ="Checkbox" Name="Extra"> Hockey<INPUT Type ="Checkbox" Name="Extra"> Badminton<INPUT Type ="Checkbox" Name="Extra"> Tennis<INPUT Type ="Checkbox" Name="Extra"> Others <BR><BR> Adds a Check Box8) Grade obtained&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;Mathematics<INPUT Type="Text" Name="Grade1" Size="10">&nbsp;&nbsp;&nbsp;Physics<INPUT Type="Text" Name="Grade2"Size="10">&nbsp;&nbsp;&nbsp;Chemistry <INPUT Type="Text" Name="Grade3" Size="10">&nbsp;&nbsp;&nbsp; <BR><BR>9) Course Applied for&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;<SELECT> Adds a Drop-Down List Box<OPTION Value="Mech" Name="Mech">Bachelor of MechanicalEngineering<OPTION Value="Civil" Name="Civil">Bachelor of CivilEngineering<OPTION Value="Electrical" Name="Electrical">Bachelor ofElectrical EngineeringForms 2.11-4
  5. 5. Programming and Development Tools Web Programming<OPTION Value="Electronics" Name="Electronics">Bachelorof Electronics Engineering</SELECT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BUTTON Type="Submit">Submit</BUTTON>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BUTTON Type="Reset">Reset</BUTTON> Adds a Button</FONT></FORM></BODY></HTML> Code Sample 2.11.1The Web page shown in Figure 2.11.1 is displayed in the browser window. Text Box Radio Button Text Area Check Box Drop-Down List Box Button Figure 2.11.1: A Web Page Containing a FormForms 2.11-5
  6. 6. Programming and Development Tools Web ProgrammingThe Web page shown in Figure 2.11.1 contains an application form displayedin it. When the Submit button is clicked after entering the values in thecontrols, the entered data are passed to a program that takes care of furtherprocessing. In this unit you will be learning to add Forms and controls to yourWeb page.A Form is added to a Web page using the <FORM> tag. The <FORM> tag hastwo important attributes. They are Action and Method. The URL of the program file that processes the data entered by the user is assigned to the Action attribute. The Method attribute can have either Get or Post as its value. Get is the default value. If Method = “Get”, the names and values of the data entered are send to the program along with the URL specified in the Action attribute. If Method = “Post”, the names and values of the data entered are send to the program as separate entity. Self-Check Exercise 2.11.1Say true or false:1. <FORM> tag is used to add a form to a Web page.2. Action is the only attribute used with <FORM> tag.3. The two values of the Method attribute are Get and Post. Activity 2.11.11. Draw a form to enter your personal details (Bio-Data).2.11.2 Working with Form ElementsThe different controls that can be added to a Form are Text Fields, Radiobuttons, Text area, Check box, Drop-down List box and Push buttons. Most of thesecontrols can be added to the form using the <INPUT> tag along with Typeattribute.The Text FieldThe Text Field is a control that is used to get a text from the user and todisplay a text to the user. It can be added to a form using the <INPUT> tagalong with the Type attribute.The following are the codes used to display the Text Fields shown in Figure2.11.1.<INPUT Type="Text" Name="Name" Size="60"> <BR><BR><INPUT Type="Text" Name="DOB"> <BR><BR><INPUT Type="Text" Name="Nation" Size="40"><INPUT Type="Text" Name="P_Name" Size="60">Forms 2.11-6
  7. 7. Programming and Development Tools Web Programming<INPUT Type="Text" Name="Grade1" Size="10"><INPUT Type="Text" Name="Grade2" Size="10"><INPUT Type="Text" Name="Grade3" Size="10">The attribute Type = “Text” instructs the browser to display a Text Field. Theattribute Name = “Name” assigns a name to the Text Field for future use. Theattribute Size = “60” specifies the width of the Text Field. The attributes of the<Input> tag related to the Text Field are given in Table 2.11.1. Attribute Value Use Type Text Displays a Text Field Password Displays a Text Field that is used to enter secret information. The text in this field appears as asterisks (*). Name Any Text The value given will be assigned to the Name attribute that can be used for future reference. Size Any Integer value Defines the width of the Text Field. Maxlength Any Integer value Defines the maximum number of characters that can be typed in a Text Field. Readonly --- Can read from the Text Field but you cannot write in the Text Field. Value Any String value The value given in Value attribute will be displayed inside the Textbox by default. Disabled --- Makes the control visible but cannot be used. Table 2.11.1: Attributes of <INPUT> tag related to Text FieldThe Radio ButtonThe Radio Button is a control that is used to display an option to the user. If theoption is applicable to the user, he can select the option by clicking it. Two ormore Radio Buttons can be grouped together. The user can select only oneoption in that group. Radio Button can be added to a form using the <INPUT>tag along with the Type attribute.Forms 2.11-7
  8. 8. Programming and Development Tools Web ProgrammingThe following are the codes used to display the Radio Buttons shown inFigure 2.11.1.<INPUT Type="Radio" Name="Gender" Value=”M”>Male<INPUT Type="Radio" Name="Gender" Value=”F”>FemaleThe attribute Type = “Radio” instructs the browser to display a Radio Button.The attribute Name = “Gender” assigns a name to the Radio Button for futureuse. The two Radio Buttons are grouped together by giving the same valuefor the Name attribute. The value given in Value attribute will be send to theURL specified in the Form’s Action attribute, if the button is selected. Theattributes of the <Input> tag related to the Radio Buttons are given in Table2.11.2. Attribute Value Use Type Radio Displays a Radio Button. Name Any String value The value given will be assigned to the Name attribute that can be used for future reference. Checked --- Indicates that the option remains selected when the form is opened. Disabled --- Makes the control visible but cannot be used. Value Any String value The value given in Value attribute will be send to the URL specified in the Form’s Action attribute, if the button is selected. Table 2.11.2: Attributes of <INPUT> tag related to Radio ButtonsThe Text AreaThe Text Area is a control that is used to get a text from the user and to displaya text to the user. The difference between a Text Field and a Text Area is thata Text Field can accept or display only one line of text. But, a Text Area canaccept or display more than one line of text. It can be added to a form usingthe <TEXTAREA> tag and Rows and Cols attributes.The following is the code used to display the Text Area shown in Figure2.11.1.<TextArea Rows="5" Cols="50"></TextArea>The attributes Rows = “5” and Cols=”50” instructs the browser to display aText Area of 5 rows and 50 columns. The attributes of the <TEXTAREA> tagare given in Table 2.11.3.Forms 2.11-8
  9. 9. Programming and Development Tools Web Programming Attribute Value Use Rows Any Integer value Specifies the number of rows visible in the Text Area Cols Any Integer value Specifies the number of columns visible in the Text Area Name Any String value The value given will be assigned to the Name attribute that can be used for future reference. Readonly --- Can read from the Text Area but you cannot write in the Text Area. Disabled --- Makes the control visible but cannot be used to modify the text. Table 2.11.3: Attributes of <TEXTAREA> tag Lab ExerciseLab Exercise 1: Open D11_1.html in Internet Explorer. The following code will be present inD11_1.html.<HTML><HEAD> <TITLE> STUDENT INFORAMTIONS </TITLE></HEAD><BODY> <H1 Align =CENTER> STUDENT INFORMATIONS </H1> <BR> <FORM> NAME: <INPUT Type ="TEXT" NAME="TXT_NAME" Size=5 Maxlength=5 ><BR><BR> PASSWORD: <INPUT Type ="PASSWORD" Name = "TXT_NAME" Size = 5 Maxlength=5><BR><BR> ADDRESS: <TEXTAREA Name = "TXT_ADDRESS" Rows=4 Cols=30></TEXTAREA><BR><BR> PHONE : <INPUT Type = "TEXT" Name="TXT_PHONE"Forms 2.11-9
  10. 10. Programming and Development Tools Web Programming Size=8><BR><BR> </FORM></BODY></HTML> 1. Name attributes which are used in input tag. 2. Identify the attribute which is used to specify the input type. 3. Identify the attribute which is used to set the length of the text box. 4. Observe the difference between size and maxlength. 5. Identify the tag which is allows to enter the multiline text entry. 6. Name the attribute which are used in textarea.Lab Exercise 2: Open D11_1.html in Internet Explorer. 1. View the source code in the Notepad. 2. Increase the size of the Name textbox to 10. 3. Insert value into Name textbox and observe the difference. 4. Change the Password textbox type to password. 5. Increase the no of columns of the textarea to 40. 6. Decrease the no of row of the textarea to 3. Self-Check Exercise 2.11.2Name the tag and attribute to be used for the following:1. To add a Text Field whose width is 9 characters and maximum number of characters that can be entered is 25.2. To add 2 Radio Buttons of same group displaying Yes and No. The values of the 2 Radio Buttons should be “Y” and “N”.3. To add a Text Area of 6 rows and 50 columns.The Check BoxThe Check Box is a control that is used to display an option to the user. If theoption is applicable to the user, he can select the option by clicking it. Two ormore Check Boxes can be grouped together. The user can select any numberof Check Boxes in that group. Check Box can be added to a form using the<INPUT> tag along with the Type attribute.The following are the codes used to display the Radio Buttons shown inFigure 2.11.1.<INPUT Type ="Checkbox" Name="Extra"> Football<INPUT Type ="Checkbox" Name="Extra"> Hockey<INPUT Type ="Checkbox" Name="Extra"> Badminton<INPUT Type ="Checkbox" Name="Extra"> Tennis<INPUT Type ="Checkbox" Name="Extra"> OthersThe attribute Type = “Checkbox” instructs the browser to display a Check Box.The attribute Name = “Extra” assigns a name to the Check Box for future use.Forms 2.11-10
  11. 11. Programming and Development Tools Web ProgrammingThe five Check Boxes are grouped together by giving the same value for theName attribute. The attributes of the <Input> tag related to the Check Boxesare given in Table 2.11.4. Attribute Value Use Type Checkbox Displays a Check Box. Name Any String value The value given will be assigned to the Name attribute that can be used for future reference.. Checked --- Indicates that the option remains selected when the form is opened. Disabled --- Makes the control visible but cannot be used. Value Any Text The value given in Value attribute will be send to the URL specified in the Form’s Action attribute, if the button is selected. Table 2.11.4: Attributes of <INPUT> tag related to Check Boxes NoteThe difference between a Radio Button and a Check Box is that only one option can beselected in a group of Radio Buttons whereas more than one option can be selected in a groupof Check Boxes.The Drop-Down List BoxThe Drop-Down List Box is a control that is used to display a list of items in arectangular box from which the user can select an option. If the option isapplicable to the user, he can select the option by clicking it. Drop-Down ListBox can be added to a form using the <SELECT> tag along with <OPTION>tag.The following are the codes used to display the Drop-Down List Box shown inFigure 2.11.1.<SELECT> <OPTION Value="Mech" Name="Mech">Bachelor of Mechanical Engineering <OPTION Value="Civil" Name="Civil">Bachelor of Civil Engineering <OPTION Value="Electrical" Name="Electrical">Bachelor of Electrical EngineeringForms 2.11-11
  12. 12. Programming and Development Tools Web Programming <OPTION Value="Electronics" Name="Electronics">Bachelor of Electronics Engineering</SELECT>The <SELECT> tag instructs the browser to display a Drop-Down List Box.The <OPTION> tag is used to display the items inside the Drop-Down ListBox. In the above example, the four items are grouped together in a Drop-Down List Box by giving the same value for the Name attribute of the<OPTION> tag. The item to be displayed in the Drop-Down List Box isassigned to the Value attribute of the <OPTION> tag. The attributes of the<SELECT> tag are given in Table 2.11.5. Attribute Value Use Name Any String value The value given will be assigned to the Name attribute that can be used for future reference. Size Any Integer value Specifies the number of items visible in the Drop- Down List Box. Disabled --- Makes the control visible but cannot be used. Multiple --- Specifies that more than one item can be selected. Table 2.11.5: Attributes of <SELECT> tagThe attributes of the <OPTION> tag are given in Table 2.11.6. Attribute Value Use Selected --- Specifies that this option appears as the selected option by default Value Any Text The value given in Value attribute will be send to the URL specified in the Form’s Action attribute, if the option is selected. Disabled --- Makes the option visible but cannot be selected Table 2.11.6: Attributes of <OPTION> tagThe ButtonThe Button is a control that is used to display a push button. The function ofthe Push Button varies depending upon the type of the button. The button canForms 2.11-12
  13. 13. Programming and Development Tools Web Programmingbe of 3 types. They are Submit button, Reset button and a Push button. TheSubmit button sends the values entered by the user to the URL specified inthe Form’s Action attribute. The Reset button sets the values of all thecontrols to their initial values. For the normal buttons, commands should begiven for the action to be taken if it is clicked. Buttons can be added to a formusing the <BUTTON> tag along with the Type attribute.The following are the codes used to display the buttons shown in Figure2.11.1.<BUTTON Type="Submit">Submit</BUTTON><BUTTON Type="Reset">Reset</BUTTON>The attribute Type = “Submit” instructs the browser to send the values enteredby the user to the URL specified in the Form’s Action attribute. The attributeType = “Reset” instructs the browser to set the values of all the controls totheir initial values. The attributes of the <BUTTON> tag are given in Table2.11.7. Attribute Value Use Type Submit Instructs the browser to send the values entered by the user to the URL specified in the Form’s Action attribute. Reset Instructs the browser to set the values of all the controls to their initial values. Button Instructs the browser to execute the commands given for the action to be taken if it is clicked. Name Any Text The value given will be assigned to the Name attribute that can be used for future reference. Disabled --- Makes the control visible but cannot be used. Value Any Text Specifies the initial value to the button. Table 2.11.7: Attributes of <BUTTON> tag Lab ExerciseLab Exercise 3: Open D11_2.html in Internet Explorer. The following code will be present inD11_2.html.Forms 2.11-13
  14. 14. Programming and Development Tools Web Programming<HTML><HEAD> <TITLE> HOBBIES </TITLE></HEAD><BODY> <H3> CHOOSE YOUR HOBBIES </H3> <FORM> <INPUT Type ="CHECKBOX" Name = "CHK_HOBBY" Value="SONGS" > Hearing Songs <INPUT Type ="CHECKBOX" Name = "CHK_HOBBY" Value="GAMES" >Playing Games <INPUT Type ="CHECKBOX" Name = "CHK_HOBBY" Value="BOOKS" > Reading Books <INPUT Type ="CHECKBOX" Name = "CHK_HOBBY" Value="TRAVELLING"> Travelling <BR> <BR> <BR> <H3> CHOOSE YOUR PET </H3> <INPUT Type="RADIO" Name="PET" Value ="DOG" Checked> Dog <INPUT Type="RADIO” Name="PET" Value ="CAT" Checked> Cat <INPUT Type="RADIO" Name="PET" Value ="DOVE" Checked> Dove <BR><BR> <H3> CHOOSE YOUR FAVOURATE GAME </H3> <SELECT Name ="FOOD" Size=3> <OPTION > FOOTBALL <OPTION> HOCKEY <OPTION> TABLE TENNIS <OPTION> TENNIS <OPTION> SWIMMING </SELECT> <BR><BR> <INPUT Type="SUBMIT" Value ="SUBMIT"> <INPUT Type="RESET" Value ="RESET"><BR> </FORM></BODY></HTML> 1. Locate the input type which is used to choose more than one option. 2. Name the input type which is used to choose single option. 3. Identify the tag which is used to display the drop-down menu options. 4. Name attributes which are used in <SELECT>.Forms 2.11-14
  15. 15. Programming and Development Tools Web ProgrammingLab Exercise 4: Write a HTML code to display the output as given in the following Figure2.11.2 using <FORM> tag. Figure 2.11.2: Student Mark Sheet FormForms 2.11-15
  16. 16. Programming and Development Tools Web ProgrammingLab Exercise 5: Write a HTML code to display the output as given in the following Figure2.11.3 using <FORM> tag. Figure 2.11.3: Student Informations FormForms 2.11-16
  17. 17. Programming and Development Tools Web ProgrammingLab Exercise 6: Write a HTML code to display the output as given in the following Figure2.11.4 using <FORM> tag. Figure 2.11.4: Master Card Application FromForms 2.11-17
  18. 18. Programming and Development Tools Web ProgrammingLab Exercise 7: Write a HTML code to display the output as given in the following Figure2.11.5 using <FORM> tag. Figure 2.11.5: Online BookingForms 2.11-18
  19. 19. Programming and Development Tools Web ProgrammingLab Exercise 8: Write a HTML code to display the output as given in the following Figure2.11.6 using <FORM> and <TABLE> tag. Figure 2.11.6: Employment Application FormForms 2.11-19
  20. 20. Programming and Development Tools Web ProgrammingLab Exercise 9: Write a HTML code to display the output as given in the following Figure2.11.7 using <FORM> and <FRAME> tag. Figure 2.11.7: School Application Form Self-Check Exercise 2.11.3Rewrite the following sentences correctly, if they are wrong:1. The Checked attribute of the <INPUT> tag indicates that the checkbox option remainsselected when the form is opened.2. The Multiple attribute of the <SELECT> tag specifies that more than one item can beselected in a Drop-Down List Box.3. Buttons can be added to a form using the <BUTTON> tag along with the Type attribute. Activity 2.11.21. Create a Web page that displays a form to enter user’s personal details (Bio-Data).2. Save the HTML file as Activity1.html.Forms 2.11-20
  21. 21. Programming and Development Tools Web Programming Activity 2.11.31. Create a Web page that explains the Form as shown in Figure 2.11.8.2. Save the HTML file as Activity2.html.3. The hyperlink Adding Controls at the bottom of the page should be linked to Add_Controls.html. Figure 2.11.8: A Web page Explaining the Form Activity 2.11.41. Create a Web page that explains the controls as shown in Figure 2.11.3.2. Save the HTML file as Add_Controls.html.3. The content of the same page is continued in Figure 2.11.9.Forms 2.11-21
  22. 22. Programming and Development Tools Web Programming Figure 2.11.9: A Web page Explaining the Controls Figure 2.11.10: Continuation of Web page shown in Figure 2.11.9Forms 2.11-22
  23. 23. Programming and Development Tools Web Programming Technical Terminologies Form - A Form in HTML is an element used to get the data from the user. Text Field - The Text Field is a control that is used to get a text from the user and to display a text to the user. Radio Button - The Radio Button is a control that is used to display an option to the user. Text Area - The Text Area is a control that is used to get a text from the user and to display a text to the user. Check Box - The Check Box is a control that is used to display an option to the user. Drop-Down List Box - The Drop-Down List Box is a control that is used to display a list of items in a rectangular box from which the user can select an option. Button - The Button is a control that is used to display a push button. Summary In this unit, you learnt that The Form is like a container containing elements called controls. Text Field, Check box, Radio button, Text area and Drop-down List box are some of the controls used to get data from the user. The <FORM> tag has two important attributes namely, Action and Method. Text Field, Radio Button and Check Box can be added to a form using the <INPUT> tag along with the Type attribute. Text Area can be added to a form using the <TEXTAREA> tag and Rows and Cols attributes. Drop-Down List Box can be added to a form using the <SELECT> tag along with <OPTION> tag. Buttons can be added to a form using the <BUTTON> tag along with the Type attribute.Assignment I. Answer the following questions: 1. Give any 3 general examples of forms. 2. Name any 5 controls that can be added to a Form. Forms 2.11-23
  24. 24. Programming and Development Tools Web Programming3. Mention the use of Action and Method attributes of <FORM> tag.4. Mention the use of any 3 common attributes of Radio Button and Check Box controls.5. Name the types of Buttons and mention their functions..Forms 2.11-24
  25. 25. Programming and Development Tools Web ProgrammingCriterion Referenced TestInstruction: Students must evaluate themselves to attain the list of competencies to be achieved.Name:Subject: Programming and Development ToolsUnit: FormsPlease tick [ √ ] the appropriate box when you have achieved the respectivecompetency.Date Forms C1 C2CommentCompetency codes:C1 = Draw a form with Text Field, Radio Button, Text Area, Check Box, Drop- Down List Box and Button for a candidate to apply for a vacancy in a company.C2 = Create a Web page with Text Field, Radio Button, Text Area, Check Box, Drop-Down List Box and Button for a candidate to apply for a vacancy in a company.Forms 2.11-25

×