Objective Type Questions
Question 1
Which of the following is/are not valid tag(s) for inserting audio files in an HTML page ?
- embed
- audio
- sound
- music
Answer
sound, music
Reason — <EMBED>
and <AUDIO>
tags are used to insert audio files in an HTML page. sound and music are not valid tags.
Question 2
Which of the following is/are not valid tag(s) for inserting video files in an HTML pages?
- embed
- video
- movie
- VID
Answer
movie, VID
Reason — <EMBED>
and <VIDEO>
tags are used to insert video files in an HTML document. movie and VID are not valid tags.
Question 3
Which are the ways to add an audio file in a web page ?
- Linking via
<A>
- Embedding via
<EMBED>
- Embedding via
<VIDEO>
- All of these
Answer
Linking via <A>
Embedding via <EMBED>
Reason — We can link an audio file via anchor tag <A>
in the following way :
<A HREF = "audio.mp3"> Click to Play </A>
We can link an audio file via embed tag <EMBED>
in the following way :
<EMBED SRC = "audio.mp3" WIDTH = "100" HEIGHT = "50" AUTOSTART = "TRUE" LOOP = "TRUE">
<VIDEO>
tag is used to insert a video file in HTML page.
Question 4
Which are the ways to add a video file in a web page ?
- Linking via
<A>
- Embedding via
<EMBED>
- Embedding via
<VIDEO>
- All of these
Answer
All of these
Reason — We can add a video file in a web page using different tags in the following ways:
1. Using anchor tag <A>
<A HREF = "WORDS.MP4"> Click here to play video </A>
2. Using <EMBED>
tag
<EMBED SRC = "WORDS.MP4" WIDTH = "100" HEIGHT = "50" AUTOSTART = "TRUE" LOOP = "FALSE">
3. Using <VIDEO>
tag
<VIDEO SRC = "WORDS.MP4" TYPE = "VIDEO/MP4"> Video cannot be played </VIDEO>
Question 5
Any tag allowed inside a <body>
tag is allowed inside a <form>
tag.
- True
- False
Answer
True
Reason — Any tag allowed inside a <body>
tag is allowed inside a <form>
tag to render the form in a presentable way.
Question 6
A form has two required attributes. These are :
- Method and Action
- Get and Post
- Start and Stop
- Begin and End
Answer
Method and Action
Reason — The <FORM>
tag always takes two attributes — ACTION and METHOD.
ACTION attribute specifies any script URL that will receive uploaded data and METHOD specifies the method which will be used to upload data.
Question 7
The <input>
tag has several kinds of controls which are dictated by the ............... attribute.
- SRC
- value
- name
- type
Answer
type
Reason — The <input>
tag has several kinds of controls which are dictated by the TYPE attribute. It indicates the type of input control we want to create. This element is used to create other form controls such as radio buttons and checkboxes.
Question 8
It is possible to set the width of a text by specifying a ............... attribute.
- limit
- size
- value
- maxlength
Answer
size
Reason — It is possible to set the width of a text by specifying a SIZE attribute. SIZE attribute specifies the width of the text input control in terms of characters.
Question 9
Which of the following tags will clear the contents of the form?
<INPUT TYPE="CLEAR" VALUE="Clear the form">
<INPUT TYPE="SUBMIT" VALUE="Clear the form">
<INPUT TYPE="RESET" VALUE="Clear the form">
<INPUT TYPE="BUTTON" VALUE= "Clear the form">
Answer
<INPUT TYPE="RESET" VALUE="Clear the form">
Reason — The RESET button is a special button which when clicked, resets all the form controls to default states.
Question 10
Consider the following form control in a HTML form :
x Male
x Female
Now choose the correct line of code for the above :
<input type = "radio" name= "Gender" value= "male">Male<br>
<input type = "radio" name= "Gender" value= "female">Female<br>
<input type = "radiobutton" name = "Gender" value= "male">Male<br>
<input type = "radiobutton" name = "Gender" value= female">Female<br>
<input type = "radio", name = "Gender">< value= "male">Male
<input type = "radio", name = "Gender">< value= "female">Female
<input type = "radio" name= "Gender" value= "male"><br>
<input type = "radio" name= "Gender" value = "female"><br>
Answer
<input type = "radio" name= "Gender" value= "male">Male<br>
<input type = "radio" name= "Gender" value= "female">Female<br>
Reason — The above HTML tags will render the desired output.
Question 11
A developer can restrict the values accepted in a text field by specifying a ............... attribute.
- size
- maxlength
- value
- You cannot restrict text values using HTML
Answer
maxlength
Reason — A developer can restrict the values accepted in a text field by specifying a maxlength attribute. It specifies the maximum number of characters a user can enter into the text box.
Question 12
You can mask the input typed into a text field by specifying an <input>
tag as ............... .
- password
- secure
- invisible
- hidden
Answer
password
Reason — You 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 dots or asterisk in place of every character.
Question 13
Tag to create password field in HTML document :
<password>
<input>
<pwd>
<pword>
Answer
<input>
Reason — The password boxes are created using an <INPUT>
element whose TYPE attribute has a value of "password". An example is as follows:
<INPUT TYPE = "PASSWORD" NAME = "PWD" />
Question 14
HTML provides an attribute for the <input>
tag that allows you to hide data with some designated character to make it secure.
- True
- False
Answer
True
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. Consider the following example,
<INPUT TYPE = "PASSWORD" NAME = "PWD" />
Question 15
Which of the following tag is used to define options in a drop-down selection list ?
<select>
<list>
<dropdown>
<option>
Answer
<option>
Reason — A drop down selection list is created with SELECT and OPTION tag pair. An example is given below:
<FORM ACTION = "WWW.GMAIL.COM" METHOD = "GET">
<SELECT NAME = "STREAM">
<OPTION VALUE = "SCIENCE"> Science </OPTION>
<OPTION VALUE = "COMMERCE"> Commerce </OPTION>
<OPTION VALUE = "HUMANITIES"> Humanities </OPTION>
</SELECT>
<INPUT TYPE = "SUBMIT" VALUE = "SUBMIT" />
</FORM>
<SELECT>
tag specifies a selection drop down list and <OPTION>
tag specifies the various options available to select from.
Question 16
Which of the following restricts a user to one selection ?
- checkbox
- optionbox
- radio button
- drop down list
Answer
radio button
Reason — Radio buttons are used when only one option is required to be selected. All of its options are mutually exclusive.
Question 17
You can pre-select a radio button by utilizing a ............... attribute.
- select
- choice
- checked
- marked
Answer
checked
Reason — You can pre-select a radio button by utilizing a checked attribute. It indicates that a particular option should be selected by default when a page loads.
Question 18
If you want to display a list of 200 countries which control should you use:
- radio button
- checkbox
- select list
- slide widget
Answer
select list
Reason — A select list is used when we have many options available to be selected but only one or two options will be selected. We can have a select list of 200 countries out of which a country can be selected.
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:
- Anchor tag
<A>
- Embed tag
<EMBED>
- Audio tag
<AUDIO>
Following tags can be used to insert video files in a webpage:
- Anchor tag
<A>
- Embed tag
<EMBED>
- Video tag
<VIDEO>
Question 3
What character is displayed on the password forms when the user inputs characters ?
- a random character.
- a '+' character.
- an asterisk
- 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 ?
- radiobutton
- radiob
- radio
- optionbutton
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 ?
- just name
- name, columns and rows
- name and rows
- 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 ?
- name and multiple
- name, multiple, rows and cols
- name, multiple and size
- 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 ?
- Yes
- No
Answer
No
Reason — No, the SIZE attribute is not valid for the SUBMIT button.
Question 8
The two most important attributes of a form are :
- Id and action
- Class and method
- Action and method
- 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 ............... .
- type
- id
- name
- 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.
- Type="text"
- Type="hidden"
- Type="password"
- 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
Method attribute will always post data into the browser.
- True
- 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.
- True
- 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.
- True
- 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
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:
- Buttons
- Checkboxes
- Radio Buttons
- Menus
- Password
- Text Input
- 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
<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>
<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">
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">
<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
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>
<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
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:
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:
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:
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)
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: