HTML and CSS Reference
In-Depth Information
As you can see, two lines of code are sufficient to convert the form to an object, and include
the contents in the
table
, and this could be condensed to one line with relative ease.
As stated above, this is a rudimentary version of the save functionality. For instance, it does
not contain any validation; therefore you can add invalid data to the table. This, and other
minor issues, will be fixed once we start to turn this into a true web application in a couple
of chapters time.
Now that the save is implemented we can remove the three rows that were added to the
table by default each time the page was loaded, and add rows using the “Add task” and
“Save task” functionality. In addition, the rows added should be able to be deleted using
the “Delete task” option.
The tasks.html page should now contain the following markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task list</title>
<link rel="stylesheet" type="text/css" href="styles/tasks.css"
media="screen" />
<script src="scripts/jquery-2.0.3.js"></script>
<script src="scripts/jquery-tmpl.js"></script>
</head>
<body>
<header>
<span>Task list</span>
</header>
<main>
<section id="taskCreation" class="not">
<form>
<div>
<label>Task</label>
<input type="text" required="required"
name="task" class="large"
placeholder="Breakfast at Tiffanys" />
