CS 80: Internet Programming
Instructor: Mark Edmonds
HTML5 introduces new input types for forms
New HTML5 form input types
<input
type="type"> tagcolor: allows user to input a RGB, many
browsers have color picker.
date: calendar date input, many browsers
have a calendar-style pickerNew HTML5 form input types
datetime: date and time input
datetime-local: date and time input
New HTML5 form input types
email: email input
New HTML5 form input types
month: month input
number: any number input
New HTML5 form input types
range: range slider between particular
values - no validation required
New HTML5 form input types
search: search field, behaves like a
text inputtel: telephone number input,
HTML5 does not validate this input!New HTML5 form input types
time: time input
url: valid URL input
New HTML5 form input types
week:input a specific week (nn is a week
number, between 01 and 53
new_forms.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Forms in HTML5</title>
</head>
<body>
<h3>Demo of the new HTML5 form input types</h3>
<form method="post" action="http://deitel.com">
<p>
<label>color:
<input type="color" />
</label>
</p>
<p>
<label>date:
<input type="date" />
</label>
</p>
<p>
<label>datetime:
<input type="datetime" />
</label>
</p>
<p>
<label>datetime-local:
<input type="datetime-local" />
</label>
</p>
<p>
<label for="email">email:
<input type="email" id="email" />
</label>
</p>
<p>
<label>month:
<input type="month" />
</label>
</p>
<p>
<label>number:
<input type="number" min="-50" max="100" />
</label>
</p>
<p>
<label>range:
<input type="range" min="5" max="10" value="7"/>
</label>
</p>
<p>
<label>search:
<input type="search" />
</label>
</p>
<p>
<label>tel:
<input type="tel" />
</label>
</p>
<p>
<label>time:
<input type="time" />
</label>
</p>
<p>
<label>url:
<input type="url" />
</label>
</p>
<p>
<label>week:
<input type="week" />
</label>
</p>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</form>
</body>
</html>
Input tabindex attribute
tabindex attribute enables controlling
the order of input focus on TABNew HTML5 form attributes
autofocus: applied to input tag,
automatically gives focus to this element
(e.g. user can type immediately)
New HTML5 form attributes
formnovalidate: applied to input tag,
allows a form to bypass validation
novalidate: applied to the form tag,
allows a form to bypass validation
New HTML5 form attributes
placeholder: applied to input tag,
temporary text in an input field
text, search,
url, tel,
emailNew HTML5 form attributes
required: applied to input tag, requires
the user to input the form element
New HTML5 form attributes
pattern: applied to input tag, requires
the input match the specified regular expressionA regular what?
Telephone pattern explained
Pattern:
\(\d{3}\) +\d{3}-\d{4}
Prelimnary note: \ in regex is similar
to & in HTML
/ escapes the special character
Telephone pattern explained
Pattern:
\(\d{3}\) +\d{3}-\d{4}
( has a special meaning in regex,
namely to start saving the matched pattern to a
group (saving a section of the pattern for
later use)
) marks the end of the saved group
You can then reference the group later with
\# where # is the group
number used in the expression you wish to reference
\1Because of this special meaning, we have to escape it
Telephone pattern explained
Pattern:
\(\d{3}\) +\d{3}-\d{4}
\d says we want to look for a digit
([0-9])
d a
special meaning - namely a digit{3} says we want to look for the
previous pattern 3 times (3 digits)
Telephone pattern explained
Pattern:
\(\d{3}\) +\d{3}-\d{4}
"" is a literal space to look for
+ means match the previous pattern 1
or more timesThen, we look for 3 more digits, followed by a
- then 4 more digits
New HTML5 form attributes
autocomplete: added to form or input tag,
allows user to use previously submitted information
when returning to the same form
datalist elementid attribute
adv_new_forms.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Forms in HTML5</title>
</head>
<body>
<h3>Demo of the new HTML5 form input types</h3>
<form method="post" action="http://deitel.com">
<p>
<label>color:
<input type="color"/>
</label>
</p>
<p>
<label>date:
<input type="date" />
</label>
</p>
<p>
<label>email:
<input type="email" placeholder="edmonds_mark@smc.edu" autofocus/>
</label>
</p>
<p>
<label>number:
<input type="number" min="-50" max="100" />
</label>
</p>
<p>
<label>range:
<input type="range" min="5" max="10" value="7"/>
</label>
</p>
<p>
<label>tel:
<input type="tel" pattern = "\(\d{3}\) +\d{3}-\d{4}" placeholder="(###) ###-####" />
</label>
<input type="tel" placeholder="telephone">
</p>
<p>
<label>url:
<input type="url" required />
</label>
</p>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
<h3>Form without validation through form submit input type (formnovalidate)</h3>
<form action="http://deitel.com">
<p>
<label>number:
<input type="number" autofocus />
</label>
</p>
<p>
<label>url:
<input type="url" required />
</label>
</p>
<input type="submit" value="Submit" formnovalidate />
<input type="reset" value="Reset" />
</form>
<h3>Form without validation through form tag (novalidate)</h3>
<form action="http://deitel.com" novalidate autocomplete="on">
<p>
<label>number:
<input type="number" id="num" autofocus />
</label>
</p>
<p>
<label>url:
<input type="url" id="url" required />
</label>
</p>
<p>
<!-- for connects to input with id="pt" for autofocus when parent/child relationship does not exist-->
<label for="pt">
plain text:
</label>
<input type="text" id="pt" required autocomplete="off"/>
</p>
<p>
<label for="month">Month:
<input type="text" id="month" list="months"/>
<datalist id="months">
<option value = "January">
<option value = "February">
<option value = "March">
<option value = "April">
<option value = "May">
<option value = "June">
<option value = "July">
<option value = "August">
<option value = "September">
<option value = "October">
<option value = "November">
<option value = "December">
</datalist>
</label>
</p>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
fig3_17.html<!DOCTYPE html>
<!-- Fig. 3.17: autocomplete.html -->
<!-- New HTML5 form autocomplete attribute and datalist element. -->
<html>
<head>
<meta charset="utf-8">
<title>New HTML5 autocomplete Attribute and datalist Element</title>
</head>
<body>
<h1>Autocomplete and Datalist Demo</h1>
<p>This form demonstrates the new HTML5 autocomplete attribute and the datalist element.
</p>
<!-- turn autocomplete on -->
<form method="post" autocomplete="on">
<p>
<label>First Name:
<input type="text" id="firstName" placeholder="First name" /> (First name)
</label>
</p>
<p>
<label for="lastName">Last Name:
</label>
<input type="text" id="lastName" placeholder="Last name" /> (Last name)
</p>
<p>
<label>Email:
<input type="email" id="email" placeholder="name@domain.com" /> (name@domain.com)
</label>
</p>
<p>
<label for="txtList">Birth Month:
<input type="text" id="txtList" placeholder="Select a month" list="months" />
<datalist id="months">
<option value="January">
<option value="February">
<option value="March">
<option value="April">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
<option value="November">
<option value="December">
</datalist>
</label>
</p>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</p>
</form>
</body>
</html>
header: used to specify the header of the
webpage, but can actually be included multiple times
footer: used to specify the footer of the
webpage, but can actually be included multiple times
time: used to identify a date, a time,
or bothnav: used to group navigational links
figure: describes a figure, used to
group a figcaption and the img
tagfigcaption: provides a caption for the
corresponding figurearticle: specifies independent,
self-contained content
details: provides information about a
specific topicsummary: displays summary of content
inside of a details tag
detailstagsection: provides a section-based
structure to a page; similar toarticle, but more general
id attributes
for internal linkingaside: describes content related to
something, but not critical
meter: shows an amount
range (but is not
input), or a loading bar (but does not animate)mark:highlight enclosed textwbr: controls when to break a word when
text wrapping to the next line
new_elements.html<!DOCTYPE html>
<!-- Fig. 3.18: sectionelements.html -->
<!-- New HTML5 section elements. -->
<html>
<head>
<meta charset="utf-8">
<title>New HTML5 Section Elements</title>
</head>
<body>
<header>
<!-- header element creates a header for the page -->
<img src="deitellogo.jpeg" alt="Deitel logo" />
<h1>Welcome to the Deitel Buzz Online</h1>
<!-- time element inserts a date and/or time -->
<time>2012-01-17</time>
</header>
<section id = "1">
<!-- Begin section 1 -->
<nav>
<!-- nav element groups navigation links -->
<h2> Recent Publications</h2>
<ul>
<li>
<a href = "http://www.deitel.com/books/iw3htp5">Internet & World Wide Web How to Program, 5/e</a>
</li>
<li>
<a href = "http://www.deitel.com/books/androidfp/">Android for Programmers: An App-Driven Approach</a>
</li>
<li>
<a href = "http://www.deitel.com/books/iphonefp">iPhone for Programmers: An App-Driven Approach</a>
</li>
<li>
<a href = "http://www.deitel.com/books/jhtp9/">Java How to Program, 9/e</a>
</li>
<li>
<a href = "http://www.deitel.com/books/cpphtp8/">C++ How to Program, 8/e</a>
</li>
<li><a href = "http://www.deitel.com/books/vcsharp2010htp">Visual C# 2010 How to Program, 4/e</a>
</li>
<li>
<a href = "http://www.deitel.com/books/vb2010htp">Visual Basic 2010 How to Program</a>
</li>
</ul>
</nav>
</section>
<section id = "2">
<!-- Begin section 2 -->
<h2>How to Program Series Books</h2>
<h3><em>Java How to Program, 9/e</em></h3>
<figure>
<!-- figure element describes the image -->
<img src = "jhtp.jpg" alt = "Java How to Program, 9/e" />
<!-- figurecaption element inserts a figure caption -->
<figcaption>
<em>Java How to Program, 9/e</em>cover.
</figcaption>
</figure>
<!--article element represents content from another source -->
<article>
<header>
<h5>From
<em>
<a href = "http://www.deitel.com/books/jhtp9/">Java How to program, 9/e: </a>
</em>
</h5>
</header>
<p>Features include:
<ul>
<!-- mark element highlights text -->
<li>Rich coverage of fundamentals, including <mark>two chapters on control statements.</mark></li>
<li>Focus on <mark>real-world examples.</mark></li>
<li><mark>Making a Difference exercises set.</mark></li>
<li>Early introduction to classes, objects, methods and strings.</li>
<li>Integrated exception handling.</li>
<li>Files, streams and object serialization.</li>
<li>Optional modular sections on language and library features of the new Java SE 7.</li>
<li>Other topics include: Recursion, searching, sorting, generic collections, generics, data structures, applets, multimedia, multithreading, databases/JDBC™, web-app development, web services and an optional ATM Object-Oriented Design case study.</li>
</ul>
<!-- summary element represents a summary for the -->
<!-- content of the details element -->
<details>
<summary>Recent Edition Testimonials</summary>
<ul>
<li>"Updated to reflect the state of the art in Java technologies; its deep and crystal clear explanations make it indispensable. The social-consciousness [Making a Difference] exercises are something really new and refreshing." <strong>—José Antonio González Seco, Parliament of Andalusia</strong></li>
<li>"Gives new programmers the benefit of the wisdom derived from many years of software development experience."<strong> —Edward F. Gehringer, North Carolina State University</strong></li>
<li>"Introduces good design practices and methodologies right from the beginning. An excellent starting point for developing high-quality robust Java applications." <strong>—Simon Ritter, Oracle Corporation</strong></li>
<li>"An easy-to-read conversational style. Clear code examples propel readers to become proficient in Java." <strong>—Patty Kraft, San Diego State University</strong></li>
<li>"A great textbook with a myriad of examples from various application domains— excellent for a typical CS1 or CS2 course." <strong>—William E. Duncan, Louisiana State University</strong></li>
</ul>
</details>
</p>
</article>
<!-- aside element represents content in a sidebar that's -->
<!-- related to the content around the element -->
<aside>
The aside element is not formatted by the browsers.
</aside>
<h2>Deitel Developer Series Books</h2>
<h3><em>Android for Programmers: An App-Driven Approach</em></h3>
Click <a href = "http://www.deitel.com/books/androidfp/">here</a> for more information or to order this book.
<h2>LiveLessons Videos</h2>
<h3><em>C# 2010 Fundamentals LiveLessons</em></h3>
Click <a href = "http://www.deitel.com/Books/LiveLessons/">here</a> for more information about our LiveLessons videos.
</section>
<section id = "3"> <!-- Begin section 3 -->
<h2>Results from our Facebook Survey</h2>
<p>If you were a nonprogrammer about to learn Java for the first time, would you prefer a course that taught Java in the context of Android app development? Here are the results from our survey:</p>
<!-- meter element represents a scale within a range -->
0 <meter min = "0" max = "54" value = "14"></meter> 54
<p>Of the 54 responders, 14 (green) would prefer to learn Java in the context of An<wbr>droid app development.</p>
</section>
<!-- footer element represents a footer to a section or page, -->
<!-- usually containing information such as author name, -->
<!-- copyright, etc. -->
<footer>
<!-- wbr element indicates the appropriate place to break a -->
<!-- word when the text wraps -->
<h6>© 1992-2012 by Deitel & Associ<wbr>ates, Inc. All Rights Reserved.<h6>
<!-- address element represents contact information for a -->
<!-- document or the nearest body element or article -->
<address>
Contact us at <a href = "mailto:deitel@deitel.com">deitel@deitel.com</a>
</address>
</footer>
</body>
</html>
Remember, these are general guidelines. HTML is a like a toolbox; you are free to use them as you see fit.
A hammer is better at nailing than a saw. In general, it's best to stick to the convention.
Video
controls attribute (no
arguments/assignment) allows you to add video control
buttons, such as play, pause, volumeheightand width can be
added to control the size of the videomutedwill start the video initially
mutedloop will determine whether or not the
video should loop after finishingVideo
autoplaywill start the video as soon as
it loadsvideo tag is dissimilar from the
img tag
img tag) or you can specify multiple
source tagssource tags specify a video file and a
type
video tag can have multiple
source tags; the browser will play
the first type supported.video tag will be
displayed.Audio
height and width
attributecontrols, autoplay,
loop, muted are all the
sameaudio.html<h3>Audio with single source</h3>
<audio src="track.mp3" width="320" height="240" controls>
<h3>Audio with multiple sources</h3>
<audio width="320" height="240" controls>
<source src="track.mp3" type="audio/mp3">
<source src="track.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Canvas
canvas: allows you to draw 2D and 3D
drawings on the screen