Forms and Frames

Multiple Choice Questions

Question 1

Which element sets up an area of the web page for a form?

1. Input element
2. Form element
3. Checkbox element
4. None of these

Answer

Form element

Reason — The form element sets up an area of the web page for a form.

Question 2

Which form elements can accept input from the user?

1. Input
2. GET
3. POST
4. None of these

Answer

Input

Reason — The Input form elements can accept input from the user.

Question 3

Which of the following code adds a text box on a form?

1. <INPUT Type = "Text">
2. <INPUT Type = "Textbox">
3. <INPUT Type = "Box">
4. None of these

Answer

<INPUT Type = "Text">

Reason — <INPUT Type = "Text"> adds a text box on a form.

Question 4

Which of the following buttons is used to clear the contents and set the values of all the form elements to their initial state?

1. SUBMIT
2. SEND
3. RESET
4. None of these

Answer

RESET

Reason — The RESET button is used to clear the contents and set the values of all the form elements to their initial state.

Question 5

Which tag is used to define a selection list in a form?

1. <OPTION>
2. <SELECT>
3. <NAME>
4. <SELECTION>

Answer

<SELECT>

Reason — <SELECT> tag is used to define a selection list in a form.

Question 6

CGI stands for .............. .

1. Computer Graphics Interface
2. Common Gateway interface
3. Collective Gateway Interchange
4. Common Graphics Interface

Answer

Common Gateway interface

Reason — CGI stands for Common Gateway interface.

Question 7

Which of the following are the attributes of the <INPUT> tag?

1. Value and Size
2. Name and Length
3. Type and Text
4. None of these

Answer

Value and Size

Reason — Value and Size are the attributes of the <INPUT> tag. Value specifies the initial value for the element and Size specifies the width of the input field.

Question 8

Which attribute of the <INPUT> tag specifies that the input element should be preselected when the web page loads?

1. Selected
2. Checked
3. Default
4. None of these

Answer

Checked

Reason — Checked attribute of the <INPUT> tag specifies that the input element should be preselected when the web page loads.

Question 9

The ............... attribute of <INPUT> tag specifies the maximum number of characters for the input field.

1. Size
2. Length
3. Maxsize
4. Maxlength

Answer

Maxlength

Reason — The Maxlength attribute of <INPUT> tag specifies the maximum number of characters for the input field.

Question 10

Which attribute of the <TEXTAREA> tag defines the width of the textarea?

1. Rows
2. Width
3. Cols
4. None of these

Answer

Cols

Reason — The Cols attribute of the <TEXTAREA> tag defines the width of the textarea.

Fill in the Blanks

Question 1

A Form is a collection of ............... of information on a page.

Answer

A Form is a collection of fields of information on a page.

Question 2

A ............... allows a user to enter alphanumeric data that is a combination of characters and numbers.

Answer

A Textbox allows a user to enter alphanumeric data that is a combination of characters and numbers.

Question 3

A ............... is like a toggle switch, which helps the user to select or deselect one or more than one items.

Answer

A Checkbox is like a toggle switch, which helps the user to select or deselect one or more than one items.

Question 4

When the user has to make a selection among the several possible options, ............... buttons are used.

Answer

When the user has to make a selection among the several possible options, Radio buttons are used.

Question 5

............... programs are required to process the information present in a form.

Answer

CGI programs are required to process the information present in a form.

Question 6

Two important attributes to set up a form are ............... and ............... .

Answer

Two important attributes to set up a form are Action and Method.

Question 7

The default value of Method attribute is ............... .

Answer

The default value of Method attribute is Get.

Question 8

The ............... attribute of form specifies the file/page that the form is submitted to.

Answer

The Action attribute of form specifies the file/page that the form is submitted to.

Question 9

The ............... attribute of <INPUT> tag specifies the initial value for the field.

Answer

The Value attribute of <INPUT> tag specifies the initial value for the field.

Question 10

The ............... tag is used along with the <SELECT> tag to display a list of options.

Answer

The <OPTION> tag is used along with the <SELECT> tag to display a list of options.

State True or False

Question 1

A drop-down list displays a list of options from which the user can select an item.

Answer

True

Reason — A drop-down list displays a list of options from which the user can select an item.

Question 2

Radio button is a toggle switch used to select or deselect one or more items.

Answer

False

Reason — Radio button is a toggle switch used to select only one item out of many given items.

Question 3

Forms can be classified into three sections.

Answer

True

Reason — Forms can be classified into three sections —

1. Form Header
2. Input Fields
3. Action Buttons

Question 4

The Input element sets up an area for a form on the web page.

Answer

False

Reason — The Input elements are the form elements that can accept input from the user.

Question 5

Generally, we require one element to create a form in HTML.

Answer

False

Reason — Generally, we require two elements to create a form in HTML —

1. The Form element
2. The Input element

Question 6

The Button element creates button controls.

Answer

False

Reason — The Input element with Type attribute as 'Submit' or 'Reset' creates button controls.

Question 7

The Label element is used to describe the Form controls.

Answer

True

Reason — The Label element is used to describe the Form controls.

Question 8

The <INPUT> tag is used to create multi-line text box.

Answer

False

Reason — The <TEXTAREA> tag is used to create multi-line text box.

Question 9

Maxlength attribute specifies the width of the input field.

Answer

False

Reason — Maxlength attribute specifies the maximum number of characters that the user can enter into the input field.

Question 10

The <OPTION> tag is used with an <INPUT> tag to display a list of options.

Answer

False

Reason — The <OPTION> tag is used with a <SELECT> tag to display a list of options.

Question 11

Rows attribute defines the height of the Textarea.

Answer

True

Reason — Rows attribute defines the height of the Textarea.

Answer in One Word or a Sentence

Question 1

Which Input attribute of HTML form specifies the initial value to the field?

Answer

Value

Question 2

Which button is used to clear the contents of a form?

Answer

Reset

Question 3

Which form control allows a user to make a selection of only one option among the several possible options?

Answer

Radio Button

Question 4

Which attribute is used to preselect Checkbox?

Answer

Checked attribute

Question 5

Name the form control which acts like a toggle switch which helps the user to select or deselect more than one item.

Answer

Checkbox

Question 6

Name the attribute used to indicate that the choice in a drop-down list is preselected.

Answer

Selected attribute

Question 7

Which attribute of the drop-down list is used to add a scroll feature to it?

Answer

Size

Question 8

Name the entity used to select multiple options from the items displayed in a list.

Answer

Multiple

Short Answer Type Questions

Question 1

Name the attributes which are used with the <INPUT> tag.

Answer

The attributes which are used with the <INPUT> tag are:

1. Type
2. Name
3. Value
4. Size
5. Maxlength

Question 2

Which tag helps in creating a drop-down list on a form area?

Answer

The <SELECT> tag along with the <OPTION> tag is used to create a drop-down list on a form area.

Question 3

Which attribute of <INPUT> tag specifies what type of form control will be added to the form area?

Answer

The 'type' attribute of <INPUT> tag determines the type of form control that will be added to the form area

Question 4

Which tag adds a multi-line text box on the form area?

Answer

The <TEXTAREA> tag adds a multi-line text box on the form area.

Question 5

A form is divided into how many sections?

Answer

A form can be divided into three sections:

1. Form Header
2. Input Fields
3. Action Buttons

Question 6

What is the purpose of a password field?

Answer

The purpose of a password field is to securely input and hide confidential information like passwords or PINs by displaying dots or asterisks instead of the actual data.

Question 7

What is the purpose of a scroll bar added with a combo box?

Answer

A scroll bar added to a combo box indicates that there are more elements in the list and helps to navigate through this longer list of options.

Question 8

How can you select multiple options from the items displayed in a list?

Answer

We can select multiple options from the items displayed in a list by using the entity "multiple". The Ctrl or Shift keys are used to select more than one element from the list.

Long Answer Type Questions

Question 1

What do you understand by the Method attribute? Differentiate between the Get method and the Post method.

Answer

The Method attribute specifies that the form information should be posted to the URL given in the action attribute. Possible values are GET and POST.

Differences between the Get method and the Post method are:

Question 2

Explain any two input elements.

Answer

Two input elements are as follows:

1. Text Box — A text box allows a user to enter alphanumeric data that is a combination of characters and numbers. It creates a single line text box. We can add a text box to the form in the following way:
   Syntax: <INPUT Type= "Text">
2. Checkbox — A checkbox is like a toggle switch which helps the user to select or deselect one or more items. We have to type the label next to the checkbox.
   Syntax: <INPUT Type = "Checkbox" Name = "Hobbies" Value = "Reading">

The below example shows the usage of textbox and checkbox in a form:

<HTML>
<BODY>
<FORM>
<P>
NAME : 
<INPUT TYPE = "TEXT">
</P>
<P>
CHOOSE YOUR QUALIFICATION : <BR>
<INPUT TYPE = "CHECKBOX" NAME = "C1" VALUE = "GRADUATE">
GRADUATE <BR>
<INPUT TYPE = "CHECKBOX" NAME = "C2" VALUE = "POSTGRADUATE" >
POST GRADUATE
</P>
</FORM>
</BODY>
</HTML>

Question 3

Differentiate between:

1. Radio Button and Checkbox
2. Submit Button and Reset Button

Answer

1. Differences between Radio Button and Checkbox:

2. Differences between Submit Button and Reset Button:

Question 4

Write a short note on the application areas of forms.

Answer

Forms have diverse application areas which include the following:

1. Educational sites — They are used for collecting names, addresses, telephone numbers, e-mail addresses, and other information of students which is required by the websites to register them for an online course.
2. Online shopping — They are used for gathering information for the purchase of an item. For example, if we want to purchase a book or any other item over the Internet, we would be required to fill in our name, mailing address, mode of payment that we wish to opt for, and so on.
3. Online Feedback Forms — They are used for collecting feedback about a website. Most websites that offer a service encourage the users to send their feedback. Apart from building customer relations, it is a source of information for modifications or improvements.
4. Providing Interface for a Chat Session — Users are required to fill out a form if they want to participate in a chat session or a discussion group.

Question 5

Define the following attributes associated with the <INPUT> tag:

i. Type

ii. Value

iii. Size

Answer

i. Type — This attribute specifies what kind of form control will be added to the form. The default type for an input element is "Text". Type attribute can take different values like "Text", "Checkbox", "Radio" or "Password".

ii. Value — It specifies the initial value for the element.

iii. Size — It specifies the width of the input field.

Question 6

Describe the Cols attribute and Rows attribute of the <TEXTAREA> tag.

Answer

Rows attribute of the <TEXTAREA> tag defines the height of the textarea and Cols attribute of the <TEXTAREA> tag defines the width of the text area.

Consider the following example,

<HTML>
<HEAD>
<TITLE>Using text area</TITLE>
</HEAD>
<BODY>
<FORM>
Remarks : <TEXTAREA ROWS = "6" COLS = "50" NAME = "REMARKS">
Enter your remarks here. </TEXTAREA>
</FORM>
</BODY>
</HTML>

Application Based Questions

Question 1

Shagun wants to customize the width and height of the textarea in her form. How can she do it?

Answer

Shagun can use the Rows and Cols attribute of the <TEXTAREA> tag to customize the width and height of the textarea in her form. Rows attribute defines the height of the textarea, and Cols attribute defines the width of the text area. Example code for customizing the width and height of the textarea is:

<TEXTAREA ROWS = "6" COLS = "50" NAME = "REMARKS">
Enter your remarks here.
</TEXTAREA>

Question 2

Write the HTML code to create the following form elements:

Answer

HTML code to create the form elements is given below:

<HTML>
<HEAD>
<TITLE>Pizza Selection</TITLE>
</HEAD>
<BODY>
<FORM>
Pizza Size : <BR>
<INPUT TYPE = "RADIO" ID = "R1" NAME = "SIZE" VALUE = "SMALL" />
<LABEL FOR = "R1"> Small </LABEL> 
<BR>
<INPUT TYPE = "RADIO" ID = "R2" NAME = "SIZE" VALUE = "MEDIUM" CHECKED/>
<LABEL FOR = "R2"> Medium </LABEL> 
<BR>
<INPUT TYPE = "RADIO" ID = "R3" NAME = "SIZE" VALUE = "LARGE" /> 
<LABEL FOR = "R3"> Large </LABEL> 
<BR>
<INPUT TYPE = "SUBMIT" NAME = "Process Order" VALUE = "Click to order Pizza" /> 
<INPUT TYPE = "RESET" NAME = "Clear" VALUE = "Click to Clear" /> 
</FORM>
</BODY>
</HTML>

Question 3

In the examination, Suparna has been asked to write the code for placing a drop-down list in the form area. She is also asked to indicate any one of the menu items as preselected. Help her in solving the problem.

Answer

Suparna can use the selected attribute with the <OPTION> tag to indicate that one of the menu items is preselected.

Consider the following example in which the user has to select his destination. Here, the option "Chandigarh" is pre-selected.

<HTML>
<HEAD>
<TITLE>Drop-down Example</TITLE>
</HEAD>
<BODY> 
<FORM>
<P> Select your destination: </P>
<SELECT Name = "Cities">
<OPTION Selected> Chandigarh</OPTION>
<OPTION> Kolkata </OPTION>
<OPTION> Bhopal </OPTION>
<OPTION> Lucknow </OPTION>
<OPTION> Patna </OPTION>
<OPTION> Shimla </OPTION>
<OPTION> Delhi </OPTION>
<OPTION> Mumbai </OPTION>
<OPTION> Chennai </OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>