Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
Chapter 4. Animation > Adding the New Entry Panel
4.5. Adding the New Entry Panel
Example 4-5 shows the source code for the New Entry panel. Add this code to the end of index.html, just before the closing </body>.
Example 4-5. The HTML for the New Entry panel
|
Code View:
Scroll
/
Show All <div id="createEntry">
<div class="toolbar">
<h1>New Entry</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul>
<li><input type="text" placeholder="Food" name="food" id="food"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="text" placeholder="Calories" name="calories" id="calories"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="submit" class="submit" name="action"
value="Save Entry" /></li>
</ul>
</form>
</div>
|
Figure 4-6. The jqt theme does a nice job styling form elements
Figure 4-7 shows the New Entry form in action. At this point, I’ve done nothing to actually save the entry when the user clicks Save Entry. We’ll cover that in Chapter 5.
Figure 4-7. Keyboard data entry with the New Entry form
