1

Practical 10+11: HTML Forms + CSS

Objectives:

1. Teach the basics of CSS syntax and selectors.

2. Introduce the CSS box model for element spacing.
3. Provide an understanding of basic layout techniques like Flexbox.

Outcomes:

1. Students will be able to apply basic CSS styles to HTML elements.

2. Students will understand and use the box model for layout and spacing.
3. Students will be able to create simple responsive layouts using Flexbox.

Theoretical Explanation

HTMLForm
An HTML form is used to collect user input. The user input is most often sent to a
server for processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on

the type attribute.

Department Of Computer Science AICT LAB MA NUAL

2

Here are some examples:

Text Fields
The <input type="text"> defines a single-line input field for text input.

The <label> element in HTML is used to define a label for a form control. It improves accessibility
by associating the label with a form element, such as an input or checkbox, and helps screen readers
announce the label. The for attribute links the label to a form control by matching its id. Clicking
the label activates the corresponding input field.

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Department Of Computer Science AICT LAB MA NUAL

3

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of

choices.

The Submit Button

The <input type="submit"> defines a button for submitting the form data
to a form-handler.

The form-handler is typically a file on the server with a script for processing
input data.

The form-handler is specified in the form's action attribute.

Department Of Computer Science AICT LAB MA NUAL

4

 action="/submit-form": Specifies that the form data will be sent to the /submit-form
URL when the form is submitted.

 method="POST": Specifies that the form data will be sent using the POST method (you
can also use GET if needed).

The <select> Element

The <select> element defines a drop-down list:

Department Of Computer Science AICT LAB MA NUAL

5

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

<input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Department Of Computer Science AICT LAB MA NUAL

6

Department Of Computer Science AICT LAB MA NUAL

7

Input Type Email

The <input type="email"> is used for input fields that should contain an e-
mail address.

Depending on browser support, the e-mail address can be automatically

validated when submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard
to match email input.

Demo Form

Department Of Computer Science AICT LAB MA NUAL

8

HTML Input Types

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

Department Of Computer Science AICT LAB MA NUAL

9

If the name attribute is omitted, the value of the input field will not be sent at
all.

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen,

paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files

Department Of Computer Science AICT LAB MA NUAL

10

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

Department Of Computer Science AICT LAB MA NUAL

11

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large websites, where fonts and color information were added to every single
page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website
by changing just one file!

Using CSS
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

Inline CSS
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.

The following example sets the text color of the <h1> element to blue, and
the text color of the <p> element to red:

Department Of Computer Science AICT LAB MA NUAL

12

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.

The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue" background color:

External CSS
An external style sheet is used to define the style for many HTML pages.

Department Of Computer Science AICT LAB MA NUAL

13

To use an external style sheet, add a link to it in the <head> section of each
HTML page:

The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

Department Of Computer Science AICT LAB MA NUAL

14

CSS Syntax
A CSS rule 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.

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

Applying Inline CSS

Department Of Computer Science AICT LAB MA NUAL

15

Department Of Computer Science AICT LAB MA NUAL

16

In lab Task:
Lab Task:

1. Replicate this webpage using html + inline css

Department Of Computer Science AICT LAB MA NUAL

17

Department Of Computer Science AICT LAB MA NUAL

18

Post lab Task: Design below form

and style (style)

Department Of Computer Science AICT LAB MA NUAL