Slide 1

Module – 2 : HTML Tables and Forms

HTML Tablesand

Forms

Objectives

IntroducingTables

Table and Form

Accessibility

17CS71-WTA Module – 2 : HTML Tables and

Forms

Styling Tables

Introducing Forms

Form Control

Elements

Microformats

Section 1 of 6

INTRODUCING TABLES

17CS71-WTA Module – 2 : HTML Tables and

Forms

A table in HTML is created using the <table>

element

Tables can be used to display:

•Many types of content

•Calendars, financial data, lists, etc…

•Any type of data

•Images

•Text

•Links

•Other tables

17CS71-WTA Module – 2 : HTML Tables and Forms

HTML Tables

A grid of cells

HTML Tables

Example usages

17CS71-WTA Module – 2 : HTML Tables and

Forms

•an HTML <table> contains any number of

rows (<tr>)

•each row contains any number of table data

cells (<td>)

• Content goes inside of <td></td> tags

<table>

<tr>

<td>The Death of Marat</td>

</tr>

</table>

Tables Basics

Rows and cells

conten

17CS71-WTA Module – 2 : HTML Tables and

Forms

A basic Example

17CS71-WTA Module – 2 : HTML Tables and

Forms

With Table Headings

17CS71-WTA Module – 2 : HTML Tables and

Forms

Why Table Headings

17CS71-WTA Module – 2 : HTML Tables and

Forms

A table heading <th>

•Browsers tend to make the content within a

<th> element bold

•<th> element for accessibility (it helps those

using screen readers)

•Provides some semantic info about the row

being a row of headers

Spanning Rows andColumns

Span Span Span a Row

Each row must have

the same number of

<td> or

<th> containers. If you

want a given cell to

cover several columns

or rows,

use the colspan or

rowspanattributes

17CS71-WTA Module – 2 : HTML Tables and

Forms

UsingTables for Layout

It works in many situations

• Popular in 1990s

• Results in table

bloat

• Not semantic

• Larger HTML

pages

• Browser quirks

17CS71-WTA Module – 2 : HTML Tables and

Forms

Example Table layouts

17CS71-WTA Module – 2 : HTML Tables and

Forms

Additional table tags

• <caption>

• <col>,<colgrou

• <thead>

• <tfoot>

• <tbody>

17CS71-WTA Module – 2 : HTML Tables and

Forms

Section 2 of 6

STYLING TABLES

17CS71-WTA Module – 2 : HTML Tables and

Forms

In HTML5 it is left to CSS, However legacy support for

deprecated HTML attributes still exist

 width, height—for setting the width and height of cells

 cellspacing—for adding space between every cell in the table

 cellpadding—for adding space between the content of the

cell

and its border

 bgcolor—for changing the background color of any table

element

background—for adding a background image to any table

element

align—for indicating the alignment of a table in relation to the

surrounding container

17CS71-WTA Module – 2 : HTML Tables and

Forms

Styling Tables

The old way’sdeprecated

Styling Tables

Borders

17CS71-WTA Module – 2 : HTML Tables and

Forms

Styling Tables

Padding and spacing

17CS71-WTA Module – 2 : HTML Tables and

Forms

Styling Tables

Examples

17CS71-WTA Module – 2 : HTML Tables and

Forms

Nth-Child

Nifty Table styling tricks: hover effect and zebra-stripes

17CS71-WTA Module – 2 : HTML Tables and

Forms

Section 3 of 6

INTRODUCING FORMS

17CS71-WTA Module – 2 : HTML Tables and

Forms

Forms provide the user with an alternative way

to interact with a web server.

• Forms provide rich mechanisms like:

• Text input

• Password input

• Options Lists

• Radio and check boxes

17CS71-WTA Module – 2 : HTML Tables and

Forms

HTML Forms

Richer wayto interact with server

Form Structure

17CS71-WTA Module – 2 : HTML Tables and

Forms

How formsinteract with servers

17CS71-WTA Module – 2 : HTML Tables and

Forms

Query Strings

At the end of the day, another string

17CS71-WTA Module – 2 : HTML Tables and

Forms

URL encoding

Special symbols

17CS71-WTA Module – 2 : HTML Tables and

Forms

<form> element

17CS71-WTA Module – 2 : HTML Tables and

Forms

Two essential features of any form, namely the

action

and the methodattributes.

•The action attribute specifies the URL of the

server-side resource that will process the form

data

•The method attribute specifies how the query

string data will be transmitted from the browser to

the server.

• GET

• POST

GET vsPOST

17CS71-WTA Module – 2 : HTML Tables and

Forms

GET vsPOST

Advantages and Disadvantages

17CS71-WTA Module – 2 : HTML Tables and

Forms

 Data can be clearly seen in the address

bar.

 Data remains in browser history and

cache.

 Data can be bookmarked

Limit on the number of characters in the

form data returned.

POST

 Data can contain binary data.

 Data is hidden from user.

Submitted data is not stored in cache,

history, or bookmarks.

Section 4 of 6

FORMS CONTROL ELEMENTS

17CS71-WTA Module – 2 : HTML Tables and

Forms

Form-Related HTML Elements

17CS71-WTA Module – 2 : HTML Tables and

Forms

Type

Description

Defines

a clickable button.

HTML5 element form defines lists to be used with other form

elements.

Groups related

elements in a form together.

<form>

Defines

the form container.

<input>

Defines

an input field. HTML5 defines over 20 different types of input.

<label>

Defines

a label for a form input element.

Defines

the label for a fieldset group.

Defines

an option in a multi-item list.

Defines

a group of related options in a multi-item list.

Defines

a multi-item list.

Defines

a multiline text entry box.

Text Input Controls

17CS71-WTA Module – 2 : HTML Tables and

Forms

Type

Description

text

Creates

a single line text entry box. <input type="text" name="title" />

textarea

Creates

a multiline text entry box. <textarea rows="3" ... />

password

Creates

a single line text entry box for a password <input type="password" ... />

Creates

a single-line text entry box suitable for a search string. This is an HTML5 element.

<input

type="search"…/>

Creates

a single-line text entry box suitable for entering an email address. This is an HTML5

element.

<input

type="email"…/>

tel

Creates

a single-line text entry box suitable for entering a telephone. This is an HTML5

element.

<input

type="tel" …/>

url

Creates

a single-line text entry box suitable for entering a URL. This is an HTML5 element.

<input

type="url" … />

Text Input Controls

Classic

17CS71-WTA Module – 2 : HTML Tables and

Forms

Text Input Controls

HTML5

17CS71-WTA Module – 2 : HTML Tables and

Forms

HTML5 advanced controls

Patternattribute

datalist

17CS71-WTA Module – 2 : HTML Tables and

Forms

Select Lists

Chose an option, any option.

17CS71-WTA Module – 2 : HTML Tables and

Forms

• <select> element is used to create a multiline

box for selecting one or more items

• The options are defined using the <option>

element

• can be hidden in a dropdown or multiple

rows of the list can be visible

• Option items can be grouped together via the

<optgroup>element.

Select Lists

Select List Examples

17CS71-WTA Module – 2 : HTML Tables and

Forms

The value attribute of the <option> element is

used to specify what value will be sent back to

the server.

The value attribute is optional; if it is not

specified, then the text within the container is

sent instead

Which Value to send

Select Lists Cont.

17CS71-WTA Module – 2 : HTML Tables and

Forms

Radio Buttons

17CS71-WTA Module – 2 : HTML Tables and

Forms

Radio buttons are useful when you want the user

to select a single item from a small list of choices

and you want all the choices to be visible

• radio buttons are added via the <input

type="radio">

element

• The buttons are mutually exclusive (i.e., only one

can be chosen) by sharing the same name

attribute

• The checked attribute is used to indicate the

default choice

• the value attribute works in the same manner as

with the <option> element

Radio Buttons

17CS71-WTA Module – 2 : HTML Tables and

Forms

Checkboxes

17CS71-WTA Module – 2 : HTML Tables and

Forms

Checkboxes are used for getting yes/no or

on/off responses from the user.

• checkboxes are added via the <input

type="checkbox”>

Element

• You can also group checkboxes together by having

them share the same name attribute

• Each checked checkbox will have its value sent

to the server

• Like with radio buttons, the checked attribute can

be used to set the default value of a checkbox

Checkboxes

17CS71-WTA Module – 2 : HTML Tables and

Forms

Button Controls

17CS71-WTA Module – 2 : HTML Tables and

Forms

Type

Description

<input

type="submit">

Creates

a button that submits the form data to the

server.

Creates

a button that clears any of the user’s already

entered

form data.

<input

type="button">

Creates

a custom button. This button may require

Javascript

for it to actually perform any action.

<input

type="image">

Creates

a custom submit button that uses an image

for

its

display.

Creates

a custom button. The <button> element

differs

from

<input type="button"> in that you can

completely

customize what appears in the button;

using it,

you can, for instance, include both images

and

text, or skip server-side processing entirely by

using

hyperlinks.

You

can turn the button into a submit button by using

the

type="submit" attribute.

Button Controls

17CS71-WTA Module – 2 : HTML Tables and

Forms

Specialized Controls

I’m so special

• <input type=hidden>

• <input type=file>

17CS71-WTA Module – 2 : HTML Tables and

Forms

Number and Range

17CS71-WTA Module – 2 : HTML Tables and

Forms

Typically input values need be validated.

Although server side validation is required,

optional client side pre-validation is good

practice.

The number and range controls Added in

HTML5 provide a way to input numeric

values that eliminates the need for JavaScript

numeric validation!!!

Number and Range

17CS71-WTA Module – 2 : HTML Tables and

Forms

Color

17CS71-WTA Module – 2 : HTML Tables and

Forms

Date andTime Controls

17CS71-WTA Module – 2 : HTML Tables and

Forms

Dates and times often need validation

when gathering this information from a

regular text input control.

From a user’s perspective, entering dates can

be tricky as well: you probably have

wondered at some point in time when

entering a date into a web form, what format

to enter it in, whether the day comes before

the month, whether the month should be

entered as an abbreviation or a number, and

so on.

HTML5 Date and Time Controls

17CS71-WTA Module – 2 : HTML Tables and

Forms

HTML5 Date and Time Controls

17CS71-WTA Module – 2 : HTML Tables and

Forms

HTML Controls

17CS71-WTA Module – 2 : HTML Tables and

Forms

Type

Description

date

Creates

a general date input control. The format for the date is "yyyy-mm-dd".

time

Creates

a time input control. The format for the time is "HH:MM:SS", for

hours:minutes:seconds.

datetime

Creates

a control in which the user can enter a date and time.

datetime

-local

Creates

a control in which the user can enter a date and time without specifying a time

zone.

month

Creates

a control in which the user can enter a month in a year. The format is "yyyy-

mm".

week

Creates

a control in which the user can specify a week in a year. The format is "yyyy-

W##".

• The <progress> and <meter> elements can be

used to provide feedback to users,

• but requires JavaScript to function dynamically.

• The <output> element can be used to hold

the output from a calculation.

• The <keygen> element can be used to

hold a private key for public-key

encryption

17CS71-WTA Module – 2 : HTML Tables and

Forms

Other Controls

You mean there’smore

Section 5 of 6

TABLE AND FORM

ACCESSIBILITY

17CS71-WTA Module – 2 : HTML Tables and

Forms

Web Accessibility

17CS71-WTA Module – 2 : HTML Tables and

Forms

Not all web users are able to view the content on web

pages in the same manner.

The term web accessibility refers to the assistive

technologies, various features of HTML that work with

those technologies, and different coding and design

practices that can make a site more usable for people

with visual, mobility, auditory, and cognitive disabilities.

In order to improve the accessibility of websites, the

W3C created the Web Accessibility Initiative (WAI)

• Web Content Accessibility Guidelines

Web Content Accessibility

Guidelines

17CS71-WTA Module – 2 : HTML Tables and

Forms

• Provide text alternatives for any nontext

content so that it can be changed into other

forms people need, such as large print, braille,

speech, symbols, or simpler language.

• Create content that can be presented in

different ways (for example simpler layout)

without losing information or structure.

• Make all functionality available from a

keyboard.

• Provide ways to help users navigate, find

content, and determine where they are.

Accessible Tables

1. Describe the table’s content using the

<caption> element

2. Connect the cells with a textual description in

the header

17CS71-WTA Module – 2 : HTML Tables and

Forms

Accessible Forms

Recall the <fieldset>, <legend>, and <label>

elements.

Each <label> element should be associated

with a single input element.

17CS71-WTA Module – 2 : HTML Tables and

Forms

Section 6 of 6

MICROFORMATS

17CS71-WTA Module – 2 : HTML Tables and

Forms

Microformats

17CS71-WTA Module – 2 : HTML Tables and

Forms

A microformat is a small pattern of HTML markup

and attributes to represent common blocks of

information such as people, events, and news

stories so that the information in them can be

extracted and indexed by software agents

Microformat

17CS71-WTA Module – 2 : HTML Tables and

Forms

What you’ve learned

IntroducingTables

Table and Form

Accessibility

17CS71-WTA Module – 2 : HTML Tables and

Forms

Styling Tables

Introducing Forms

Form Control

Elements

Microformats

Chapter7

ADVANCED CSS: LAYOUT

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

In a fixed layout , the basic width of the design is

set by the designer, typically corresponding to

an “ideal” width based on a “typical” monitor

resolution.

The advantage of a fixed layout is that it is

easier to produce and generally has a

predictable visual result.

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Approaches to CSSLayout

Fixed Layout

Approaches to CSSLayout

Fixed Layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Approaches to CSSLayout

Problem with Fixed Layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Liquid layout (also called a fluid layout) widths are

not specified using pixels, but percentage values

The advantage of a liquid layout is that it

adapts to different browser sizes

Creating a usable liquid layout is generally

more difficult than creating a fixed layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Approaches to CSSLayout

Liquid Layout

Approaches to CSSLayout

Liquid Layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Responsive Design

Responsive Layouts

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Responsive Design

4 elements

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

1. Liquid layouts

2. Setting viewports via the <meta> tag

3. Customizing the CSS for different viewports

using media queries

4. Scaling images to the viewport size

Responsive Design

Setting Viewports

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Responsive Design

Setting Viewports

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

A media query is a way to apply style rules

based on the medium that is displaying the file

Responsive Design

Media Queries

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

• width: Width of the viewport

• height: Height of the viewport

• device-width: Width of the device

• device-height: Height of the device

• orientation: Whether the device is

portrait or landscape

• color: The number of bits per color

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Responsive Design

Media Queries

Responsive Design

Media Queries

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Responsive Design

Responsive Design Patterns

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Responsive Design

Responsive Design Patterns

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Responsive Design

Responsive Design Patterns

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Flexbox Layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

CSS Frameworks and Preprocessors

Grid in print design

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

CSS Frameworks and Preprocessors

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.

Using Bootstrap

<head>

</head>

<body>

left column

</div>

main content

</div>

right column

</div>

</body>

CSS Frameworks and Preprocessors

CSS Preprocessors

17CS71-WTA Module – 2 : HTML Tables and Forms - 2

Ed.