HTML FORMS AND CSS - Chapter 7

Topic – 1 forms
Objective Type Questions
[A] choose the correct alternative.

1. a …….. can be inserted in HTML document which can act as a container for all the input elements.

(a) text field

(b) text area

(c) form

(d) command button

Ans. (c) form

2. ………… method is used to sent form data as URL variables.

(a) Get

(b) set

(c) post

(d) none of these

Ans. (a) get

3. ………… method is used to send form data as HTTP post.

(a) get

(b) set

(c) post

(d) none of these

Ans. (c) post

4. what is the purpose of a web form?

(a) an outdated feature still used to help the page load faster
(b) an useful way to send information from the user directly to the search engines

(c) a way to input data into a website or an application

(d) to enable the user to navigate the website with ease.

Ans. (c) a way to input data into a website or an applications

5. which element allows for the creation of group of options in a select menu?

(a) <select>

(b) <group>

(c) <option>

(d) <optgroup>

Ans. (c) <option>

6. which option will be selected with the following code snippet?

(a) fiat

(b) saab

(c) selected

(d) audi

Ans. (a) fiat

7. HTML form, <input tye=pe=”text”> is used for

(a) one line text

(b) block of text

(c) one paragraph

(d) all the above

Ans. (a) one line text

8. the ……….. attribute specifies the page which handles the input from the user.

(a) method

(b) frame
(c) action

(d) target

Ans. (c) action

Very Short Answer Type Questions

Q.1. how text box and text area controls are different from each other?

Ans. text box accepts in one line while text area accepts multiple lines of input.

Q.2. state the purpose of submit and reset buttons.

Ans. submit buttons: when activated, a submit button submits a from. A form may contain more than
one submit buttons.

Reset buttons: when activated, a reset button resets all controls to their initial values.

Q.3. what is difference between radio button and checkbox.

Ans. radio buttons let a user select only one of the choices while check boxes allow the user to select
one or more of the choices.

Short Answer Type Questions

Q.1. what do you understand by controls in forms?

Ans. user interact with through named controls. A controls 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.

Q.2. name different control types supported by HTML forms.

Ans. 1. Buttons

2. check boxes

3. radio buttons

4. menus

5. password

6. text input

7. hidden controls
Q.3. 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.

Ans. (i) <INPUT type = “text”>

(ii) <TEXTAREA>

(iii) <INPUT type = “radio”

(iv) <INPUT type “checkbox”>

(v) <INPUT type = “password”>

(vi) HTML type not have any pop component, for this we can use any scripting language.

(vii) <button type = “submit”>

(viii) <label for = male”> label name </label>

Q.4. what is INTPUT tag?

Ans. INPUT tag is used to provide an input field in a form where the user can enter the data. An input
field may be a text file a checkbox, a radio button, a button, and more. Input element is always used
within the form element. Thus, input element defines an object on the form which can receive user’s
input.

Q.5. why forms are used in Web pages?

Ans. HTML forms are used to pass data to a server. A form can be inserted in HTML document using the
HTML form element which acts as a container for all the input element. 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.

Q.6. explain method and action attributes of form tag.

Ans. method: 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”).

Action: the action attribute submits collected information to a processing agent (a file containing a script
to process this information).

Q.7. differentiate between Get & post methods of form tag.

Ans. get: it appends form data into the URL in name/value pairs. The length of a URL is limited about
3000 characters. Useful for form submissions where a user wants to bookmarks the result. It is better
for non secure data, like query strings in google.

Post: it appends form data inside the body of the HTTP request (data is not shown in URL). It has no size
limitations. Form submissions with post cannot be bookmarked.

Q.8. explain the use of radio buttons in HTML with the help of a suitable example.

Ans. radio buttons allow selecting one of the two form lighting type i.e. either. Tube light or bulb.
Similarly, the user can select any one of the three from lighting size i.e., long medium and short. This is
achieved by a set the same. Here all light ahs the name Ltype while all light is name Lsize.

This is where comes handy, especially if the value has to later on.

Q.9. mention all the attributes of check box.

Ans. attributes of chackboxes:

NAME: it adds an internet name to the field so the program that hands the form can identify the fields.

VALUE: it defines what will be submitted if checked.

ALIGN: it defines how the text field will be aligned form.

Valid entries are: TOP, MIEELE, BOTTOM, RIGHT, LEFTTEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

TABINDEX: it defines in which order the different fields should be activated when the visitor clicks the
tab key.

Q.10. which attributes are necessary to insert drop down list in a HTML pages?

Ans. the attributes are necessary to insert drop down list in a HTML page are

NAME: it adds an internet name to the field so the program that handles the form can identify the field.

SIZE: it defines the number of items to be visible when user clicks on the drop down box.

MULTIPLE: it allows for multiple selection.

VALUE: it defines what will be submitted when an item is selected.

Q.11. sometimes it is better to use the text area element instead of an input element of type text
because text area shown the content written whereas text lines which can easily show your whole
content. You also have full control over text area using wrap attribute while in text field it have single
line. When you type more words then other words hide.
Q.12. what is the purpose of SELECT tag?

Ans. <SELECT> is a container tag. Options are placed between tow select tags, each with particular value
that gets associated with <SELECT> name attribute when chosen.

<select>

<option name = “a” selected> chocolate

</option>

<option name = “b”> ladoo>/option>

< option name = “c”> cake </option>

</select>

Long Answer Type Questions

Q.1. write code to create a login screen.

Ans. <form?>

<fieldset>

<legend> log in </legend>

<label>username: <input type = “text”></label>

<BR>

<label>password: <input type=”password”></label>

<BR>

<input type=”submit” value = “submit”>

</form>

Log in

Username :

Password :

Submit

Q.2. design a web page with a form that uses all types of controls

Ans.
 <html> Form controls
<head> User ID:
<title> password input control</title>
</dead> Password:
<body> Description:
<H4> form controls </H4> Enter description here
<form> user id: <input type =”text” name user id/> Math
<br> Physics
Password: <input type password name = Maths
“password”/> Physics
<br> Maths
Description: <br/> Submit
<textarea rows=”5” cols”50” name description”>
ok
</textarea>
Reset
<br>
<input type=”radio” name=”math” value =”on”>
math
<input type = “radio” name = “subject” value =
“physics”> physics
<br>
<select name = “dropdown”>
<option value= “maths”selected>maths</option>
<option value = “pysics”> physics</option>
</select>
<br>
<input type= “submit” name = value = “submit”/>
<input type = “reset name = “rest” value = “reset”>
<input type= “image” name =”imagebuttion” src=”
/hml/images/logo.png”
</form>
</body>
</html>

Q.3. create a job enquiry form as given below:

 JOB ENQUIRY FORM
user ID:

password:

gender: male female other

interested in: HTML C jave
describe your skills:

submit
Ans. <html>

<head>

<title> form </title>

</head>

<body>

<H3><center> JOB ENQUIRY </H3>

<br><br>

<form action=mailto:student@study.com method=”post”

<table align = “center”

<tr>

<td align=”right”>user ID: </td>

<td colspan=”e”><input type=”password” name = “uid” size=”35px”></td>

</tr>

<tr>

<td align= “right”> gender:</td>

<td> <input type = “radio” name=”gender” value= “male” checked>male </td>

<td><input type=”radio” name=”gender” value =”female”> female</td>

<td> <input type=”radio name = “gender” value=”other> other </td>

</tr>
<tr>

<td align = “right”> interested in: </td>

<td> <input type = “checkbox name = “lang” value =”html” HTML</td>

<td> <input type =”checkox” name= “lang” value = “c”>c</td>

<td> <input type= “checkbox” name = “lang” value = “java”> java </td>

</tr>

<tr>

<td> describe your skills:</td>

<td colspan = 3>

<textarea name = “skills” “5” cols=”35px”></textarea>

</td>

</tr>

<tr>

<td>

</td>

<td colspan = “2”><input type= “submit” value=” submit”></td>

<td> </td>

</tr>

</table>

</form>

<//body>

</html>

Topic – 2 cascading style sheet (CSS)

Objective Type Questions
[A] choose the correct alternative.

1. which property describes how bold or “heavy” a font should be presented?

(a) font style

(b) font size

(c) font weight

(d) font variant

Ans. (c) font weight

2. the units …. And …….. allow the user to adjust the font size according to him her.

(a) ‘#’ and me

(b) % and em

(c) $ and es

(d) all of the above

Ans. (b) % and em

3. the ………. Makes it is possible to add different decorations or effects to text.

(a) text align property

(b) text indent property

(c) letter spacing property

(d) none of the above

Ans. (d) none of the above

4. ………… is a style sheet language used for describing the look and formatting of a document written in
a markup language.

(a) document filters(DOM)

(b) multimedia filters

(c) cascading style sheets (CSS)

(d) DHTML

Ans. (c) cascading style sheets (CSS)

5. which property is used to give the specified spacing between the text characters?

(a) text decoration

(b) letter spacing

(c) text ransform

(d) none of the above

Ans. (b) letter spacing

6. the units px and …… make the font size absolute.

(a) pr

(b) pn

(c) pz

(d) pt

Ans. (d) pt

7. the ……….. repeats the image both horizontally and vertically to cover the entire screen.

(a) background image property

(b) foreground color property

(c) background color property

(d) background repeat property

Ans. (d) background repeat property

8. which of the below is the correct way to set a font size?

(a) h2 (font-size:200%;

(b) h2 {font-size:200px;}

(c) h2 {font-size:200;}

(d) both (b) and (c)

Ans. (d) both (b) and (c)

9. if we want to use a nice red dotted border around an image, which css property will we use?

(a) birder-color

(b) border-decoration
(c) border-style

(d) border-line

Ans. (c) border style

10. which of the following property is used to increase or decrease the size of a font?

(a) font-size

(b) font

(c) font variant

(d) font weight

Ans. (a) font size

11. which of the following selector matches a element based on its id?

(a) the id selector

(b) the universal selector

(c) the descendant selector

(d) the class selector

Ans. (a) the id selector

12. which of the following property is used as a shorthand to specify a number of other background
properties?

(a) background-attachment

(b) background

(c) background repeat

(d) background position

Ans. (b) background

13. which of the following is a way to associate styles with your HTML document?

(a) external CSS- the element

(b) imported CSS- @import rule

(c) both (a) and (b)

(d) external CSS-@import rule

Ans. (c) both (a) and (b)

[B] fill in the blanks.

1. font-family style differentiates between …………… ,………… and …….. font faces.

Ans. serif, sans-serif and monospace

2. the fount-variant property refers to the ……….. variant of the font face.

Ans. lettercase

3. CSS uses a numeric scale of multiples of …………. To ……….

Ans. 100,900

4. the CSS specification also allows browser to render any …….. value as normal.

Ans. default

5. the text decoration has to rendered with ………….

Ans. effects

6. the …………… property allows you to add effects to text paragraphs by applying an indent to the first of
the first line of the paragraph.

Ans. text-intent

7. font variant property is used to select ……….. or ……….. variants of a font

Ans. normal or small-caps

8. the …………….. property describes the foreground color of a text to be displayed in browser.

Ans. color
9. the property defines the chosen font either in ………. , ……… or ………… .

Ans. normal, italic, oblique

10. the property ………….. is used to apply prioritized list of fonts in a web page.

Ans. font family

11. the text transform property controls the ………… of a text.

Ans. capitalization

12. the ……… property describes the background color of browser window.

Ans. background-color

13. the ……….. property is used to insert a background images in a web page.

Ans. background-image

Very Short Answer Type Questions

Q.1. what are cascading sheets?

Ans. cascading style is a list of statements that can assign various rendering properties to HTML
element.

Q.2. what is a CSS rule? Give an example.

Ans. a CSS rule is a grouping of one or more CSS properties which are to be applied to one more target
HTML element.

Q.3. how can we specify that the text of a div element should use font arial if available, else calibri?

Ans. div {font-family: arial, calibri;}

Q.4. what is the difference between a static and dynamic website?

Ans. a static is delivered to a user exactly the way it’s stored. There are no user interactions, no
comments or any activity.
Q.5. what is the extension of a CSS file?

Ans. extension of CSS file is CSS.

Q.6. mention the properties of CSS used to insert letter spacing in a line.

Ans. Letter-spacing : 1px;(px can be vary)

Short Answer Type Questions

Q.1. explain CSS reference to DHTML.

Ans. CSS is a style sheet language used for describing the look and formatting of a document written in a
markup language. It is a way to provide style to HTML. Whereas the HTML is the meaning or content,
the style sheet is the presentation of that document. DHTML is merely a browser feature or
enhancement that gives your browser the ability to be dynamic.

Q.2. list some advantages and disadvantages of CSS.

Ans. 1. It controls layout of many documents from one single style sheet.

2. it has more precise control of layout

3. it applies different layouts to different media-types.

4. it has numerous advanced and sophisticated techniques to be applied one web pages.

Disadvantage of CSS are:

1. CSS is very limited in browser compatibility.

2. when you design a web page and you want it to display exactly as you like it. The problem with CSS is
that it displays webpages very different in the different browser.

Q.3. why stylesheets are used?

Ans. the main use of CSS is to improve HTML pages be decorating them, and displaying them in better
way than they would normally do. They simpligy the web creator work by using one CSS stylesheet for
more than one document.

Q.4. explain how would we embedded style in your HTML.

Ans. there are three ways to apply CSS to an HTML document. By inline internal or using external style
sheet in HTML page.
Q.5. what do you mean by font variant? Gave example or each.

Ans. the font-variant property is used to select normal or small caps variants of a font.

Sans book SC sans bold SC serif book SC serif bold SC

ABC abc ABC abc ABC abc ABC abc

Q.6. explain font-weight.

Ans. font-weight property describes how bold or heavy a font should be presented. A font can either be
normal or bold. Some browsers support the use of numbers 100-900[in hundreds]

To describe the weight of a font.

Q.7. how many types of text alignments can be included in a CSS page.

Ans. there are three types of text alignments can be included in a CSS page. The text can either be
aligned to the left, to the right or center of the screen.

Q.8. how the text in a webpage can be capitalized using CSS properties?

Ans. the text-transform property controls the capitalization of a text. We can choose to capitalize
effects to be applied on text I the HTML code.

Q.9. explain can we set the image as background property?

Ans. color property is used to set the foreground color while background color of the webpage.

Q.10. how can we set the image as background property?

Ans. the background image property specifies an image to use as the background of an element. By
default, the background of an of an element. By defaut the image is repeated so it covers the entire
element. The background can be se as body {background image:url(scene 1.gif)}

Q.11. how can we use CSS with HTML document?

Ans. to link an HTML document with a stylesheet, perform the following steps:

(i) create an HTML document and save it as a file with the html externsion.

(ii) crate a separate CSS stylesheet and save it as a file with the. Css extension.
(iii) link noth the files using following code. <link rel = stylesheet type = text/css” href= text.css>

Q.12. gave an example of linking CSS with HMTL.

Ans.

<body> Body{font family:

<h1>first section heading </h1> Tahoma arial, sansserif
<p> Font-size:13px:
Hello world !!!! Color: black;
</p> Background white;
<div 0class=”shaded”> margin: 8px:}
<h1> another section heading </h1> H1{font-size: 19px;
<p> margin-top: opx:
Hello world again !!! Margin bottom:5px;
</p> border bottom 1px solid
</div> black}
</body> Shaded
{background:#d0d0ff;}

Q.13. form a CSS code with in the <head>..</head> for the following specifications:

Background color: blue

For the paragraph,

Font family is dotum and colour of the text is red heading should be black color.

Ans. <head>

<style>

Body

{ background color: blue;}

{color: red;}

H1 {color: red; }

<</style>

</head>

Long Answer Type Questions

Q.1. explain CSS inline style.

Ans. <!DOCTYPE html>

<html>

<head>

Title> learning HTML </title>

</head>

<body>

<p style=”font size: xx-large; color;maroon;

Text-align: center; border; groove 5px orange>

Learning HTML </p>

<p style=”font-size: medium; medium; color:navy; text-align. Left; border: dashed 4px green”> learning
HTML</p>

</body></html>

Q.2. create a simple web page on different types of rocks” set suitable properties for the text. Draw a
horizontal line after each paragraph. Use inline style to set the properties.

Ans. 1. Open notepad and type the following HTML code. You will observe that each paragraph
following a different style of formatting

<!DOCTYPE html>

<html><head>

<title> types of rocks </h1>

</dead>

<body>

<h1> different type of rocks </h1>

<h2> ligneous rocks </h2>

<p style=”font-size: xx-;large; color: maroon; text-align: centre. Border: solid 4px 4

Px blue.>

The earth’s core is made up of molten rock. When a volcano erupts this molten rock flown out. It later
cools and solidifies to forb igneous and magnesium granite pumice and <hr style=”margin left 200px;
margin-right: 100px; border-width: thick; border-style: double; color: blue;>

<h2> sedimentary rocks </h2>

<p style = “font-size: x-large; color: green; text- align; border: dashed 3px down mountains, etc., wear
down rocks on mountains and carry small bits of them down to deposit elsewhere. Repeated
deposition presences down the lower layers and hardens them into rock. Such rocks are called
sedimentary rocks. Sandstone limestone and shale are some of the examples of sedimentary rocks. </p>

<hr style = “border: 4px groove yellow”>

<h2> metamorphic rocks are rocks that may be formed due to physical and chemical changes in igneous,
sedimentary or older metamorphic rocks. These changes happen due to heat and preassure. Marble,
slate, quartzite are some examples of metamorphic rocks. </p>

</body></html>

2. save the document as example. Html

3. open internet explorer and then open the document example. Html in it.

Q.3. explain style different CSS style linking.

Ans. (a) internal style sheet: an internal style sheet holds the CSS code for the web page in the head
section of the particular file. This makes it easy to apply styles like classes of id’s in order to reuse the
code. The downside of using an internal style sheet is that changes to the internal style sheet only affect
the page the code is inserted into.

(b) external style sheet: an external style sheet is a separate file where you can declare all the styles that
you want to use on your website. You can then link to the external style sheet from all your HTML pages.
A cascading style sheet file will have an extension as css and it will be included in HTML files using <link>
tag.

(c) inline styles: the inline style is specific to the tag itself. It uses the HTML style attribute to style a
specific tag

cbsepractice.in
Q.4. design a web page demonstrating all style sheet types: generate a nested list as follos: (display
fruits and vegetables in red font color using inline style, display mango, banana and apple in font color
blue and tomato, potato and carrot in font color yellow internal stylesheet.

Hint: use id/class attributes and/or styles for nested tags.

Fruits

Banana

Apple

Mango

Vegetables

Tomato

Potato
Carrot

Ans.

<html> Fruits
<head> I banana
<title>nested lists</title> II apple
<style type = “text?css”> III mango
Fruits {color: blue;} a.vegetables
Vegetables{stylesheet” text/css” href =”one.css”> 4. tomato
</head> 5. potato
<body> 6. Carrot
Ul style = “list style type filled square”>
<li class =”bg” style= “color : red”>upper roman”>
<li class=”fruits”> banana</li>
<li class=”fruits“>apple</li>
<li> class=”fruits”> mango</li>
</ol>
</ul>
<ol style = “list style type: lower alpha”>
<li class =“bg” style color:red”> vegetables </li>
<ol class =”grp1”start=”4”style=”list type
number”>
<li class= “vegetables”> tomato </li>
<li class= “vegetables”> carrot</li>
</ol>
</ol>
</body>
</html>

Q.5. crate a contact similar to the one shown below, using CSS.

Contact form
First name
Your name……..
Last name
Your last name
Country
India
Subject
Write something

Ans.
<!DICTYPE html>
<html>
<head>
<meta name = “viewport” content=”device-width, initial scale=1”>
<style>
Body {font family: arial, Helvetica, sans serif:}
{box-sizing: border-box:}
Input{type=text], select, textarea{width:100%;
Padding: 12px;
Border: 1px solid #ccc;
Border-radius:4px;
Box-sizing: border-box;
Margin-top:6px;
Margin bottm: 16px;
Resize: vertical;}
Input[type=submit]{background-color:#4CAF50;
Color; white;
Padding: 12px 20px;
Border: none
Border-radius:4px;
Cursor: pointer;}
Input[type=submit]:hover{background-color:#45a049;} container {
Border-radius: 5px;
Background-color: #f2f2f2;
Padding: 20px;}
</style>
</head>
<body>
<h3>contact form </h3>
<div class=”container”>
<form action=”/action-page.php”>
<label for=”fname”> first name</label>
<input type = “text” id=”fname name=”firstname” placeholder=”your name.”>
<lable for =”lname”>last name <label>
<input type=”text” id = fname” name = last name placeholder=”your last name “>
<label for=”country”> country</label>
<select id=” country” name=”country”>
<option value=” selected> india</option>
<option value=” Canada”>Canada</option>
<option value=”usa”> USA</option>
</select>
<label for=”subject”>name=”subject placeholder=”write something.”
Style=”height:200x”></textarea>
<input type=”submit” value=” submit”>
</form>
</div>
</body>
<html>

Download other chapter's solutions