Ch-5 HTML- FORMS

1) What is a Form? What is its use?

A) A form is an object that is used for collecting data from the user. In HTML, a form is a window
that consists of the elements of a form called the form fields. HTML forms are used to pass data to a
server.

2) Differentiate between methods –GET|POST.

A) The method attribute specifies how to send form-data.

GETmethod:
❖ Appends form-data into the URL in name/value pairs
❖ The length of a URL is limited.
❖ Never use GET to send sensitive data!
❖ Useful for form submissions where a user want to bookmark the result
❖ GET is better for non-secure data, like query strings in Google

POSTmethod:
❖ Appends form-data inside the body of the HTTP request (data is not shown is in URL)
❖ It has no size limitations
❖ Form submissions with POST cannot be bookmarked

Syntax
<form method=”get|post” action= “address”>
❖ Action=address
❖ Method=post or method=get

3) Write the use of <INPUT> tag along with its attributes.

A) The <input> tag collects the information from the user.

The attributes are:

Attribute Name Description

Name Takes a string of characters as internal name of the field, to be used as a reference later

Size Takes the value of a number in quotes which is equal to the width of the field.

Takes the value of a number in quotes which is equal to the maximum number of
Maxlength
characters that can be entered.
Takes the value of the field. It can take the value as “text” or “radio” or “checkbox” or
Type
“submit”.
 4) Write a note on TEXTBOX Field a long with its attributes.
A) If the value of the type attribute is “text” i.e. <input type= “Text”>, the form will show a textbox.
This textbox accepts the input in one line.

The attributes of TextBox field are:

Attributes Name Description

Size It defines the width of the field. It contains no. of visible characters.

Maxlength It defines the maximum length of the field.

Name It adds an internal name to the field

Value It defines what will appear in the box as the default value.

It defines how the text field will be aligned on the form. Valid entries are:
Align TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
It defines in which order the different fields should be activated when the
Tabindex
visitor clicks the tab key.

5) Write a note on TEXT AREA along with its attributes.

A) Text areas are the fields that displays several text lines at a time. It is generally used to take
comment from the user. The <textarea> tag has both start and the end tag. The attributes are:
Attribute Name Description
Cols indicate the length of the textarea, the Rows indicate the number of rows
Cols and Rows
with text that will be visible at a time.
Name It provides an internal name to the textarea field as understood by the computer.
It defines the order number of activation of this field when the visitor clicks on the
Tabindex
tab key.

It helps in flowing the text to the next row in a paragraph when the text reaches
the right hand border of the text area.
(i) It can take three types of values as discussed below:
(ii) If the value is set to “wrap off” the text will be placed in the first row of the
Wrap text area
(iii) The value Virtual recognizes the text with line breaks when textarea is
loaded on the web page.
(iv) Physical defines the format of the text. It will appear on the webpage as
inserted by the user.

Write a note on LISTBOX Field a long with its attributes.

A) To create a list box, the select tag is used. The select tag contains 2 attributes, name and size.
The name attribute is the name that you decide to call the list box. size attribute takes a numerical
value which shows how many options the list box will contain.
The HTML Code to create a list box is:
<select name="list_box_name" size="number_of_options">

<option value="option1">Option 1</option>

<option value="option2">Option2</option>
<option value="Option3">Option3</option>
... </select>
6) Write about the Attribute Values of GET|POST Methods.
A) Attribute Values of GET|POST Methods are:
Value Description
Default. Appends the form-data to the URL in name/value pairs:
Get
URL?name=value&name=value

Post Sends the form-data as an HTTP post transaction

7) Write a note on RADIO Button along with its attributes.

A) If the value of the type attribute is “radio” i.e. <input type= “Radio”>, the form will show a
radio button. This button is also called toggle button.
Radio button enables the selection of one of the options out of the many.

Attribute name Description

It adds an internal name to the field so the program that handles the form can
Name identify the fields. To group the radio buttons so that only one could be
selected at a time, same name is given to all the buttons.

Value It defines what will be submitted if checked.

It defines how the text field will be aligned on the form. Valid entries are:
Align TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
It defines in which order the different fields should be activated when the
Tabindex
visitor clicks the tab key.
Checked This attribute can have value (e.g., checked=”checked |unchecked”).

8) Write a note on Checkboxes along with its attributes.

A) If the value of the type attribute is “checkbox” i.e. <input type= “Checkbox”>, the form will show
a checkbox. A checkbox allows for multiple selections of items.

The check box’s attributes are same as radio button’s attributes.

Attribute name Description
It adds an internal name to the field so the program that handles the form can
Name identify the fields. To group the radio buttons so that only one could be
selected at a time, same name is given to all the buttons.
Value It defines what will be submitted if checked?
It defines how the text field will be aligned on the form. Valid entries are:
Align TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
 It defines in which order the different fields should be activated when the
Tabindex
visitor clicks the tab key.
Checked This attribute can have value (e.g., checked=”checked |unchecked”).

10) Write a note on Combobox along with its attributes.

A) Combobox in HTML is used to display a drop-down list of some options from which one can be
selected. It is created by using <select> and <option> tags. Both <Select> and <option> tag have
start and an end tag. A SELECT element must contain at least one OPTION element.
The attributes of Combobox are:

Attribute Description
It adds an internal name to the field so the program that handles the form can identify
Name
the fields
Size It defines the number of items to be visible when user clicks on the drop down box

Multiple It allows for multiple selections

It defines what will be submitted to the computer when an item is selected. If the value
Value attribute takes the string as “CHO”, then “CHO” will only be understood by the
computer when the item selected is “Chocolate”.

11) Write a note on Password Control along with its attributes.

A) If the value of the type attribute is “password” i.e. <input type= “Password”>, the form will
show a password. The attributes are:

Attribute Name Description

NAME attribute gives this element a name
SIZE Sets the size.
MAXLENGTH Sets the maximum length of the data in the control, in characters.

STYLE Inline style indicating how to render the element

Holds additional information, which might be displayed in tool tips for the
TITLE
element
Sets the tab index of the element, which locates it in the tab order of the form,
TABINDEX allowing the user to press the Tab key and navigate from element to element.
Set to positive or negative integers.

TYPE Specifies the type of the element

VALUE Sets the caption of the element. Set the alphanumeric characters.

Example
<INPUT TYPE="password” NAME="first_name" MAXLENGTH=15 SIZE=15>

9) Write a note on Command button along with its attributes.

A) If the value of the type attribute is “Submit” i.e. <input type= “submit | reset”>, the form will
show a command button.
❖ Submit buttons: A submit button submits a form.
❖ Reset buttons: A reset button resets all controls to their initial values.
This command button will perform some action when the user clicks on it. The action is defined by
action attribute in <form> tag along with the method attribute.
 Ch-6 Cascading Style Sheets

1) Write a note on DHTML.

A) DHTML is the combination of HTML and JavaScript. DHTML enable the web page to be more
dynamic. It is the ability of the browser to alter a web page’s look and style after the document has
loaded.

With DHTMLyou can create:

❖ Animation
❖ Pop-up menus
❖ Inclusion of Web page content from external data sources
❖ Elements that can be dragged and dropped within the Web page

2) What are the features of DHTML?

A) The features of DHTML are;-
 DHTML makes documents dynamic.
 It allows the designer to control how the HTML displays Web pages’ content.
 Web page reacts and change with the actions of the visitor.
 It can hide and show content as needed.
 DHTML allows any HTML element in Internet Explorer to be manipulated at any time,
turning plain HTML into dynamic HTML.
 With DHTML, changes occur entirely on the client-side (on the user’s browser).

3) What are the components of DHTML?

A) Dynamic HTML includes the following components:
❖ Conventional HTML
❖ Scripts – Small programs designed to manipulate Web pages.
❖ Document Object Model (DOM)
❖ Absolute Positioning
❖ Multimedia filters

4) Write a note on CSS.

A) Cascading Style Sheets (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. Cascading Style
Sheets (CSS) is a simple mechanism for adding style to Web documents.
5) Write the advantages of CSS.
A) The advantages of CSS are
❖ It controls layout of many documents from one single style sheet.
❖ It has more precise control of layout.
❖ It applies different layouts to different media-types.
❖ It has numerous advanced and sophisticated techniques to be applied on web pages.

6) Write the limitations of CSS.

A) The limitations of CSS are:
 CSS is very limited in browser compatibility.
 The problem with CSS is that it displays webpages very differently in the different
browsers.
 Webpages look perfect in Mozilla may look different in Internet Explorer.
7) Name the methods of applying CSS to an HTM Document with examples.
A) There are three ways to apply CSS to an HTML document.

In-Line: One way to apply CSS to HTML is by using the HTML attribute style.
Eg: To apply the red background color in a webpage, it can be applied in the following manner.
<html>
<head>
<title>Example</title>
</head>
<BODY STYLE=”BACKGROUND-COLOR: #FF0000;”>
<p>The background is red.</p>
</body>
</html>

Internal: Internal Method will include the CSS codes using the HTML tag <style>
Eg;
<html>
<head>
<title>Example</title>
<style type=”text/css”>
body {background-color: #0000FF ;}
</style>
</head>
<body>
<p> The background is Blue.</p>
</body>
</html>

External: The method to link html with style sheet is called external style sheet. An external style
sheet is a text file with the extension .css.
<html>
<head>
<title>My document</title>
<link rel=”stylesheet” type=”text/css” href=”[Link]” />
</head>
<body>
<h1>My stylesheet Page</h1>
</body>
</html>

[Link]
body {
background-color: #FF0000;
}

This link will display the layout from the CSS file in the browser when displaying the HTML file.

8) Explain the Font properties with a CSS example.

A) The font property is a shorthand property for FONT-FAMILY, FONT-STYLE,
FONT-SIZE, FONT-VARIANT and FONT-WEIGHT.
The font-family property is used to apply prioritized list of fonts in a web page. If the first font of the
list is not installed on the computer then the next font of the list will be displayed until a suitable font
is found.

Fonts family is divided into two categories:

1. Family-name, 2. Generic family
Eg:
h1 {font-family: arial, comic sans-serif, “Times New Roman”;}
h2 {font-family: “Times New Roman”, verdana, serif;}

Font style
The property font-style defines the chosen font either in normal, italic or oblique.
Eg: h2 {font-family: “Times New Roman”, serif; font-style: italic;}
Font variant
This property is used to select small-caps variants of a font. A small-caps font display the smaller
sized capitalized letters instead of lower case letters.

If font-variant is set to small-caps and no small-caps font is available the browser will most likely
show the text in uppercase instead.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

Font weight
This property describes how bold or “heavy” a font should be presented.

p {font-family: arial, verdana, sans-serif; font-weight: normal;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Font size [font-size]

The font-size property is used to set the size of a font.

There are many different units (e.g. pixels and percentages) to describe font sizes.

Example

Code inserted in [Link]:

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Combining [font] styles:

All the different font properties can be combined in one single property.

For example, {

font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif; }
The order of values for font properties is:

font-style | font-variant | font-weight | font-size | font-family

Code to be inserted in [Link]

p { font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif; }

10) Explain the Color and Background properties with a CSS example.

A) CSS uses color values to specify a color. These are used to set a color either for the text or for
the background of an element.

You can speicify color values in various formats given below;-

Format Syntax Example

Hex Code 3RRGGBB P{color:#FF0000;}

Short Hex Code #RGB P{color:#6A7;}

P{color::rgb(50%,
RGB% rgb(rrr%,ggg%,bbb%)
50%,50%);}

RGB Absolute rgb(rrr,ggg,bbb) P{color::rgb(0,0,255);}

keyword aqua, black, etc P{color:teal;}

The background-color property in CSS is used to specify the background color of an element.
The background covers the total size of the element with padding and border but excluding margin.
It makes the text easy to read for the user.

Eg:
<P Style=”background-color:Yellow”>
This text has a yellow background color
</p>

11) Explain border style property with a CSS example.

A) The border-style CSS property is a shorthand property that sets the line style for all four sides of
an element’s border.

Border width specifies the width of a border.

Border color: specifies the color of a border

Border style: specifies whether a border should be solid, dashed line, double line.
The border style property allows selecting one of the following styles of border.

Value Effect
None No border

Solid Border is a single solid line

Dotted Border is a series of dots

Dashed Border is a series of short lines

Double Border is two solid lines

Groove Border looks like a though it is carved into the page

Ridge Border looks the opposite of groove

Inset Border makes a box look like it is embedded in the page

Outset Border makes the box look like it is coming out of the canvas

Hidden None, except in terms of border conflict resolution for table elements.

Demonstration of the different border styles:

[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

You can individually change the style of the bottom, left, top and right borders of an element

Border Style Description

Border-Bottom-Style Changes the style of bottom border

Border-Top-Style Changes the style of top border

Border-Left-Style Changes the style of left border

Border-Right-Style Changes the style of right border

12) Explain the Margins property with a CSS example.

A) The margin specifies a shorthand property for setting the margin properties in one declaration.
 The margin-bottom specifies the bottom margin of an element.
 The margin-top specifies the top margin of an element.
 The margin-left specifies the left margin of an element.
 The margin-right specifies the right margin of an element.
Margin-bottom Property: The margin-bottom property allows you set bottom margin of an element.
It can have a value in length, % or auto.

Example
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>
Margin -top Property: The margin-top property allows you set top margin of an element. It can have
a value in length, % or auto.
Eg:
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>

Margin-left Property: The margin-left property allows you set left margin of an element. It can have
a value in length, % or auto.
example –
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>

Margin -right Property: The margin-right property allows you set right margin of an element. It can
have a value in length, % or auto.
Example
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>

13) Explain Height and Width Property with a CSS example.

A) The height and width properties allow you to set the height and width for boxes. They can take
values of a length, a percentage, or the keyword auto.
Example
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>

The following properties that allow you to control the dimensions of a box.
 The height property is used to set the height of a box.
 The width property is used to set the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can be.
 The min-height property is used to set the minimum height that a box can be.
  The max-width property is used to set the maximum width that a box can be.
 The min-width property is used to set the minimum width that a box can be.

14) Explain outline Property with a CSS example.

A) Outlines are very similar to borders, but there are few major differences as well −
 An outline does not take up space.
 Outlines do not have to be rectangular.
 Outline is always the same on all sides; you cannot specify different values for different sides
of an element.
You can set the following outline properties using CSS.
 The outline-width property is used to set the width of the outline.
 The outline-style property is used to set the line style for the outline.
 The outline-color property is used to set the color of the outline.
 The outline property is used to set all the above three properties in a single statemen

The outline-width Property

The outline-width property specifies the width of the outline to be added to the box. Its value should
be a length or one of the values thin, medium, or thick, just like the border-width attribute. A width
of zero pixels means no outline.

The outline-style Property

The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around
an element. It can take one of the following values −
 none − No border. (Equivalent of outline-width:0;)
 solid − Outline is a single solid line.
 dotted − Outline is a series of dots.
 dashed − Outline is a series of short lines.
 double − Outline is two solid lines.
 groove − Outline looks as though it is carved into the page.
 ridge − Outline looks the opposite of groove.
 inset − Outline makes the box look like it is embedded in the page.
 outset − Outline makes the box look like it is coming out of the canvas.
 hidden − Same as none.

The outline-color Property

The outline-color property allows you to specify the color of the outline. Its value should either be
a color name, a hex color, or an RGB value, as with the color and border-color properties.