HTML Images, Tables, and Forms

Topic Overview

Image Integration

Images in HTML Saving for Web The <img> Tag Source Alt Title Width and Height The <img> Element TODO

Table Structure

Tables in HTML The <table> Tags Rows Cells Headings The <table> Element TODO

Table Styling

Styling Borders Cell Padding TODO

Intro to Forms

Web Forms The <form> Tags Action Method ID and Class The <form> Element TODO

Form Input Elements

Asking for Input The <iput> Tag Type Name ID The <input> Element TODO

Text Types

Text Input Plain Text Password Text Area Maxlength Columns and Rows Placeholder Size Value Autofocus TODO

Selection Types

Selection Input Radio Buttons The Checkbox Element The Select Box (AKA Dropdown Select) TODO

Button Types

Buttons The Upload Button The Submit Button The Image Button The Button Element TODO

Form Management

Keeping Track Labels and IDs Fieldsets and Legends TODO

HTML5 Inclusions

New in HTML5 Validation Date E-Mail Search Figure and Figcaption TODO

Labels and IDs

Each form control should have its own label element. This makes the form accessible to visually impaired users.

As a rule of thumb, labels should be placed ‘above or to the left’ of the input area for text, select boxes, and file uploads (this is the same idea presented earlier with <p>...</p>).

Labels should be placed to the right of individual checkboxes and radio buttons. Labels can be applied by wrapping them around both the text description and the form input.

Labels can also be included by using the for="" attribute. The value for this attribute should be the id assigned to each form element.

NOTE: This also expands the clickable area available to the user.