HTML & CSS: The Good Parts

Chapter 13. Clean and Accessible Forms

Web application development requires more than CSS layout and typography. While sites may simply present information to their visitors, applications need to get information from their visitors. Web applications thrive or wither on the strength of their form design and implementation.

Wherever there’s a need for user-generated content, there’s a form—and wherever there’s a form, there are ample opportunities to foul the user experience.

This chapter introduces form design and implementation techniques that minimize the risk of ruinous mistakes.

Building Effective Forms

Creating useful forms requires more than knowing form markup. Understanding what makes a form work for its users is a critical part of the web developer’s skill set.

Web Applications, User Perspective, and Design Choices

Imagine a heap of data—say, a collection of poetry.

A website that presents these poems will likely store them in an SQL database, which by design offers countless ways to sort and arrange its contents on demand. The heart of that imaginary site is described in the following MySQL table creation command, shared here because it’s more or less human-readable:

CREATE TABLE poems(
              id SERIAL,
       author_id MEDIUMINT,
      date_added DATETIME,
        date_pub DATETIME,
      discussion TEXT,
       editor_id SMALLINT,
        folio_id MEDIUMINT,
         lang_id SMALLINT,
  lang_source_id SMALLINT,
      marginalia TEXT,
           title VARCHAR(1024),
   translator_id MEDIUMINT,
           verse MEDIUMTEXT
);

For the sake of further readability, ...