HTML Tables
and Forms
Chapter 5
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd
http://www.funwebdev.com
Chapter 5
1 Introducing
Tables 2 Styling Tables
3 Introducing
Forms 4 Form Control
Elements
5 Table and Form
Accessibility 6 Microformats
7
Summary
HTML Tables
A grid of cells
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
Randy Connolly and Ricardo Fundamentals of Web
HTML Tables
Example usages
Randy Connolly and Ricardo Fundamentals of Web
Table Basics
Rows and cells
• 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>
content
Randy Connolly and Ricardo Fundamentals of Web
A Simple Example
Randy Connolly and Ricardo Fundamentals of Web
With Table Headings
th
Randy Connolly and Ricardo Fundamentals of Web
Why Table Headings
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 semantic information about the row
being a row of headers
Randy Connolly and Ricardo Fundamentals of Web
Spanning Rows and
Each row must have the
Columns
same number of <td> or
<th> containers.If you
want a given cell to cover
several columns or rows,
use the colspan or
rowspan attributes
Randy Connolly and Ricardo Fundamentals of Web
Using Tables for Layout
It works in many situations
• Popular in 1990s
• Results in table bloat
• Not semantic
• Larger HTML pages
• Longer load time
Randy Connolly and Ricardo Fundamentals of Web
Additional table
tags
• <caption>
• <col>,<colgroup>
• <thead>
• <tfoot>
• <tbody>
Randy Connolly and Ricardo Fundamentals of Web
Using Tables for Layout
Chapter 5
1 Introducing
Tables 2 Styling Tables
3 Introducing
Forms 4 Form Control
Elements
5 Table and Form
Accessibility 6 Microformats
7 8
Summary
Styling Tables
The old ways deprecated
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
Randy Connolly and Ricardo Fundamentals of Web
Styling Tables
Borders
Randy Connolly and Ricardo Fundamentals of Web
Styling Tables
Padding and spacing
Randy Connolly and Ricardo Fundamentals of Web
Styling Tables
Examples
Randy Connolly and Ricardo Fundamentals of Web
Styling Tables
Examples
Randy Connolly and Ricardo Fundamentals of Web
Nth-Child
Nifty Table styling tricks: hover effect and zebra-
stripes
Randy Connolly and Ricardo Fundamentals of Web
•Use the HTML <table> element to define a table
•Use the HTML <tr> element to define a table row
•Use the HTML <td> element to define a table data
•Use the HTML <th> element to define a table heading
•Use the HTML <caption> element to define a table caption
•Use the CSS border property to define a border
•Use the CSS border-collapse property to collapse cell
borders
•Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing
between cells
• Use the colspan attribute to make a cell span many
columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table
Chapter 5
1 Introducing
Tables 2 Styling Tables
3 Introducing
Forms 4 Form Control
Elements
5 Table and Form
Accessibility 6 Microformats
7 8
Summary
HTML
Forms
Richer way to interact with server
Forms provide the user with an alternative way to
interact with a web server.
• Forms provide rich mechanisms like:
• Text input : Search functionality
• Password input
• Options Lists
• Radio and check boxes
Randy Connolly and Ricardo Fundamentals of Web
Static Vs
Forms make pages dynamic
Dynamic
Static page Dynamic page
Forms make pages dynamic
Randy Connolly and Ricardo Fundamentals of Web
Overview of
Forms
Forms are used all over the Web to:
– Accept information
– Provide interactivity
Types of forms:
– Search form, Order form, Newsletter sign-up form,
Survey form, Add to Cart form, Login form, and so
on…
Randy Connolly and Ricardo Fundamentals of Web 23
How forms interact with
servers
Randy Connolly and Ricardo Fundamentals of Web
Attributes of the
<form> element:
– name: identifier for the form
– action: URL of the file that will process the data
– method: HTTP method for submitting the data; “get”
or “post”
– [target]: where to open the pages specified in the
action attribute; _blank opens in a new window or
tab.
Randy Connolly and Ricardo Fundamentals of Web
GET vs
POST
Get: form data is sent as part of URL
–the data is visible and can be bookmarked
The URL when the form is submitted with the get
method:
subscribe.php?email=zak
%40modulemedia.com&submit=Subscribe
The data is after the ? and is called the query string
Post: form data is packaged as part of an HTTP request
and isn’t visible by the browser
– more secure
– resulting page can’t be bookmarked
In either case: the same data is transmitted:
?email=zak%40modulemedia.com&submit=Subscribe
Randy Connolly and Ricardo Fundamentals of Web
GET vs
POST
Randy Connolly and Ricardo Fundamentals of Web
GET vs
POST
GET
Advantages and Disadvantages
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.
Randy Connolly and Ricardo Fundamentals of Web
Query Strings
Randy Connolly and Ricardo Fundamentals of Web
Form Elements
The <form> element can contain one or more of the
following sub-elements:
<input> <option>
<textarea> <optgroup>
<button> <fieldset>
<select>
<label>
Randy Connolly and Ricardo Fundamentals of Web
Chapter 5
1 Introducing
Tables 2 Styling Tables
3 Introducing
Forms 4 Form Control
Elements
5 Table and Form
Accessibility 6 Microformats
7 8
Summary
Form Controls:
<input>
The input element of a form allows various
kinds of data to be accepted from the
user.
Include one of the following type
attributes:
• text • radio
• password • checkbox
• hidden • submit
• textarea • reset
• Search
• Email
• Tel
• url
25
Randy Connolly and Ricardo Fundamentals of Web
type="text"
First name:<input type="text"><br>
Last name:<input type="text"><br>
The type= "text" attribute creates a 20-character box for
user input.
How the HTML code above looks in a browser:
Randy Connolly and Ricardo Fundamentals of Web
type="password"
Password:< input type="password">
This attribute creates a standard text box but with bullets
instead of characters as the user types.
How the HTML code above looks in a browser:
Note: this does not encrypt the password; it simply
provides a shield for anyone looking at the user’s
screen.
Randy Connolly and Ricardo Fundamentals of Web
The Name Attribute
First name:< input type="text" name="firstname">
<br>
Last name:< input type="text" name="lastname">
<br>
Creates variables, firstname and lastname which
hold the values of the strings entered into each text
box.
Randy Connolly and Ricardo Fundamentals of Web
Radio
Buttons
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 optional checked attribute is used to indicate the default
choice
• the value attribute works in the same manner as with the
<option> element.
Randy Connolly and Ricardo Fundamentals of Web
Radio
Buttons
Radio buttons lets a user select ONLY ONE of a limited
number of choices:
< input type="radio" name="gender" value="m">
Male<br>
< input type="radio" name="gender" value="f">
Female<br>
How the HTML code above looks in a browser:
Note: The name attributes are the same. Why?
Randy Connolly and Ricardo Fundamentals of Web
Radio
Buttons
**Note: because only 1 value is
returned, the name attributes should
all be the same.
Randy Connolly and Ricardo Fundamentals of Web
Checkboxes
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
Randy Connolly and Ricardo Fundamentals of Web
Checkboxes
Checkboxes let a user select ZERO or MORE options of
a limited number of choices.
< input type="checkbox" name="bike"> I have a bike<br>
< input type="checkbox" name="car"> I have a car <br>
Note: The name attributes are different. Why?
Randy Connolly and Ricardo Fundamentals of Web
Selection
Selection, or drop-down, lists typically allow the
user to select one value from a list of options.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Randy Connolly and Ricardo Fundamentals of Web
Which Value to
send
Select Lists Cont.
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
Randy Connolly and Ricardo Fundamentals of Web
Text Areas
The HTML for a text area with default text:
Comments:<br>
<textarea name="comments" placeholder="If you
have any comments, please enter them here.">
</textarea>
Randy Connolly and Ricardo Fundamentals of Web
type= "submit"
The submit button is used to send form data somewhere for
processing. The data is sent to the page specified in the form's
action attribute. The file defined in the action attribute usually
does something with the received input:
Username: <input type="text" name="user">
<input type="submit" value="Submit">
The value
attribute
How the HTML code above looks in a browser: specifies the
text to display
on the button
Randy Connolly and Ricardo Fundamentals of Web
type= "reset"
<input type= "reset" value= "Reset">
The value attribute
specifies the text to
display on the button
38
Randy Connolly and Ricardo Fundamentals of Web
Chapter 5
1 Introducing
Tables 2 Styling Tables
3 Introducing
Forms 4 Form Control
Elements
5 Table and Form
Accessibility 6 Microformats
7 8
Summary
Accessible
Forms
Recall the <fieldset>, <legend>, and <label> elements.
Each <label> element should be associated with a single input
element.
Randy Connolly and Ricardo Fundamentals of Web
Accessible
Forms
Each <label> element can also be associated with a single input element
by wrapping it around the element (but watch for nesting rules).
<p>Client Type:
<label> <input type="radio" name="type" value="School">School</label>
<label><input type="radio" name="type" value="College">College</label>
<label><input type="radio" name="type" value="University">University</label>
</p>
Randy Connolly and Ricardo Fundamentals of Web
Accessibility guideline
Use labels to associate text with form input controls so the
user can click on the label text to select the control that
the label is associated with. This also helps assistive
devices.
Randy Connolly and Ricardo Fundamentals of Web
Label element
<label></label>
Associates a text label with a form control
Two Different Formats
<label>
<input type="radio" name= "crust" value= "hand"> Hand Tossed
</label>
Or
<label for="email" >Email: </label>
<input type="text" name="CustEmail" id= "email">
42
Randy Connolly and Ricardo Fundamentals of Web
Fieldset and Legend
Elements
The Fieldset Element
– Container tag
– Creates a visual group of form elements on
a web page
The Legend Element
– Container tag
– Creates a text label within the fieldset
<fieldset><legend>Customer
Information</legend>
<label>Name:
<input type="text" name=“name"
id="Name"></label>
<br><br>
<label>Email:
<input type="text" name="Email"
id="Email"></label>
</fieldset> 43
Randy Connolly and Ricardo Fundamentals of Web
Putting It All
Together
One form element containing the desired
controls:
Randy Connolly and Ricardo Fundamentals of Web
Button Controls
Preferred
Type Description
<input type="submit"> Creates a button that submits the form data to the server. May
have a value = " " attribute to control the text that displays on
the button.
<input type="reset"> Creates a button that clears any of the user’s already entered
form data. May have a value = " " attribute to control the text
that displays on the button.
<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.
<button> 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.
Randy Connolly and Ricardo Fundamentals of Web
Button Controls
Randy Connolly and Ricardo Fundamentals of Web
Specialized Controls
<input type="hidden">
Use the hidden type attribute for sending string values along
with other data that the user doesn’t see or input – a product ID
for example:
<input type="hidden" name="productid" value="C1003">
<input type="file">
Randy Connolly and Ricardo Fundamentals of Web
Number and
Range
Typically input values need to 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!!!
Randy Connolly and Ricardo Fundamentals of Web
Number and
Range
Randy Connolly and Ricardo Fundamentals of Web
Color
Randy Connolly and Ricardo Fundamentals of Web
HTML5 Date and Time
Controls
Randy Connolly and Ricardo Fundamentals of Web
HTML5 Date and Time
Controls
Randy Connolly and Ricardo Fundamentals of Web
HTML Controls
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 Creates a control in which the user can enter a date and time
- local 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##".
Randy Connolly and Ricardo Fundamentals of Web
HTML
5
HTML 5 will support several new input types such as:
Color, date, email, etc.
Check the following site for browser
compatibilities:
http://www.w3schools.com/html/html_form_input_typ
es.asp
Randy Connolly and Ricardo Fundamentals of Web
Formattin
g
Aligned label, text box, and button controls
Randy Connolly and Ricardo Fundamentals of Web
The HTML for the
form
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" autofocus><br>
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname"><br>
<label for="address">Address:</label>
<input type="text" name="address" id="address"><br>
<label for="city">City:</label>
<input type="text" name="city" id="city"><br>
<label for="state">State:</label>
<input type="text" name="state" id="state"><br>
<label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip"><br>
<input type="submit" name="register" id="button" value="Register">
<input type="reset" name="reset" id="reset" value="Reset">
Randy Connolly and Ricardo Fundamentals of Web
The CSS for the
controls
label {
float: left;
width: 5em;
text-align: right;
}
input {
margin-left: 1em;
margin-bottom: .5em;
}
#button {
margin-left: 7em;
}
Randy Connolly and Ricardo Fundamentals of Web
Chapter 5
1 Introducing
Tables 2 Styling Tables
3 Introducing
Forms 4 Form Control
Elements
5 Table and Form
Accessibility 6 Microformats
7 8
Summary
Microformats
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
hCard – markup contact information
hNews – richly formatted, standardized markup:
Randy Connolly and Ricardo Fundamentals of Web
Microformat
Randy Connolly and Ricardo Fundamentals of Web
