Computer Science 302:

Web Development

Gregory M. Kapfhammer

Keep in Touch!

Course Web Site

Office Hours

Teaching Assistants

Slack Communication

Relevant Tweets

Email Communication

Color Scheme

Key Concept

Corresponding Diagram

In-Class Discussion

In-Class Activity

Details in the Textbook

Tables and Forms

What are the benefits?

Tables

Rows and Columns

See Table 5.2 for an Example

th and tr and td

Spanning Rows and Columns

colspan

Using Tables for Layout?

We won't pursue this option!

Styling tables

What can we style?

Styling tables

border

border-spacing

border-collapse

padding

background-color

See Figure 5.9 for an styling example

Interactivity through forms

Form control elements

Form Choice Control

Select lists

Radio buttons

Checkboxes

Button controls

Specialized controls

Risks of file upload controls?

Date and time controls

How do forms work?

See Figure 5.12 for an example

What if you do not have a database?

https://www.formingo.co/

https://getsimpleform.com/

How do these methods work?

SEED Project as an example

Mailing list as an example

Let's dissect some forms!

Half of the class look at SEED

Other half look at mailing list

Draw part of the form on paper

Annotate the form with connected code

Responsive design with forms

Table and form accessibility

Why is accessibility important?

Who does accessibility benefit?

Web accessibility initiative

Questions about accessibility?

Questions about forms or tables?