Loading...
Please wait while we prepare your content
Please wait while we prepare your content
Solutions for Computer Applications, Class 10, CBSE
Create a form as given below by using different Form tags and attributes.
(Hint : Also use Pre, Input, Select, Option tags for this)
<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>
Create a webpage that receives pizza orders through a web form as shown below :
<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>
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">The output of this code fragment in browser is shown below:
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">The output of this code fragment in browser is shown below:
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>The output of this code fragment in browser is shown below:
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>The output of this code fragment in browser is shown below:
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>The output of this code fragment in browser is shown below:
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">The output of this code fragment in browser is shown below:
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>The output of this code fragment in browser is shown below:
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">The output of this code fragment in browser is shown below:
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">The output of this code fragment in browser is shown below:
Which of the following is/are not valid tag(s) for inserting audio files in an HTML page ?
sound, music
Reason — <EMBED> and <AUDIO> tags are used to insert audio files in an HTML page. sound and music are not valid tags.
Which of the following is/are not valid tag(s) for inserting video files in an HTML pages?
movie, VID
Reason — <EMBED> and <VIDEO> tags are used to insert video files in an HTML document. movie and VID are not valid tags.
Which are the ways to add an audio file in a web page ?
<A><EMBED><VIDEO>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.
Which are the ways to add a video file in a web page ?
<A><EMBED><VIDEO>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>
Any tag allowed inside a <body> tag is allowed inside a <form> tag.
True
Reason — Any tag allowed inside a <body> tag is allowed inside a <form> tag to render the form in a presentable way.
A form has two required attributes. These are :
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.
The <input> tag has several kinds of controls which are dictated by the ............... attribute.
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.
It is possible to set the width of a text by specifying a ............... attribute.
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.
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"><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.
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>
<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.
A developer can restrict the values accepted in a text field by specifying a ............... attribute.
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.
You can mask the input typed into a text field by specifying an <input> tag as ............... .
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.
Tag to create password field in HTML document :
<password><input><pwd><pword><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" />
HTML provides an attribute for the <input> tag that allows you to hide data with some designated character to make it secure.
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" />
Which of the following tag is used to define options in a drop-down selection list ?
<select><list><dropdown><option><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.
Which of the following restricts a user to one selection ?
radio button
Reason — Radio buttons are used when only one option is required to be selected. All of its options are mutually exclusive.
You can pre-select a radio button by utilizing a ............... attribute.
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.
If you want to display a list of 200 countries which control should you use:
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.
Name some popular audio and video formats.
Some popular audio formats are mp3, wav, midi, m4a and ogg/oga.
Some popular video formats are asf, avi, mpeg, QuickTime and RealVideo.
Name the tags that can be used to insert audio and video files in a webpage.
Following tags can be used to insert audio files in a webpage:
<A><EMBED><AUDIO>Following tags can be used to insert video files in a webpage:
<A><EMBED><VIDEO>What character is displayed on the password forms when the user inputs characters ?
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.
What attribute is used for radio buttons ?
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".
What attributes are valid for textarea input ?
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.
What attributes can be used with the SELECT form ?
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.
Is the size attribute valid for the submit button ?
No
Reason — No, the SIZE attribute is not valid for the SUBMIT button.
The two most important attributes of a form are :
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.
A label's for attribute should match the input's ............... .
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.
Creates blank text field, but shows the text as asterisks.
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.
Method attribute will always post data into the browser.
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.
Checkbox buttons let users select one or more of a particular set of choices.
True
Reason — Checkboxes are used when more than one option is required to be selected.
<input type="submit" name="submit" id="submit" /> creates a reset button.
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" />
What are forms ?
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.
What do you understand by controls in forms ?
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.
Name different control types supported by HTML forms.
The different control types supported by HTML forms are as follows:
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
(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">Write HTML code to produce following controls :
Grade : A B C
Subjects : English Maths
Computers Accounts
Economics
Business Studies
<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>
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.
(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>