HTML5 &CSS: Chapter 08

Chapter 8
Creating Tables
and Forms
Web Design with
HTML5 & CSS3
8th Edition

• Define table elements
• Describe the steps used to plan, design, and code
a table
• Create a table with rows and data
• Insert a table caption
• Style a table for tablet and desktop viewports
• Describe form controls and their uses
Chapter 8: Creating Tables and Forms 2
Chapter Objectives

• Use the form and input elements
• Create text input controls, labels, and check boxes
• Create a selection menu with multiple options
• Use the textarea element
• Create a Submit button
• Create a Reset button
Chapter Objectives (continued)

• Tables
– Compare data or outline a detailed topic in a compact
format
– Consist of rows, columns, and cells
• Row – It is a horizontal line of information
• Column – It is a vertical line of information
Discovering Tables

• Cell
– It is the intersection of a row and a column and usually
contains data
– The two types of cell are: a heading cell or a data cell
oA heading cell displays text as bold and center-aligned
oA data cell displays normal, left-aligned text and contains
information appropriate for the column and row
Discovering Tables (continued 1)

• Figure 8–4 shows examples of the three elements:
rows, columns, and cells
Discovering Tables (continued 2)

• Table 8–1 lists the HTML elements used to create
a table
Creating a Table with HTML
Elements

• Creating a table on a webpage
– The <table> and </table> tags indicate the starting and
ending of a table
– The <tr> and </tr> tags indicate the starting and
ending of each table row
– The <td> and </td> tags indicate the starting and
ending tags for data elements within the table row
elements
Creating a Table with HTML
Elements (continued)

• Table border – It is the line that defines the
perimeter of the table
• Table header
– It is a heading cell and identifies the row or column
content
– It is defined with a starting <th> tag and an ending
</th> tag
Table Borders, Headers, and
Captions

• Table caption
– It is a descriptive text that serves as a title or identifies
the table’s purpose
– It is defined with a starting <caption> tag and an
ending </caption> tag
– It is inserted after the starting <table> tag
– A table can have only one caption
• Tables can include headers and captions
individually or in combination
Captions (continued 1)

• Figure 8–6 shows a table created with the
following code, which includes a table caption and
table headers
<table>
<caption>College Course
Recommendations by Semester</caption>
<tr>
<th>Semester 1</th>
<th>Semester 2</th>
<th>Semester 3</th>
<th>Semester 4</th>
</tr>

<tr>
<td>English I</td>
<td>English II</td>
<td>Spanish I</td>
<td>Spanish II</td>
</tr>
<tr>
<td>College Algebra</td>
<td>College Geometry</td>
<td>Calculus</td>
<td>Trigonometry</td>

</tr>
<tr>
<td>Physical Science</td>
<td>Biology</td>
<td>Humanities</td>
<td>World History</td>
</tr>
</table>

• Tables
– Display data in rows and columns
– Should not be used to design a layout for a webpage
– Help organize information so that it is easier for the
user to read
– Useful if the webpage needs to display a structured,
organized list of information
Use of Tables

• To create effective tables
– Plan the information that will appear in columns and
rows
– Create a design that presents the information clearly
• When planning a table for responsive web design,
give careful consideration to the mobile viewport
because of its screen size
Planning the Table

To Add a Table Element to the
Classes Page

Styling Table Elements

• Separated border
– When a border is applied to table elements, by
default, each cell has its own border, making the table
appear to use double lines between each table data
cell
• Collapsed border
– Use the border-collapse property with a value of
collapse to display a table with single, consolidated
borders
Styling Table Elements
(continued)

To Style a Table for a Tablet
Viewport

Viewport (continued 1)

To Style a Table for a Desktop
Viewport

• Forms provide a structured way to collect
information from webpage visitors
• Visitors complete webpage forms to register for
an account or to make a purchase.
• Businesses use forms to gather visitor or customer
information and store it in a database for future
use
Creating Webpage Forms

• All form elements are contained with the starting
<form> tag and the ending </form> tag
• Input control – It is an interactive mechanism for
users to enter text or make selections on a form
– A label is text describing the type of information to
enter with an input control.
• Most controls in an HTML form are defined by
using the type attribute of the input element
Form Controls

• Define other controls using separate elements,
such as the textarea and select elements
• The two input controls are:
– Data input control – It is used to make a selection or
perform a command
– Text input control – It accepts text, such as names,
dates, and passwords, and is called an input field
Form Controls (continued 1)

• Each input control has attributes that are used
more frequently than the others:
– name – It identifies the specific information that is
being sent when the form is submitted for processing.
All controls have a name
– id – It provides a unique ID for the element. Use the
id attribute with input controls
– value – It specifies the value of an input element and
varies depending on input type

• Common input controls used with a form include
text, password, email, checkbox, select, submit,
reset, etc.
• Text input controls include the following types:
– text box (text control), for small amounts of text
– password text box (password control), for entering a
password
– email text box (email control), for entering an email
address

– telephone text box (tel control), for entering a
telephone number
– date text box (date control), for entering a date
– text area box (textarea control), for larger amounts of
text
• These text input controls have two frequently
used attributes:
– size – It determines the width of the control in
characters
– maxlength – It specifies the maximum number of
characters accepted

– Example:
oThe first line of the following code creates a 25-character
text box for the user’s last name and the second line creates
an eight-character text box for the user’s password:
<p>Last Name: <input
name="lastname" type="text"
size="25"></p>
<p>Password: <input name="password
type="password" size="8"></p>

• Password control – It is a text control as it
provides a text box for the password a visitor
enters
• Email control – It is a text box where visitors enter
an email address
• Tel control – It is a text box where visitors enter a
telephone number
• Date control – It is a text box that accepts a date

• Textarea control – It creates a text box that allows
multiple lines of input
– To create a textarea control, use the textarea
element instead of the input element
– It has two primary attributes, which set the size of the
textarea control:
orows, which specifies the number of rows, or lines, in the
textarea control
ocols, which sets the width of the textarea control as the
number of columns, with each column containing one
character

oThe following is an example of HTML code defining a
textarea control:
<label>What products would you like
to see us offer?</label>
<textarea name="feedback" rows="3"
cols="100"></textarea>

• Checkbox control
– It allows a webpage visitor to select items from a list of
one or more choices
– The following code is an example for two checkbox
controls that might appear on a form for a grocery
store website
<input name="fruit" type="checkbox"
value="apple“ checked="checked">Apple
<input name="fruit" type="checkbox"
value="peach">Peach

• Radio control
– It limits the webpage visitor to only one choice from a
list of choices
– Each choice has a radio button, or option button,
which appears as an open circle
– By default, all radio buttons are deselected
– To set a particular button as the default, use the
checked attribute and value within the <input> tag

– The following is sample code to create two radio
controls that might appear in a rental car website
form:
<input name="car" type="radio"
checked="checked" value="car">Car
<input name="truck" type="radio"
value="truck">Truck
– A visitor can choose to rent a car or a truck, with the
Car radio button already selected when the form
opens

• Select control
– It creates a selection menu from which the visitor
makes one or more choices and is suitable when a
limited number of choices are available
– It appears on a form as a text box with a list arrow
– The following is sample code for a select control:
<select name="station">
<option>Pandora</option>
<option>Internet Radio</option>
<option>Live365</option>
<option>Jango</option>
</select>

• Submit button
– It sends the form information to the appropriate
location for processing
– When it is clicked on the form, the name of each
control and the value of its data are sent to the server
to be processed
– The submit control is created with the following code:
<input type="submit“ value="Submit">

• Reset button
– Clears any input entered in the form, resetting the
input controls to their defaults
– A webpage form must include a submit control and a
reset control
– The value attribute specifies the text that appears
on the button
– The reset control is created with the following code:
<input type="reset" value="Reset">

• Figure 8–34 shows an example of a form with
several input controls, including text, email, tel,
date, select, and textarea

• Form Labels
– They identify the type of information to enter into or
select from an input control
– They are added to a form using the label element
– To connect them to their controls, include the for
attribute with the same value as the input control’s id
value

– The following code creates a label and a text box for a
visitor’s first name:
<label for="fName">First Name:</label>
<input type="text" name="fName“
id="fName">

• action
– It is an attribute of the <form> tag that specifies the
browser’s action when submitting the form
• Common Gateway Interface (CGI) script
– It communicates with the web server and sends the
information on the webpage form to the server for
processing
Form Processing

• method
– It is an attribute of the <form> tag that specifies how
to send the data entered in the form to the server to
be processed
• Get method
– It appends the name-value pairs to the URL indicated
in the action attribute
– Example of a form tag with the get method and
specified action is as follows:
<form method="GET“ action="formInfo.php">
Form Processing (continued 1)

• Post method
– It sends a separate data file with the name-value pairs
to the URL indicated in the action attribute
– It is used very commonly because it can be used to
send sensitive form data and does not have a size
limitation
– Example of a form tag with the post method and
specified action is as follows:
<form method="POST“ action="formInfo.php">
Form Processing (continued 2)

• CSS styles are applied to forms to improve the
appeal and usefulness of the form and its controls
• As with tables, consider forms in the context of
responsive design
• Controls can be included to collect optional
information, such as product feedback, in tablet
and desktop viewports
Styling Forms

To Style a Form for a Desktop
Viewport

To Style a Form for a Desktop
Viewport (continued)

Chapter 8 Complete
HTML5 & CSS3
8th Edition

HTML5 &CSS: Chapter 08

Recommended

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to HTML5 &CSS: Chapter 08 (20)

More from Steve Guinan (20)

Recently uploaded (20)

HTML5 &CSS: Chapter 08