Unit 2: HTML Forms and CSS

What is HTML Form?

A HTML Form on a web page allows a user to enter data that is sent to

a server for processing. Forms can resemble paper or database forms because web

users fill out the forms using checkboxes, radio buttons, or text fields.

The data can be processed at the web server by CGI programs (Common

Gateway Interface), server side JavaScript. The JavaScript Form Object created

when the HTML <FORM></FORM>tags are encountered in HTML programs.

Forms are enclosed in the HTML form tag. This tag specifies

the communication endpoint the data entered into the form should be submitted to,

and the method of submitting the data, GET or POST.

THE FORM OBJECT:

When creating an interactive web site for the internet it is necessary to

capture user input and process this input. Based on the result of this processing,

appropriate information from a web site can be dispatched to viewed.

User input is captured in a Form. HTML provides the

<Form>…</Form>tags with which an HTML form can be captured to capture user

input. The FORM tags are encountered in an HTML program by a JavaScript

enabled browser, the browser array creates a „form array‟ in memory. This array

tracks the number of form object described in HTML programs. More than one

forms can be used in HTML page then the forms array will have multiple elements,

each holding a reference to an HTML elements.

The first form object described in the HTML file being held as array index

[0], the second form object described in the HTML file being held in the array

index[1] and so on. The javascript forms array holds information about each object

used within the <FORM>…</FORM>tags.

Common HTML objects are used between the <FORM>….</FORM>tags

are Text, TextArea, Radio Button, Checkboxes, Buttons and so on.

Example:

The Form Object’s Methods:

HTML forms can be made up of a variety of HTML elements that accept user

input. The <FORM></ FORM> HTML tags enclose the HTML elements that

make up the form. Once a JavaScript enabled browser encounters these tags in an

HTML file the JavaScript enabled browser creates a form object in memory, which

is held as an element of the form array. The form object has properties like Name,

Method and Action.

Name - The form name. Corresponds to the FORM Name attribute.

Method - This is a read or write string. It has the value "GET" or "POST".

The Method property sets or returns the value of the method attribute in a

form. The method attribute specifies how to send form-data. The method can be

used either Get or Post.

The GET Method

GET is used to request data from a specified resource.

GET requests have length restrictions

GET requests is only used to request data (not modify)

The POST Method

POST is used to send data to a server to create/update a resource.

The data sent to the server with POST is stored in the request body of the

HTTP request:

POST requests have no restrictions on data length

Action – The action attribute of the <FORM>…</FORM>tags points to the URL

(address) of a program on the web server that will process the form data captured

and being sent back. The server side program that processes this data can be

written in any scripting language that the web server understands.

Form Objects

Forms have their own objects.

Button - An GUI pushbutton control. Methods are click(), blur(), and focus().

Attributes:

name - The name of the button

type - The object's type. In this case, "button".

value - The string displayed on the button.

Example:

<form action="/action_page.php" method="get">

Choose your favorite subject:

<button name="subject" type="submit" value="HTML">HTML</button>

<button name="subject" type="submit" value="CSS">CSS</button>

</form>

Checkbox - An GUI check box control. Methods are click(), blur(), and focus().

Attributes:

checked - Indicates whether the checkbox is checked. This is a read or write value.

defaultChecked - Indicates whether the checkbox is checked by default. This is a

read only value.

name - The name of the checkbox.

type - Type is "checkbox".

value - A read or write string that specifies the value returned when the checkbox

is selected.

Example

<form action="">

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

Password - A text field used to send sensitive data to the server. Methods are

blur(), focus(), and select(). Attributes:

defaultValue - The default value.

name - The name of the password object."

type - Type is "password".

value - A read or write string that is sent to the server when the form is submitted.

Example

<input type="password" name="pwd">

Radio - A GUI radio button control. Methods are click(), blur(), and focus().

Attributes:

checked - Indicates whether the radio button is checked. This is a read or write

value.

defaultChecked - Indicates whether the radio button is checked by default. This is a

read only value.

length - The number of radio buttons in a group.

name - The name of the radio button.

type - Type is "radio".

value - A read or write string that specifies the value returned when the radio

button is selected.

Example

<form>

<input type="radio" name="gender" value="male" checked> Male<br>

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other

</form>

Reset - A button object used to reset a form back to default values. Methods are

click(), blur(), and focus(). Attributes:

name - The name of the reset object.

type - Type is "reset".

value - The text that appears on the button. By default it is "reset".

Example: <button type="reset" value="Reset">Reset</button>

Select - A GUI selection list. This is basically a drop down list. Methods are blur(),

and focus(). Attributes:

length - The number of elements contained in the options array.

name - The name of the selection list.

options - An array each of which identifies an options that may be selected in the

list.

selectedIndex - Specifies the current selected option within the select list

type - Type is "select".

Example: <select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

Submit - A submit button object. Methods are click(), blur(), and focus().

Attributes:

name - The name of the submit button.

type - Type is "submit".

value - The text that will appear on the button.

Example: <input type="submit" value="Submit">

Text - A GUI text field object. Methods are blur(), focus(), and select(). Attributes:

defaultValue - The text default value of the text field.

name - The name of the text field.

type - Type is "text".

value - The text that is entered and appears in the text field. It is sent to the server

when the form is submitted.

Syntax:<INPUT NAME=”<Name of the Object>” Type=”Text” Value=”<Default

Value>”

Example: <INPUT NAME=”txt” Type=”Text” Value=”18”

Textarea - A GUI text area field object. Methods are blur(), focus(), and select().

Attributes:

defaultValue - The text default value of the text area field.

name - The name of the text area.

type - Type is textarea.

value- The text that is entered and appears in the text area field. It is sent to the

server when the form is submitted.

Syntax:<INPUT TYPE=”Text Area” Name=”<My Text Area>”

METHODS OF FORM ELEMENTS:

From

Element

Name

Method Name Description

Text onFocus() Fires when the form cursor enters into an object

Password

TextArea

Text onBlur() Onblur is most often used with form validation

code (e.g. when the user leaves a form field) Password

TextArea

Text onSelect() When text is selected in an object

Password

TextArea

Text onChange() When text is changed in an object

Password

TextArea

Cascading Style Sheets (CSS)

CSS Stands for Cascading Style Sheets. It describes how HTML elements are to be

displayed on screen, paper or in other media and saves a lot of work. It can control

the layout of multiple web pages all at once.

CSS Syntax

A CSS rule set consist of a selector and a declaration block:

h1 {color:blue;font-size:12px;}

h1 Selector colorproperty bluevalue font-sizeproperty

12pxvalue

Selector

The Selector points to the HTML element you want to style

Declaration

The declaration block contains one or more declaration separated by semicolons.

Each declarations includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon and declaration are surrounded

by curly braces

Example

p

{

color:red;

Text-align:center;

}

CSS selectors are used to “find” HTML elements based on their element name, id,

class, attribute, and more.

Button onClick() When an object is clicked on.

Radio

Checkbox

Submit

Reset

The Id selector

The Id selector uses the Id attribute of an HTML element to select a specific

element.

Id of an element should be unique within a page, so the Id selector is used to select

one unique element.

To select an element with a specific Id, write a hash(#) character, followed by the

Id of the element

Id name cannot start with a number.

Example

#para1

{

text-align:center;

color:red;

}

The class selector

The class selector selects elements with a specific class attribute.

To select element with a specific class, write a period (.) character, followed by the

name of the class.

Example

.center

{

text-align:center;

color:red;

}

By using class selector programmer can apply the style specifically for HTML

elements and also apply to more than one class.

Example

p.center

{

text-align:center; color:red;

}

Example for more than only.

<p class=”center large”>…</p>

A class name cannot start with number.

Grouping Selectors

Group selectors is better to minimize the code. To group the selectors, add a

comma (,) to separate each selector.

Example

h1, h2, p {text-align:center; color:red;}

CSS Attributes

CSS Comments

Comments are used to explain the code, and may help when the programmers

editing the source code at a later date.

“Comments are ignored by the browser”

A CSS comments starts with /* and end with */ can also apply for multiple lines.

How will you create style sheets with style elements? (Important

16 marks)

CSS Style Elements

CSS can be added to HTML elements in three ways:

Inline - using the style attribute in HTML elements

Internal - using a <style> element in the <head> section

External - using an external CSS file

Three ways are there to include the CSS file into the HTML page to format

the webpage. They are

External style sheet

Internal style sheet

Inline style sheet

External style sheet

In External style sheet, to use your style sheet to various pages, then it always

recommended to define a common style sheet in a separate file. A cascading style

sheet file will have extension as .css and it will be included in HTML files using

<link> tag

Example

Consider we define a style sheet file style.css which has following rules

.red {

color: red;

}

.thick {

font-size:20px;

}

.green {

color:green;

}

Example Program

<html>

<head>

<title>HTML External CSS</title>

<link rel = "stylesheet" type = "text/css" href = "/html/style.css">

</head>

<body>

<p class = "red">This is red</p>

<p class = "thick">This is thick</p>

<p class = "green">This is green</p>

<p class = "thick green">This is thick and green</p>

</body>

</html>

Output

Internal Style Sheet

An internal style sheet, to apply Style Sheet rules to a single document only, then

you can include those rules in header section of the HTML document using <style>

tag.

Internal styles are defined with in the <style> element, inside the <head> section of

an HTML page.

Example Program

<html>

<head>

<title>HTML Internal CSS</title>

<style type = "text/css">

.red {

color: red;

}

.thick{

font-size:20px;

}

.green {

color:green;

}

</style>

</head>

<body>

<p class = "red">This is red</p>

<p class = "thick">This is thick</p>

<p class = "green">This is green</p>

<p class = "thick green">This is thick and green</p>

</body>

</html>

Output

Inline Style Sheet

An inline style may be used to apply a unique for a single element.

To use inline styles, add the style attribute to the relevant element. The style

attribute can contain any CSS property.

Example Program

<html>

<head>

<title>HTML Inline CSS</title>

</head>

<body>

<p style = "color:red;">This is red</p>

<p style = "font-size:20px;">This is thick</p>

<p style = "color:green;">This is green</p>

<p style = "color:green;font-size:20px;">This is thick and green</p>

</body>

</html>

Output

How do you create Inline Styles in HTML? Explain (IMPORTANT

16 Mark)

Inline Style

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

CSS is written in a separate CSS file (with file extension .css) or in a <style>

tag inside of the <head> tag, but there is a third place which is also valid.

The third place you can write CSS is inside of an HTML tag, using the style

attribute. When CSS is written using the style attribute, it's called an "inline

style".

Inline Style Syntax

Inline styles look and operate much like CSS, with a few differences.

Inline styles directly affect the tag they are written in, without the use of

selectors.

Here's a basic HTML page using inline styles:

<html>

<head>

<title>Playing with Inline Styles</title>

</head>

<body>

<p style="color:blue;font-size:46px;">

I'm a big, blue, <strong>strong</strong> paragraph

</p>

</body>

</html>

The p tag with the inline style attribute is the focus here:

<p style="color: blue; font-size: 46px;">

The value of the style attribute will be CSS property-value pairs: "property:

value;".

Unlike normal CSS syntax, inline styling does not use selectors or curly

braces.

It include the semicolon(;) after each pair.

In other ways you can write the Inline styles as follows

p

{

color: blue; font-size: 46px;

}

Uses of Inline Styles

HTML e-mail

Older websites

CMS content (e.g. WordPress, Drupal)

Dynamic content (i.e. HTML created or changed by JavaScript)

Inline Style Example Program

<html>

<head>

<title>HTML Inline CSS</title>

</head>

<body>

<p style = "color:red;">This is red</p>

<p style = "font-size:20px;">This is thick</p>

<p style = "color:green;">This is green</p>

<p style = "color:green;font-size:20px;">This is thick and green</p>

</body>

</html>

Output

Building a Web page

In order to navigate a web page on the Internet, the browser is doing a lot of work.

The browser reads all the necessary files (HTML, CSS, and JavaScript)

Requirements

Text Editor

An Internet Browser

STEP 1: OPEN YOUR TEXT EDITOR

The first step is to open your text editor. It's important to use a "raw" text editor,

and not a formatted word processor.

STEP 2: WRITE YOUR HTML SKELETON

<html>

<head>

<title>My First Web Page!</title>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

STEP 3: SAVE YOUR FILE

Use the .html HTML file extension, i.e. about_me.html

Don't use any spaces or special characters in the file name. Use underscores (_) or

dashes (-) instead.

STEP 4: OPEN YOUR WEB PAGE IN YOUR BROWSER

Navigate to the location you saved your web page. Click on your web page file and

then click Open. You should see your web page.

Font Attribute:

Attribute Value

font-family Specifies the font family for text.

font-size Specifies the font size of text

font-style Specifies the font style for text(normal,italic)

font-weight Specifies the weight of a font

Font Style:

The font-style property is mostly used to specify italic text.

This property has three values:

normal - The text is shown normally

italic - The text is shown in italics

oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example

p.normal {

font-style: normal;

}

p.italic {

font-style: italic;

}

p.oblique {

font-style: oblique;

}

Font Weight:

The font-weight property specifies the weight of a font:

Example

p.normal {

font-weight: normal;

}

p.thick {

font-weight: bold;

}

Background Properties:

Property Description

background-color Sets the background color of an element.

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated.

Background Color

The background-color property specifies the background color of an element.

The background color of a page is set like this:

Example

body {

background-color: lightblue;

}

Background Image

The background-image property specifies an image to use as the background of an

element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example

body {

background-image: url("paper.gif");

}

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and

vertically.

Example

body {

background-image: url("gradient_bg.png");

background-repeat: repeat-x;

}

Tip: To repeat an image vertically, set background-repeat: repeat-y;

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest

of the page), use the background-attachment property:

Example

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

background-attachment: fixed;

}

Text Attribute:

TEXT FORMATTING

This text is styled with some of the text formatting properties. The heading

uses the text-align, text-transform, and color properties. The paragraph is indented,

aligned, and the space between characters is specified. The underline is removed

from this coloredText Transformation. The text-transform property is used to

specify uppercase and lowercase letters in a text.

Text Alignment

Text Decoration

Text Transformation

Text Indentation.

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

Example

h1 { text-align: center;}

h2 { text-align: left;}

h3 { text-align: right;}

Text Decoration

The text-decoration property is used to set or remove decorations from text.

Example

h1 { text-decoration: overline;}

h2 { text-decoration: line-through;}

h3 { text-decoration: underline;}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a

text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize

the first letter of each word:

Example

p.uppercase { text-transform: uppercase;}

p.lowercase { text-transform: lowercase;}

p.capitalize { text-transform: capitalize;}

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

p { text-indent: 50px;}

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an

element's border.

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

• dotted - Defines a dotted border

• dashed - Defines a dashed border

• solid - Defines a solid border

• double - Defines a double border

• none - Defines no border

• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border,

right border, bottom border, and the left border).

Example:

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using

one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top

border, right border, bottom border, and the left border).

Example

p.one {

border-style: solid;

border-width: 5px;

}

p.two{

border-style: solid;

border-width: 2px 10px 4px 20px; }

Border Color

The border-color property is used to set the color of the four borders.

The border-color property can have from one to four values (for the top

border, right border, bottom border, and the left border).

Example

p.one {

border-style: solid;

border-color: red;

}

HTML Lists and CSS List Properties:

In HTML, there are two main types of lists:

unordered lists (<ul>) - the list items are marked with bullets

ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

Set different list item markers for ordered lists

Set different list item markers for unordered lists

Set an image as the list item marker

Add background colors to lists and list items

Different List Item Markers

• The list-style-type property specifies the type of list item marker.

• The following example shows some of the available list item markers:

Example

ul.a { list-style-type: circle;}

ul.b { list-style-type: square;}

ol.c { list-style-type: upper-roman;}

ol.d { list-style-type: lower-alpha;}

Class Definition:

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character,

followed by the name of the class.

You can also specify that only specific HTML elements should be affected

by a class. To do this, start with the element name, then write the period (.)

character, followed by the name of the class.