PCET-NMVPM’s

Nutan College of Engineering and Research, Talegaon, Pune

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Experiment No 2

Aim: To understand the basic concepts of HTML forms and CSS.

A. Design a HTML Form for displaying information using interactive CSS including images,
tables.
B. Write a HTML and CSS program to implement Sign-In and Sign-Out functionality

Theory:

Introduction:
FORMS IN HTML:
Forms are an interactive feature of many websites.Forms are the primary method for getting data from
visitors of the web site.A form takes the input and sends the data to webserver on clicking submit
button.On the web server backend application scripts will collect the data and store it on the database on
the server.
Creating Forms
To create forms in HTML web page
<form> element is used
It is a container tag which will contain all the form elements
Form Elements

<input> element
The <input> element is the most important form element.
Using <input> tag and its type attribute you can create various form elements.
It is an empty tag.
Attributes of <input> tag
Type - Specifies the type <input> element to display
Name - Specifies the name of an <input> element
Size - Specifies the width (in characters) of an input field
 PCET-NMVPM’s
Nutan College of Engineering and Research, Talegaon, Pune
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Maxlength - Specifies the maximum number of character for an input field

Value - Specifies the default value for an input field
Checked - Specifies that an input field should be pre-selected when the page loads (only for radio
buttons and checkbox fields)
Disabled - Specifies that an input field is disabled
Required - Specifies that an input field is required (must be filled out) before submitting the form
Readonly - Specifies that an input field is read only (cannot be changed)
Autofocus - Specifies that an <input> element should automatically get focus when the page
loads (boolean attribute)
Placeholder – specifies a short hint that describes the expected value of an input field (e.g. a sample
value or a short description of the expected format).
Title – Provides a tool tip for the input field.
Pattern – Specifies a regular expression that an <input> element's value is checked against.
To create text box:
Name : <input type=“text” name=“fname” size=20>
It defines a single-line text input field.
To create Password box
Password: <input type=“password” name=“pwd” size=16>
The characters in a password field are masked (shown as asterisks or circles).
Radio Button
A radio button is used to select one of many given choices. Radio buttons are shown in radio
groups to show a set of related options, only one of which can be selected.
Checkbox
Checkboxes are used for instances where a user may want to select multiple options. Checkboxes
let a user select ZERO or MORE options of a limited number of choices.
Submit Button
The Submit Button allows the user to send the form data to the web server. The form data is
typically handled by a Web Server page with a script for processing input data. The server page is
specified in form's action attribute.
Reset Button
A reset button is used to reset all form values to their default values. (clear the form)

CASCADING STYLE SHEETS (CSS)

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.CSS was Developed by Hakon Wium Lie of MIT in 1995. In 1996, level
1 of CSS was published, level 2 comes in 1998 and level 3 ( CSS3) in 2009 with HTML5.CSS describes
how elements should be rendered on screen, on paper, in speech, or on other media. CSS saves a lot of
work. It can control the layout of multiple web pages all at once. With CSS, it is easier to build a website,
as css can style whole website using one single css file. CSS handles the look and feel part of a web
page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs,
how columns are sized and laid out, what background images or colors are used, layout designs,
variations in display for different devices and screen sizes as well as a variety of other effects.

CSS Syntax
 A CSS rule-set consists of a selector and a declaration block:
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by semicolons.
 Inside declaration block, property:value pair is used.
 Colon : is used to separate property and value.
 To add next property value pair, use ; semi-colon.
 PCET-NMVPM’s
Nutan College of Engineering and Research, Talegaon, Pune
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

 CSS Syntax is not case-sensitive, but prefer lowercase.

CSS Property and Value

 Each declaration includes a CSS property name and a value, separated by a colon.
 Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.
 CSS provides variety of properties for styling and positioning the HTML web pages.

CSS Styles are usually written inside <style> element under Head Section. This way of styling is Internal
CSS.

Applying CSS in HTML

You can do in three ways:-
 Create a separate CSS file containing style property-value pairs and link it with <link> tag.
 Write CSS property-value pairs in the web page inside <style> tags
 Write CSS property-value pairs in the HTML element starting tag using STYLE attribute

There are three ways of inserting a style sheet:

 External CSS - Create a separate CSS file containing style property-value pairs.
 Internal CSS - Write CSS property-value pairs in the web page inside <style> tags.
 Inline CSS - Write CSS property-value pairs in the HTML element’s Starting tag using STYLE
attribute.

INLINE CSS

Inline CSS
 Inline CSS allows you to apply a unique style to one HTML element at a time.
 You assign CSS to a specific HTML element by using the style attribute with any CSS properties
defined within it.
 The style attribute is written in the starting tag of a HTML element

When to use Inline CSS?

Inline styles in CSS could be useful for previewing changes instantly or adding CSS rules to only one or
two elements. Tip: use of inline CSS is not a recommendation. Combining CSS and HTML leads to
messy code. Additionally, inline styles method is difficult to update. Note: Inline CSS styles will always
override style properties determined in internal or external style sheets.

Internal CSS or Embedded CSS

Internal CSS is used to apply styles on a single document or page. It is written inside the <style> tags
within head section.Styling changes apply to every specific element found in the file.

External CSS
An external stylesheet is used when you want to apply one style to whole website (multiple web pages).
The styles are written in a separate file with .css extension. The stylesheet files are linked using the
 PCET-NMVPM’s
Nutan College of Engineering and Research, Talegaon, Pune
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

<link> tag which should be placed in the head section of an HTML page. Using External Stylesheets,
You can apply same styles to multiple web pages.

External CSS - <link> tag

The <link> tag defines the relationship between the current document and an external resource.
Attributes in the link tag:
 rel - Specifies the relationship between the current document and the linked document. It takes the
value “stylesheet”.
 href - Specifies the location of the linked external stylesheet.
 Type - Specifies the media typed of the linked document. Value: “text/css”

We can have all the three methods applied to a web page. If same CSS property is defined for an element
in Internal, External as well as Inline, then Inline CSS has the highest priority, then comes
Internal/Embedded followed by External CSS which has the least priority.

Which style has highest priority?

What style will be used when there is more than one style specified for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where
number one has the highest priority:
Inline style (inside an HTML element)
Internal style sheets and External (in the head section)
Browser default
So, an inline style has the highest priority, and will override external and internal styles and browser
defaults.

Use <link> tag in the head section of all these web pages.
<link rel=“stylesheet” type=“text/css” href=“style.css”>

Practical related questions:

 Explain in detail What is the purpose of the <form> tag
 What is the purpose of the action attribute in a <form> tag?
 What is the purpose of the method attribute in a <form> tag?
 What are the different values for the method attribute and what are their differences?
 What is the purpose of the CSS
 Explain in detail What are the three ways to include CSS in an HTML document?
 What is a CSS selector , CSS property ,CSS value?

Conclusion:

Hence , we studied the the basic concepts of HTML forms and CSS.