CHAPTER-5: FORMS AND FRAMES

BRAIN DEVELOPER
SECTION 4: SHORT ANSWER TYPE QUESTIONS-(UNSOLVED)

1. Type, Name, Value, Size, Maxlength are a few attributes used with the <INPUT> tag.

2. The <SELECT> tag is used to define a selection list in a form. It should be placed within the <FORM> tag. The
<OPTION> tag is used along with the <SELECT> tag to display a list of options.

3. Type attribute specifies the kind of form control that will be added to the form.

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

5. Forms can be divided into three sections namely:

i. Form Header
ii. Input Fields
iii. Action Buttons
6. A password form control is identical to a text box control, except that whatever the user enters into this field does
not get displayed. Instead, dots or asterisks are shown on the screen so that no one can see the typed information.

7. A scroll bar will be added to the list to show that there are more elements in the combo box.

8. The Ctrl or Shift keys are used to select more than one element from the list.

SECTION 5: LONG ANSWER TYPE QUESTIONS-(UNSOLVED)

1. Method attribute specifies that the form information should be posted to the URL given in the action attribute.
Possible values are GET and POST.
Get: This is the default value. It is used whenever you wish to e-mail the form contents.
Post: You can make use of this value whenever you want to pass the information to the URL specified in the action
attribute.

2. Two Input elements are:

Text box and Check box
A text box allows a user to enter alphanumeric data that is a combination of characters and numbers. You can add a
text box to the form in the following way:
SYNTAX: <INPUT Type= "Text">
A checkbox is like a toggle switch which helps the user to select or deselect one or more items. As with other form
controls, you have to type your label next to the checkbox.
Example: <INPUT Type= "Checkbox" Name= "Hobbies" Value= "Reading" Checked>

3.
i. Radio buttons are used when a user has to make a selection of only one option among the several possible
options. For example, while asking about the gender of a user, you need to specify two radio buttons "Male"
and "Female", which belong to the same group called "Gender". A user will be able to select either "Male" or
"Female" but not both the options.
On the other hand, a checkbox is like a toggle switch which helps the user to select or deselect one or more
items.

ii. By clicking on the Submit button, the data in all the fields will be sent to a server as a series of name and value
pairs. The "Name" being the name of the form element and the "Value" is input value entered by the user. The
data is sent to the page specified in the Action attribute of the <FORM> tag.
The Reset button is used to clear the contents and set the values of all the form elements to their initial state and
make them active.

4. Application areas of forms:

i. 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.
ii. They are used for gathering information for the purchase of an item.
iii. They are used for collecting feedback about a website.
iv. Users are required to fill out a form if they want to participate in a chat session or a discussion group.

5. 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. It defines only one line of text.
ii. Value: It specifies the initial value for the element.
iii. Size: It specifies the width of the input field.

6. Describe the Cols attribute and Rows attribute of the <TEXTAREA> tag.
 Rows attribute of the <TEXTAREA> tag defines the height of the textarea, and Cols attribute defines the width of the
text area.
Example: <TEXTAREA Rows= 10 Cols= 60>

SECTION 6: APPLICATION BASED QUESTIONS-(UNSOLVED)

1. Rows attribute of the <TEXTAREA> tag defines the height of the textarea, and Cols attribute defines the width of the
text area.
Example: <TEXTAREA Rows= 10 Cols= 60>
2. <HTML>
<HEAD><TITLE>Order Pizza</TITLE></HEAD>
<BODY>
<FORM>
<P> Pizza Size:</P>
<INPUT Type="Radio" Name= "Size" Value= "Small">
Small <BR>
<INPUT Type="Radio" Name= "Size" Value= "Medium" Checked> Medium<BR>
<INPUT Type="Radio" Name= "Size" Value= "Large"> Large<BR>
<INPUT Type= "Submit" Value= "Click to order Pizza">
<INPUT Type= "Reset" Value= "Click to Clear">
</FORM></BODY></HTML>

3. <HTML>
<HEAD> <TITLE> Using drop-down list</TITLE></HEAD>
<BODY Bgcolor= "Lightgreen"> <FORM>
<P> Select your right 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>

CHAPTER-6: CASCADING STYLE SHEETS (CSS)

BRAIN DEVELOPER
SECTION 3: THEORETICAL QUESTIONS-(UNSOLVED)

1. The different components of DHTML are – HTML, Cascading Style Sheets (CSS), Scripting, and Document Object
Model.
HTML: HTML defines the basic structure of a web page by using the essential elements, such as paragraphs,
headings, forms, tables, and links.
CSS: CSS is a set of style sheet design principles that determine the visual layout of the content of a web page.
Scripting: This component of DHTML makes a web page dynamic. It provides a way to interpret the user's actions
and accordingly brings changes to a web page.
 DOM: The DOM defines the logical structure of a web page. It arranges the web page content in a hierarchical way
that allows the HTML elements, style sheets, and scripting languages to interact with each other.

2. In static web pages, the contents of the web page remain stationary. These web pages are loaded on the client’s
browser exactly in the same way as they are stored on the web server. A user can only read the information but
cannot make any modifications or interact with the data. Static web pages are created by using only HTML.
A Dynamic web page is generated when a user requests for the page. Each time it shows different content based on
the user's interaction. The page that a user views at a time exists only for him and for that very moment. If viewed
by someone else at the same time or even by him at a slightly different time, he would get something different.

3. How can we set the margins for an element?

There are margin properties for setting the margin for each side of an element (top, right, bottom, and left).
To set the margin for each side of an element, we can make use of the following properties:
i. Margin-top: To specify the top margin of an element
ii. Margin-right: To specify the right margin of an element
iii. Margin-bottom: To specify the bottom margin of an element
iv. Margin-left: To specify the left margin of an element

4. Cascading means the hierarchical order in which different style sheet types are arranged so that the latest style
sheet takes the precedence on the earlier ones. For example, if there are three definitions of <P> element in an
HTML document, the first definition specifying the <P> properties precedes the second definition, which defines any
other value for <P>, and this, in turn, precedes the third definition, which specifies the next value for <P>. The
definition at the bottom will take precedence, and the paragraph will appear with the properties defined in the third
element.

5. Differentiate between External style sheets and Internal style sheets?

Internal styles are useful if you want to apply similar formatting for all the tags of the same type on a web page. To
create an embedded or internal style sheet, we make use of <STYLE> tag in the Head section. As there are several
style sheet technologies, so we must use, Type="text/css" attribute with the <STYLE> tag to let the browsers know
that we are using CSS as the document’s style sheet language.
External Style Sheet is the most powerful and flexible method to define the layout for the web pages. When you
need to apply a style sheet to multiple pages, it is often recommended to create an external style sheet and link it to
various web pages. An external style sheet method incorporates two files: one file contains the style code only, and
the other file contains the HTML code. The file which contains the style code is saved with the extension ".css". The
HTML file is linked with this CSS file using either the Link element or Import statement.

6. Scripting makes a web page dynamic. It provides a way to interpret the user's actions and accordingly brings changes
to a web page. For example, scripts can interpret the mouse actions (such as clicking or entering a value in a textbox)
and respond to that action by using a set of predefined instructions (such as opening a page).

7. Font weight property specifies the weight or boldness of the font. Possible values for this property are 100-900,
bold, bolder, lighter, and normal. The numeric values 100-900 specify font weights where each value is a little darker
than its predecessor. The value 400 is taken as Normal font weight, whereas 700 is Bold font weight.
Syntax: Font-weight: value;
where value= Lighter|Normal|Bold|Bolder|100|200|300|400|500|600|700|800|900
Font-Variant property sets the text font in two variants: normal or small-caps. In small-caps, all the lowercase
characters are converted into uppercase characters. However, they appear slightly smaller than the original
uppercase characters when displayed in the output.
Syntax: Font-variant: value;
where value= small-caps | normal
8. We can also specify the margin for all the sides of an element in one single declaration by using the Margin
shorthand property.
Syntax: Margin: top-value right-value bottom-value left-value
 where value=length | percentage | auto

9. We can specify the padding areas for all the four sides as shown in the example below:
P {Padding-top:40%; Padding-bottom:100px; Padding-right:50px; Padding-left:50px;}

10. Identify the errors in the codes below and write the correct code:

i. import url (style_imp.css) - @ import url (style_imp.css)

ii. <STYLE> p{color:808080} </STYLE> - No Error
iii. <p style= "text:align: justify"> - <p style="text-align: justify;">
iv. P {font: arial 15px sans-serif;} - P {font: arial 15px, sans-serif;}
v. {p-color:red;} - P{color:red;}

SECTION 5: APPLICATION BASED QUESTIONS-(UNSOLVED)

1. Harsh can control the repetition of an image by using the background-repeat property by specifying one of the four
given values.
Syntax: background-repeat: value;
where value= no-repeat | repeat-x | repeat-y | repeat
No-repeat - The image will be displayed only once.
Repeat-x - The image will be repeated horizontally in the form of tiles.
Repeat-y - The image will be repeated vertically in the form of tiles.
Repeat - Default value, the image is repeated in both the directions.

2. Ruby should make the changes in the code as given below:

<body style= "background-image: url (C:/Desktop/image-3.jpg); background-repeat: no-repeat;

background-position: 100% 100%; background-color: #cccccc"; >

3. Namrata should keep the style sheet code in comments. To comment out the style sheet, she should put "/*"
characters before the style code and "*/" characters at the end of the style code.

4.
Diya can use the universal selector in the head section of the HTML code as given below:
<STYLE Type = "text/css">
*
{
Color:blue;
Font-size: 3;
}
</STYLE>