Theoretical Questions

Question 1

Name some popular audio and video formats.

Answer

Some popular audio formats are mp3, wav, midi, m4a and ogg/oga.

Some popular video formats are asf, avi, mpeg, QuickTime and RealVideo.

Question 2

Name the tags that can be used to insert audio and video files in a webpage.

Answer

Following tags can be used to insert audio files in a webpage:

1. Anchor tag <A>

2. Embed tag <EMBED>
3. Audio tag <AUDIO>

Following tags can be used to insert video files in a webpage:

1. Anchor tag <A>

2. Embed tag <EMBED>
3. Video tag <VIDEO>

Question 3

What character is displayed on the password forms when the user inputs characters ?

1. a random character.
2. a '+' character.
3. an asterisk
4. a dot

Answer

an asterisk

Reason — We can mask the input typed into a text field by specifying an <input> tag as password. It hides the characters input in the box
and shows asterisk in place of every character.

Question 4

What attribute is used for radio buttons ?

1. radiobutton
2. radiob
3. radio
4. optionbutton

1
Answer

radio

Reason — Radio buttons are created in the following manner:

<form>
...
<input type = "radio" name = "Gender" value = "male"> Male <br>
<input type = "radio" name = "Gender" value = "female"> Female
<br>
...
</form>

The TYPE attribute is set to "radio".

Question 5

What attributes are valid for textarea input ?

1. just name
2. name, columns and rows
3. name and rows
4. columns and rows

Answer

name and rows

Reason — NAME, COLS and ROWS are the valid attributes which specify the name of the control, the number of columns and the number of
rows of text area box, respectively.

Question 6

What attributes can be used with the SELECT form ?

1. name and multiple

2. name, multiple, rows and cols
3. name, multiple and size
4. multiple and size

Answer

name, multiple and size

Reason — NAME, SIZE and MULTIPLE attributes can be used with the SELECT form which specify the name of the control, present a
scrolling list box and allow the user to select multiple items from the menu, respectively.

Question 7

Is the size attribute valid for the submit button ?

1. Yes
2. No

Answer

2
No

Reason — No, the SIZE attribute is not valid for the SUBMIT button.

Question 8

The two most important attributes of a form are :

1. Id and action
2. Class and method
3. Action and method
4. method and id

Answer

Action and method

Reason — The two most important attributes of a form are ACTION and METHOD.

ACTION attribute specifies any URL script which will receive uploaded data and METHOD specifies the method which will be used to upload
data.

Question 9

A label's for attribute should match the input's ............... .

1. type
2. id
3. name
4. size

Answer

id

Reason — The for attribute of a <label> tag should match the id attribute of the corresponding input element. The for attribute is used
to associate a label with a form control, providing a textual description or caption for the input field.

Question 10

Creates blank text field, but shows the text as asterisks.

1. Type="text"
2. Type="hidden"
3. Type="password"
4. Type="null"

Answer

Type="password"

Reason — We can mask the input typed into a text field by specifying an <input> tag as password. It hides the characters input in the box
and shows asterisk in place of every character.

Question 11

3
Method attribute will always post data into the browser.

1. True
2. False

Answer

False

Reason — The method attribute will not always "post" data into the browser. The method attribute can be set to "GET" or "POST" to determine
how the data is sent to the server.

Question 12

Checkbox buttons let users select one or more of a particular set of choices.

1. True
2. False

Answer

True

Reason — Checkboxes are used when more than one option is required to be selected.

Question 13

<input type="submit" name="submit" id="submit" /> creates a reset button.

1. True
2. False

Answer

False

Reason — <input type="submit" name="submit" id="submit" /> creates a SUBMIT button. RESET button is
created by the following code:
<input type="reset" name="reset" id="reset" />

Question 14

What are forms ?

Answer

HTML forms are means to collect information/data from the site visitor. It is done with the help of controls that collect the information and send
it over.

Question 15

What do you understand by controls in forms ?

Answer

4
Users interact with forms through named objects called controls. A control's "control name" is given by its name attribute. Each control has both
an initial value and a current value, both of which are character strings.
Some control types used in HTML are buttons, checkboxes, radio buttons, menus, password, text input etc.

Question 16

Name different control types supported by HTML forms.

Answer

The different control types supported by HTML forms are as follows:

1. Buttons
2. Checkboxes
3. Radio Buttons
4. Menus
5. Password
6. Text Input
7. Hidden Controls

Question 17

Write the tags to define the following :

(i) A text box

(ii) A text area

(iii) A radio button

(iv) A check box

(v) A Password box

(vi) A pop up box

(vii) Submit button

(viii) A Label

Answer

(i) A text box

<INPUT TYPE = "TEXT" NAME = "NAME" />

(ii) A text area

<TEXTAREA NAME = "COMMENTS" ROWS = "5" COLS = "50">

Default Text
</TEXTAREA>

(iii) A radio button

<INPUT TYPE = "RADIO" NAME = "STREAM" VALUE = "Science" /> Science

(iv) A check box

5
<INPUT TYPE = "CHECKBOX" NAME = "S1" VALUE = "ENGLISH" /> English

(v) A Password box

<INPUT TYPE = "PASSWORD" NAME = "PASSWD" />

(vi) A pop up box

<SELECT NAME = "COLOUR">

<OPTION VALUE = "Red"> Red </OPTION>
<OPTION VALUE = "Blue"> Blue</OPTION>
<OPTION VALUE = "Green"> Green</OPTION>
</SELECT>

(vii) Submit button

<INPUT TYPE = "SUBMIT" NAME = "SUBMIT" VALUE = "SUBMIT" />

(viii) A Label

<LABEL FOR = "S1">Science</LABEL>

<INPUT TYPE = "RADIO" ID = "S1" NAME = "STREAM" VALUE = "Science">

Question 18

Write HTML code to produce following controls :

Grade : A B C
Subjects : English Maths
Computers Accounts
Economics
Business Studies
Answer

<TABLE BORDER = "0">

<TR>
<TD> Grade : </TD>
<TD> <INPUT TYPE = "RADIO" NAME = "GRADE" VALUE = "A" /> A </TD>
<TD> <INPUT TYPE = "RADIO" NAME = "GRADE" VALUE = "B" /> B </TD>
<TD> <INPUT TYPE = "RADIO" NAME = "GRADE" VALUE = "C" /> C </TD>
</TR>
<TR>
<TD VALIGN = "TOP" ROWSPAN = "4"> Subjects :</TD>
<TD COLSPAN = "2">
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "English" /> English
</TD>
<TD>
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Maths" /> Maths
</TD>
</TR>
<TR>
<TD COLSPAN = "2">
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Computers" /> Computers
</TD>
<TD>
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Accounts" /> Accounts
</TD>
</TR>
<TR>

6
<TD COLSPAN = "2">
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Economics" /> Economics
</TD>
</TR>
<TR>
<TD COLSPAN = "2">
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Business Studies" /> Business
Studies
</TD>
</TR>
</TABLE>

Output

Question 19

Write HTML code to produce these controls :

(i) a text box

(ii) a text area with 10 rows and 30 columns

(iii) A password text box

(iv) A pop up box to choose class from it.

Answer

(i) a text box

<INPUT TYPE = "TEXT" NAME = "FIRST NAME" />

(ii) a text area with 10 rows and 30 columns

<TEXTAREA ROWS = "10" COLS = "30" NAME = "COMMENTS">

7
Default Text
</TEXTAREA>

(iii) A password text box

<INPUT TYPE = "PASSWORD" NAME = "PWD" />

(iv) A pop up box to choose class from it.

<SELECT NAME = "CLASS">

<OPTION VALUE = "Class I" SELECTED> Class I </OPTION>
<OPTION VALUE = "Class II"> Class II</OPTION>
<OPTION VALUE = "Class III"> Class III</OPTION>
<OPTION VALUE = "Class IV"> Class IV</OPTION>
<OPTION VALUE = "Class V"> Class V</OPTION>
</SELECT>

Application Oriented Questions

Question 1

Create a form as given below by using different Form tags and attributes.

(Hint : Also use Pre, Input, Select, Option tags for this)

Answer

<HTML>
<BODY>
<FORM>
<H1> My Guest Book </H1>
<P>
Please let me know what you think of my Web Pages. Thanks !
</P>
<TABLE BORDER = "0" RULES = "NONE" FRAME = "VOID">

8
<TR>
<TD> <PRE>What is your name ?</PRE> </TD>
<TD> <INPUT TYPE = "TEXT" NAME = "NAME" /> </TD>
</TR>
<TR>
<TD> <PRE>What is your e-mail address :</PRE> </TD>
<TD> <INPUT TYPE = "TEXT" NAME = "EMAILID" /> </TD>
</TR>
</TABLE>
<BR>
Check all that apply:
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C1" NAME = "C1" VALUE = "I really like your Web Site.">
<LABEL FOR = "C1">I really like your Web Site.</LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C2" NAME = "C2" VALUE = "One of the best site I've
seen.">
<LABEL FOR = "C2">One of the best site I've seen.</LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C3" NAME = "C3" VALUE = "I have no taste so your site
didn't do much for me.">
<LABEL FOR = "C3">I have no taste so your site didn't do much for me.</LABEL>
<BR>
<BR>
Choose the one thing you love best of my pages:
<BR>
<INPUT TYPE = "RADIO" ID = "O1" NAME = "OPINION"
VALUE = "That gorgeous picture of you and your dogs.">
<LABEL FOR = "O1">That gorgeous picture of you and your dogs.</LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "O2" NAME = "OPINION"
VALUE = "The inspiring recap about your childhood.">
<LABEL FOR = "O2">The inspiring recap about your childhood.</LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "O3" NAME = "OPINION"
VALUE = "The detailed list of your hobbies.">
<LABEL FOR = "O3">The detailed list of your hobbies.</LABEL>
<BR>
<BR>
Imagine my site as a book, video or album.
<BR>
What do you think about my site?
<BR>
<SELECT NAME = "DETAILS" SIZE = "3">
<OPTION VALUE = "ADD MORE DETAILS ABOUT YOUR HOBBIES!" SELECTED>
ADD MORE DETAILS ABOUT YOUR HOBBIES!
</OPTION>
<OPTION VALUE = "ADD PICTURES OF YOUR CHILDHOOD">
ADD PICTURES OF YOUR CHILDHOOD
</OPTION>
<OPTION VALUE = "ADD YOUR FAVOURITES">
ADD YOUR FAVOURITES
</OPTION>
</SELECT>
<INPUT TYPE = "SUBMIT" NAME = "SUBMIT" VALUE = "Click here to submit" />
</FORM>
</BODY>
</HTML>

Output

9
Question 2

Create a webpage that receives pizza orders through a web form as shown below :

Answer

<HTML>
<BODY BGCOLOR = "YELLOW">
<FORM>
<H1> Pizza Factory </H1>
<HR>
<P>
<B> Pizza Order Form </B>
</P>

<TABLE WIDTH = "50%" BORDER = "0" FRAME = "VOID" RULES = "NONE">

<TR>

10
<TD>Name </TD>
<TD><INPUT TYPE = "TEXT" NAME = "NAME"></TD>
</TR>
<TR>
<TD>Address </TD>
<TD><INPUT TYPE = "TEXT" NAME = "ADDRESS"> </TD>
</TR>
<TR>
<TD><B> Size </B><BR> </TD>
<TD><B> Toppings </B><BR> </TD>
</TR>
<!-- This inserts a blank row -->
<TR>
<TD>&nbsp; </TD>
<TD>&nbsp; </TD>
</TR>
<TR>
<TD VALIGN = "TOP">
<INPUT TYPE = "RADIO" ID = "R1" NAME = "SIZE" VALUE = "SMALL" />
<LABEL FOR = "R1"> Small </LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "R2" NAME = "SIZE" VALUE = "MEDIUM" />
<LABEL FOR = "R2"> Medium </LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "R3" NAME = "SIZE" VALUE = "LARGE" />
<LABEL FOR = "R3"> Large </LABEL>
<BR>
</TD>
<TD>
<INPUT TYPE = "CHECKBOX" ID = "CB1" NAME = "C1" VALUE = "CHEESE" />
<LABEL FOR = "CB1"> Cheese </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB2" NAME = "C2" VALUE = "OLIVES" />
<LABEL FOR = "CB2"> Olives </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB3" NAME = "C3" VALUE = "PEPPERONI" />
<LABEL FOR = "CB3"> Pepperoni </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB4" NAME = "C4" VALUE = "BACON" />
<LABEL FOR = "CB4"> Bacon </LABEL>
<BR>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE = "SUBMIT" NAME = "Process Order" VALUE = "Process Order" />
</TD>
<TD ALIGN = "CENTER">
<INPUT TYPE = "RESET" NAME = "Clear" VALUE = "Clear" />
</TR>
</TD>
</TABLE>
<TEXTAREA NAME = "ORDER" COLS = "70" ROWS = "5" >
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Output

11
Formative Assessment

Question 1(a)

Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

<input type="text" size="3" maxlength="3">

<input type="text" size="2" maxlength="2">
<input type="text" size="4" maxlength="4">

Answer

The output of this code fragment in browser is shown below:

Question 1(b)

Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

<input type="text" name="text1">

Answer

The output of this code fragment in browser is shown below:

12
Question 1(c)

Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

<textarea cols="30" rows="6" name="textarea"> Please enter text </textarea>

Answer

The output of this code fragment in browser is shown below:

Question 1(d)

Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

<select name= "colors">

<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Orange</option>
</select>

Answer

The output of this code fragment in browser is shown below:

13
Question 1(e)

Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

<select name= "colors" size="4">

<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Orange</option>
</select>

Answer

The output of this code fragment in browser is shown below:

Question 1(f)

Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

Male
<input type= "radio" value="male"><br>
Female
<input type= "radio" value="female">

Answer

The output of this code fragment in browser is shown below:

14
Question 1(g)

Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

Male
<input type="radio" value="male"><br>
Female
<input type="radio" value="female" checked>

Answer

The output of this code fragment in browser is shown below:

Question 1(h)

Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

YES
<input type="checkbox" value="yes"><br>
NO
<input type="checkbox" value="no">

Answer

The output of this code fragment in browser is shown below–

Question 1(i)

15
Consider the following code fragments and determine how these code fragments would create form elements, i.e., draw how their output would
appear in browser.

YES
<input type="checkbox" value="yes" checked><br>
NO
<input type="checkbox" value="no">

Answer

The output of this code fragment in browser is shown below:

16