NCERT Textbook - Forms, Information & Computer Technology Class 10 | Information & Computer Technology (Class 10) - Notes & Video PDF Download

 Page 1


68
Information and Computer Technology
Chapter 4
Forms
Learning Objectives 
Aft er	 learning	 this	 chap t er	 learner	 will	 be	 able	 t o:-
• 	 St a t e	 the	 purpose	 of	 the	 F ORM	 t ag.
• 	 L i s t 	 t h e 	 a t t r i b u t e s 	 t h a t 	 c a n 	 b e 	 u s e d 	 w i t h 	 t h e 	 F O R M 	 t a g 	 t o 	 m a k e 	 w e b 	 p a g e 	 m o r e	
in t er activ e.	
• 	 Learn	 t o	 pos t	 the	 de t ails	 filled	 in	 the	 f orm	 on	 the	 ser v er .
• 	 Diff er en tia t e	 the	 w orking	 of	 diff er en t	 c on tr ols.
• 	 Under s t and	 the	 use	 of	 all	 the	 c on tr ols	 placed	 on	 the	 f orm.
• 	 Assign	 a ttribut es	 t o	 the	 <input>	 elemen t	 t o	 cr ea t e	 the	 diff er en t	 F ORM	 objects
IntroduCtIon
A form is an object that is used for collecting data from the user. We generally come 
across such forms whenever we are creating a new account either in bank (manually) or 
for an email id (computerized). 
In HTML, a form is a window that consists of the elements of a form called the form 
fields. These fields may be text field, text area, drop-down box, radio buttons, checkbox 
and/or a command button. HTML forms are used to pass data to a server. A form can be 
inserted in HTML documents using the HTML form element which acts as a container 
for all the input elements. All the information collected by a form can be submitted to a 
processing agent (a file containing a script made to process this information) that’s usually 
specified in the “action” attribute of the Form tag.
The basic syntax is of a form is:
<form method = “get | post” action = “”>
 <input>
 <input>
</form>
The above code contains both the start tag and the end tag of <form> to indicate the 
beginning of form object and end of form object. The <input> tag inside the form tag 
Page 2


68
Information and Computer Technology
Chapter 4
Forms
Learning Objectives 
Aft er	 learning	 this	 chap t er	 learner	 will	 be	 able	 t o:-
• 	 St a t e	 the	 purpose	 of	 the	 F ORM	 t ag.
• 	 L i s t 	 t h e 	 a t t r i b u t e s 	 t h a t 	 c a n 	 b e 	 u s e d 	 w i t h 	 t h e 	 F O R M 	 t a g 	 t o 	 m a k e 	 w e b 	 p a g e 	 m o r e	
in t er activ e.	
• 	 Learn	 t o	 pos t	 the	 de t ails	 filled	 in	 the	 f orm	 on	 the	 ser v er .
• 	 Diff er en tia t e	 the	 w orking	 of	 diff er en t	 c on tr ols.
• 	 Under s t and	 the	 use	 of	 all	 the	 c on tr ols	 placed	 on	 the	 f orm.
• 	 Assign	 a ttribut es	 t o	 the	 <input>	 elemen t	 t o	 cr ea t e	 the	 diff er en t	 F ORM	 objects
IntroduCtIon
A form is an object that is used for collecting data from the user. We generally come 
across such forms whenever we are creating a new account either in bank (manually) or 
for an email id (computerized). 
In HTML, a form is a window that consists of the elements of a form called the form 
fields. These fields may be text field, text area, drop-down box, radio buttons, checkbox 
and/or a command button. HTML forms are used to pass data to a server. A form can be 
inserted in HTML documents using the HTML form element which acts as a container 
for all the input elements. All the information collected by a form can be submitted to a 
processing agent (a file containing a script made to process this information) that’s usually 
specified in the “action” attribute of the Form tag.
The basic syntax is of a form is:
<form method = “get | post” action = “”>
 <input>
 <input>
</form>
The above code contains both the start tag and the end tag of <form> to indicate the 
beginning of form object and end of form object. The <input> tag inside the form tag 
69
Forms
does not have an end tag. There can be as many <input> tags as form fields you want in 
your web page.
1. MetHod a ttrIBute of forM
The method attribute specifies how to send form-data (the form-data is sent to the page 
specified in the action attribute). The form-data can be sent as URL variables (with 
method=”get”) or as HTTP post transaction (with method=”post”).
1.1 Get method: 
 ? Appends form-data into the URL in name/value pairs
 ? The length of a URL is limited (about 3000 characters)
 ? Never use GET to send sensitive data! (will be visible in the URL)
 ? Useful for form submissions where a user want to bookmark the result
 ? GET is better for non-secure data, like query strings in Google
1.2 PoSt method: 
 ? Appends form-data inside the body of the HTTP request (data is not shown is in 
URL)
 ? It has no size limitations
 ? Form submissions with POST cannot be bookmarked
  syntax
  <form method=”get|post” action= “address”> 
 ? action=address 
 ? method=post or method=get 
1.3 attribute Values
v alue d escription
Get Default. Appends the form-data to the URL in name/value pairs: 
URL?name=value&name=value
Post Sends the form-data as an HTTP post transaction
Page 3


68
Information and Computer Technology
Chapter 4
Forms
Learning Objectives 
Aft er	 learning	 this	 chap t er	 learner	 will	 be	 able	 t o:-
• 	 St a t e	 the	 purpose	 of	 the	 F ORM	 t ag.
• 	 L i s t 	 t h e 	 a t t r i b u t e s 	 t h a t 	 c a n 	 b e 	 u s e d 	 w i t h 	 t h e 	 F O R M 	 t a g 	 t o 	 m a k e 	 w e b 	 p a g e 	 m o r e	
in t er activ e.	
• 	 Learn	 t o	 pos t	 the	 de t ails	 filled	 in	 the	 f orm	 on	 the	 ser v er .
• 	 Diff er en tia t e	 the	 w orking	 of	 diff er en t	 c on tr ols.
• 	 Under s t and	 the	 use	 of	 all	 the	 c on tr ols	 placed	 on	 the	 f orm.
• 	 Assign	 a ttribut es	 t o	 the	 <input>	 elemen t	 t o	 cr ea t e	 the	 diff er en t	 F ORM	 objects
IntroduCtIon
A form is an object that is used for collecting data from the user. We generally come 
across such forms whenever we are creating a new account either in bank (manually) or 
for an email id (computerized). 
In HTML, a form is a window that consists of the elements of a form called the form 
fields. These fields may be text field, text area, drop-down box, radio buttons, checkbox 
and/or a command button. HTML forms are used to pass data to a server. A form can be 
inserted in HTML documents using the HTML form element which acts as a container 
for all the input elements. All the information collected by a form can be submitted to a 
processing agent (a file containing a script made to process this information) that’s usually 
specified in the “action” attribute of the Form tag.
The basic syntax is of a form is:
<form method = “get | post” action = “”>
 <input>
 <input>
</form>
The above code contains both the start tag and the end tag of <form> to indicate the 
beginning of form object and end of form object. The <input> tag inside the form tag 
69
Forms
does not have an end tag. There can be as many <input> tags as form fields you want in 
your web page.
1. MetHod a ttrIBute of forM
The method attribute specifies how to send form-data (the form-data is sent to the page 
specified in the action attribute). The form-data can be sent as URL variables (with 
method=”get”) or as HTTP post transaction (with method=”post”).
1.1 Get method: 
 ? Appends form-data into the URL in name/value pairs
 ? The length of a URL is limited (about 3000 characters)
 ? Never use GET to send sensitive data! (will be visible in the URL)
 ? Useful for form submissions where a user want to bookmark the result
 ? GET is better for non-secure data, like query strings in Google
1.2 PoSt method: 
 ? Appends form-data inside the body of the HTTP request (data is not shown is in 
URL)
 ? It has no size limitations
 ? Form submissions with POST cannot be bookmarked
  syntax
  <form method=”get|post” action= “address”> 
 ? action=address 
 ? method=post or method=get 
1.3 attribute Values
v alue d escription
Get Default. Appends the form-data to the URL in name/value pairs: 
URL?name=value&name=value
Post Sends the form-data as an HTTP post transaction
70
Information and Computer Technology
2. InPut taG
The <input> tag collects the information from the user. 
The attributes are:
a ttribute n ame d escription
Name takes a string of characters as internal name of the field, to be 
used as a reference later
Size takes the value of a number in quotes which is equal to the width 
of the field.
Maxlength takes the value of a number in quotes which is equal to the 
maximum number of characters that can be entered.
Type takes the value of the field. It can take the value as “text” or “radio” 
or “checkbox” or “submit” .
2.1 t extBox field 
If the value of the type attribute is “text” i.e. <input type= “t ext”>, the form will show a 
textbox. This textbox accepts the input in one line. 
Along with this the TextBox field accepts value, size, name, maxlength, align and tabindex 
within the <input> tag. 
a ttributes of t ext Field d escription
  Size It defines the width of the field. It contains no. of visible 
characters.
  Maxlength It defines the maximum length of the field. It contains 
maximum no. of characters that can be entered in the 
field.
 Name It adds an internal name to the field so the program that 
handles the form can identify the fields.
 Value It defines what will appear in the box as the default value.
 Align It defines how the text field will be aligned on the form. 
Valid entries are: TOP , MIDDLE, BOTTOM, RIGHT, LEFT, 
TEXTTOP , BASELINE, ABSMIDDLE, ABSBOTTOM.
 Tabindex It defines in which order the different fields should be 
activated when the visitor clicks the tab key.
Page 4


68
Information and Computer Technology
Chapter 4
Forms
Learning Objectives 
Aft er	 learning	 this	 chap t er	 learner	 will	 be	 able	 t o:-
• 	 St a t e	 the	 purpose	 of	 the	 F ORM	 t ag.
• 	 L i s t 	 t h e 	 a t t r i b u t e s 	 t h a t 	 c a n 	 b e 	 u s e d 	 w i t h 	 t h e 	 F O R M 	 t a g 	 t o 	 m a k e 	 w e b 	 p a g e 	 m o r e	
in t er activ e.	
• 	 Learn	 t o	 pos t	 the	 de t ails	 filled	 in	 the	 f orm	 on	 the	 ser v er .
• 	 Diff er en tia t e	 the	 w orking	 of	 diff er en t	 c on tr ols.
• 	 Under s t and	 the	 use	 of	 all	 the	 c on tr ols	 placed	 on	 the	 f orm.
• 	 Assign	 a ttribut es	 t o	 the	 <input>	 elemen t	 t o	 cr ea t e	 the	 diff er en t	 F ORM	 objects
IntroduCtIon
A form is an object that is used for collecting data from the user. We generally come 
across such forms whenever we are creating a new account either in bank (manually) or 
for an email id (computerized). 
In HTML, a form is a window that consists of the elements of a form called the form 
fields. These fields may be text field, text area, drop-down box, radio buttons, checkbox 
and/or a command button. HTML forms are used to pass data to a server. A form can be 
inserted in HTML documents using the HTML form element which acts as a container 
for all the input elements. All the information collected by a form can be submitted to a 
processing agent (a file containing a script made to process this information) that’s usually 
specified in the “action” attribute of the Form tag.
The basic syntax is of a form is:
<form method = “get | post” action = “”>
 <input>
 <input>
</form>
The above code contains both the start tag and the end tag of <form> to indicate the 
beginning of form object and end of form object. The <input> tag inside the form tag 
69
Forms
does not have an end tag. There can be as many <input> tags as form fields you want in 
your web page.
1. MetHod a ttrIBute of forM
The method attribute specifies how to send form-data (the form-data is sent to the page 
specified in the action attribute). The form-data can be sent as URL variables (with 
method=”get”) or as HTTP post transaction (with method=”post”).
1.1 Get method: 
 ? Appends form-data into the URL in name/value pairs
 ? The length of a URL is limited (about 3000 characters)
 ? Never use GET to send sensitive data! (will be visible in the URL)
 ? Useful for form submissions where a user want to bookmark the result
 ? GET is better for non-secure data, like query strings in Google
1.2 PoSt method: 
 ? Appends form-data inside the body of the HTTP request (data is not shown is in 
URL)
 ? It has no size limitations
 ? Form submissions with POST cannot be bookmarked
  syntax
  <form method=”get|post” action= “address”> 
 ? action=address 
 ? method=post or method=get 
1.3 attribute Values
v alue d escription
Get Default. Appends the form-data to the URL in name/value pairs: 
URL?name=value&name=value
Post Sends the form-data as an HTTP post transaction
70
Information and Computer Technology
2. InPut taG
The <input> tag collects the information from the user. 
The attributes are:
a ttribute n ame d escription
Name takes a string of characters as internal name of the field, to be 
used as a reference later
Size takes the value of a number in quotes which is equal to the width 
of the field.
Maxlength takes the value of a number in quotes which is equal to the 
maximum number of characters that can be entered.
Type takes the value of the field. It can take the value as “text” or “radio” 
or “checkbox” or “submit” .
2.1 t extBox field 
If the value of the type attribute is “text” i.e. <input type= “t ext”>, the form will show a 
textbox. This textbox accepts the input in one line. 
Along with this the TextBox field accepts value, size, name, maxlength, align and tabindex 
within the <input> tag. 
a ttributes of t ext Field d escription
  Size It defines the width of the field. It contains no. of visible 
characters.
  Maxlength It defines the maximum length of the field. It contains 
maximum no. of characters that can be entered in the 
field.
 Name It adds an internal name to the field so the program that 
handles the form can identify the fields.
 Value It defines what will appear in the box as the default value.
 Align It defines how the text field will be aligned on the form. 
Valid entries are: TOP , MIDDLE, BOTTOM, RIGHT, LEFT, 
TEXTTOP , BASELINE, ABSMIDDLE, ABSBOTTOM.
 Tabindex It defines in which order the different fields should be 
activated when the visitor clicks the tab key.
71
Forms
For e xample:
Two textboxes whose internal name (computer can understand the internal name) is 
“Fname” and “Mname” are created using the value “text” for the type attribute. The internal 
name is different from the label.
HTML Code:
<form>
Father’s Name: 
<input type=”text” size = “20” name=”FName” >
<br>
Mother’s name: 
<input type=”text” size = “20” name=”MName”>
</form>
The above code creates two textboxes, each of which is 20 characters wide. The two textboxes 
are arranged vertically one below the other. The <br> tag does the work of Enter key.
o utput:
Father name
mother’s name
2.2 t ext area 
Text areas are the fields that displays several text lines at a time. Textarea field is generally 
used to prepare the body of the email or use it to take comment from the user. The 
<textarea> tag has both start and the end tag indicating from where the textarea begins 
and where the area where you were writing text ends.
Page 5


68
Information and Computer Technology
Chapter 4
Forms
Learning Objectives 
Aft er	 learning	 this	 chap t er	 learner	 will	 be	 able	 t o:-
• 	 St a t e	 the	 purpose	 of	 the	 F ORM	 t ag.
• 	 L i s t 	 t h e 	 a t t r i b u t e s 	 t h a t 	 c a n 	 b e 	 u s e d 	 w i t h 	 t h e 	 F O R M 	 t a g 	 t o 	 m a k e 	 w e b 	 p a g e 	 m o r e	
in t er activ e.	
• 	 Learn	 t o	 pos t	 the	 de t ails	 filled	 in	 the	 f orm	 on	 the	 ser v er .
• 	 Diff er en tia t e	 the	 w orking	 of	 diff er en t	 c on tr ols.
• 	 Under s t and	 the	 use	 of	 all	 the	 c on tr ols	 placed	 on	 the	 f orm.
• 	 Assign	 a ttribut es	 t o	 the	 <input>	 elemen t	 t o	 cr ea t e	 the	 diff er en t	 F ORM	 objects
IntroduCtIon
A form is an object that is used for collecting data from the user. We generally come 
across such forms whenever we are creating a new account either in bank (manually) or 
for an email id (computerized). 
In HTML, a form is a window that consists of the elements of a form called the form 
fields. These fields may be text field, text area, drop-down box, radio buttons, checkbox 
and/or a command button. HTML forms are used to pass data to a server. A form can be 
inserted in HTML documents using the HTML form element which acts as a container 
for all the input elements. All the information collected by a form can be submitted to a 
processing agent (a file containing a script made to process this information) that’s usually 
specified in the “action” attribute of the Form tag.
The basic syntax is of a form is:
<form method = “get | post” action = “”>
 <input>
 <input>
</form>
The above code contains both the start tag and the end tag of <form> to indicate the 
beginning of form object and end of form object. The <input> tag inside the form tag 
69
Forms
does not have an end tag. There can be as many <input> tags as form fields you want in 
your web page.
1. MetHod a ttrIBute of forM
The method attribute specifies how to send form-data (the form-data is sent to the page 
specified in the action attribute). The form-data can be sent as URL variables (with 
method=”get”) or as HTTP post transaction (with method=”post”).
1.1 Get method: 
 ? Appends form-data into the URL in name/value pairs
 ? The length of a URL is limited (about 3000 characters)
 ? Never use GET to send sensitive data! (will be visible in the URL)
 ? Useful for form submissions where a user want to bookmark the result
 ? GET is better for non-secure data, like query strings in Google
1.2 PoSt method: 
 ? Appends form-data inside the body of the HTTP request (data is not shown is in 
URL)
 ? It has no size limitations
 ? Form submissions with POST cannot be bookmarked
  syntax
  <form method=”get|post” action= “address”> 
 ? action=address 
 ? method=post or method=get 
1.3 attribute Values
v alue d escription
Get Default. Appends the form-data to the URL in name/value pairs: 
URL?name=value&name=value
Post Sends the form-data as an HTTP post transaction
70
Information and Computer Technology
2. InPut taG
The <input> tag collects the information from the user. 
The attributes are:
a ttribute n ame d escription
Name takes a string of characters as internal name of the field, to be 
used as a reference later
Size takes the value of a number in quotes which is equal to the width 
of the field.
Maxlength takes the value of a number in quotes which is equal to the 
maximum number of characters that can be entered.
Type takes the value of the field. It can take the value as “text” or “radio” 
or “checkbox” or “submit” .
2.1 t extBox field 
If the value of the type attribute is “text” i.e. <input type= “t ext”>, the form will show a 
textbox. This textbox accepts the input in one line. 
Along with this the TextBox field accepts value, size, name, maxlength, align and tabindex 
within the <input> tag. 
a ttributes of t ext Field d escription
  Size It defines the width of the field. It contains no. of visible 
characters.
  Maxlength It defines the maximum length of the field. It contains 
maximum no. of characters that can be entered in the 
field.
 Name It adds an internal name to the field so the program that 
handles the form can identify the fields.
 Value It defines what will appear in the box as the default value.
 Align It defines how the text field will be aligned on the form. 
Valid entries are: TOP , MIDDLE, BOTTOM, RIGHT, LEFT, 
TEXTTOP , BASELINE, ABSMIDDLE, ABSBOTTOM.
 Tabindex It defines in which order the different fields should be 
activated when the visitor clicks the tab key.
71
Forms
For e xample:
Two textboxes whose internal name (computer can understand the internal name) is 
“Fname” and “Mname” are created using the value “text” for the type attribute. The internal 
name is different from the label.
HTML Code:
<form>
Father’s Name: 
<input type=”text” size = “20” name=”FName” >
<br>
Mother’s name: 
<input type=”text” size = “20” name=”MName”>
</form>
The above code creates two textboxes, each of which is 20 characters wide. The two textboxes 
are arranged vertically one below the other. The <br> tag does the work of Enter key.
o utput:
Father name
mother’s name
2.2 t ext area 
Text areas are the fields that displays several text lines at a time. Textarea field is generally 
used to prepare the body of the email or use it to take comment from the user. The 
<textarea> tag has both start and the end tag indicating from where the textarea begins 
and where the area where you were writing text ends.
72
Information and Computer Technology
The attributes are:
a ttribute n ame d escription
Cols and Rows It takes the value as number. While cols indicate the length of the 
textarea, the rows indicate the number of rows with text that will 
be visible at a time.
Name It provides an internal name to the textarea field as understood by 
the computer.
Tabindex It defines the order number of activation of this field when the 
visitor clicks on the tab key.
Wrap It helps in flowing the text to the next row in a paragraph when the 
text reaches the right hand border of the text area. 
 (i) It can take three types of values as discussed below:
 (ii) If the text is not wrapped, i.e. its value is set to “wrap off ” , it 
will be placed in the first row of the text area. In such a case 
if the sentence doesn’t get completed at the right hand border 
of the text area, the text after the border will not be visible.
 (iii) The value v irtual recognizes the text with line breaks when 
textarea is loaded on the web page.
 (iv) Physical defines the format of the text. It will appear on the 
webpage as inserted by the user.
For e xample:
The following code displays the use of <textarea> tag.
<form method=”post” action=”mailto:youremail@gmail.com”>
 <textarea rows=”5” cols=”30” wrap=”physical” name=” comments”>
  Enter Comments Here
 </textarea>
<input type=”submit” value=”Email Y ourself ”>
</form>
The above code produces the following output which displays a text area of 5 lines 
visible at a time and 30 characters long with a word wrap facility where the text flows to 
the next line if the active text area is smaller than 30 characters due to small size of the 
webpage opened by the user.