HTML 5 Forms
HTML 5
HTML5 will be the new standard for HTML, XHTML,
and the HTML DOM (document object model).
The previous version of HTML came in 1999. The web
has changed a lot since then.
HTML5 is still a work in progress, but most modern
browsers have some HTML5 support.
How is it different from HTML5 ?
Some rules for HTML5 were established:
> New features should be based on HTML,
CSS, DOM, and JavaScript
> Reduce the need for external plugins
> Better error handling
> More markup to replace scripting
> HTML5 should be device independent
> Dev process should be visible to the public
HTML5: New Features
> Canvas element for drawing
>Video/audio elements for media playback
> Better support for local offline storage
> New content specific elements, like article,footer, header,
nav, section
> New form controls, like calendar, date, time, email, url,
search
HTML5: Simplification of code
Markup version
HTML4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd>
HTML5
<!DOCTYPE html>
Metadata <meta http-equiv="content-type"
HTML4 content="text/html; charset=UTF-8" />
HTML5
<meta charset=''utf-8''/>
Dropped Tags
basefont, big, center, font, strike, tt
acronym, applet, isindex
frame, frameset, noframes
New Tags for Page Layout
Today, if we wanted to markup a layout for a
web page, we would use a lot of <div> tags to
specify the different sections of the page.
HTML5 introduces a set of new tags
specifically for layout.
7
HTML 4: Structure
No semantics in layout
<div id=“header”>
<div class=“post”>
<div
id=“sidebar”>
<div class=“post”>
<div id=“footer”>
HTML5: Semantic markup
<header”>
<section>
<header>
<nav> <article> <aside>
<footer>
<header”>
10
11
HTML 5
Elements like <header> and <footer> are not meant
to be only at the top and bottom of the page.
<header> and <footer> may be for each document
section
Not very different from <div> tag, but are more
semantically well-defined in the document
structure
Better layout structure → new structural elements
<section> <header> <nav> <article>
<aside> <footer>
12
13
14
HTML5: Semantic elements example
<header>
<nav>
<aside>
<section>
<footer>
HTML 5
<mark>
For text that should be highlighted
<nav>
For a section of navigation
<section>
For a section in a document (e.g. chapters, headers, footers)
<wbr>
Word break. For defining an appropriate place to break a long
word or sentence
Other tags
<command>, <datalist>, <details>, <progress>, etc.
16
4. Forms
HTML5 not only makes marking up forms easier on the
developer, it’s also better for the user.
With client-side validation being handled natively by the
browser, there will be greater consistency across different
sites, and many pages will load faster without all that
redundant JavaScript.
Lets look at
HTML5 Form Attributes
HTML5 Input Types
HTML5 Form Elements
HTML Forms
Forms are the primary method for gathering data from site
visitors
Create a form block with
<form></form> The “method" attribute tells how
Example: the form data should be sent – via
GET or POST request
<form name="myForm" method="post"
action="path/to/some-
action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent 18
The <form> tag
The <form arguments> ... </form> tag encloses form elements (and probably
other HTML as well)
The arguments to form tell what to do with the user input
action="url"(required)
Specifies where to send the data when the Submit button is clicked
method="get" (default)
Form data is sent as a URL with ?form_data info appended to the end
Can be used only if data is all ASCII and not more than 100 characters
method="post"
Form data is sent in the body of the URL request
Cannot be bookmarked by most browsers
target="target"
Tells where to open the page sent as a result of the request
target= _blank means open in a new window
target= _top means use the same window
19
HTML 5 Forms
Form and Form Element attributes
autofocus – Receive the focus when the page loads
autocomplete – indicates that this element’s value may be remembered
for future entries
novalidate, formnovalidate – indicates that the browser should not
validate the form (used on the form) The novalidate attribute is a
boolean attribute.
pattern – Restrict the input of the field to match a regular expression
pattern
required – mandatory field
placeholder – specifies text that appears in the element until the user
enters an actual value
Note: The formnovalidate attribute can be used with type="submit".
When autocomplete is on, the browser automatically complete values
based on values that the user has entered before.
The <input> tag
Most, but not all, form elements use the input tag, with
a type="..." argument to tell which kind of element it is
type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
Other common input tag arguments include:
name: the name of the element
value: the “value” of the element; used in different ways for
different values of type
readonly: the value cannot be changed
disabled: the user can’t do anything with this element
Other arguments are defined for the input tag but have
meaning only for certain values of type.
21
HTML5: Input types
HTML5 has several new input types for forms.
> email
> url
> tel
> number
> range
> date pickers (date, month, week, time,
datetime, datetime-local)
> search
> color
HTML5: Input types
Note: Opera has the best support for the new input types.
If other browsers are not supported, they will behave as
regular text fields.
Text input
A text field:
<input type="text" name="textfield" value=“initial value“ size=“15”>
A multi-line text field
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret">
24
Labels
Form labels are used to associate an explanatory text
to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
Clicking on a label focuses its associated field
(checkboxes are toggled, radio buttons are checked)
Labels are both a usability and accessibility feature
and are required in order to pass accessibility
validation.
25
Hidden / File fields
<input type="hidden" name="hiddenField" value="nyah">
• type="file"
– provides a file dialogue box to specify a file that is sent
to the server
What good is this?
All input fields are sent back to the server, including hidden
fields
This is a way to include information that the user doesn’t need
to see (or that you don’t want her to see)
The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted
26
Checkboxes
A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>
type: "checkbox"
name: used to reference this form element from JavaScript
value: value to be returned when element is checked
Note that there is no text associated with the checkbox—you
have to supply text in the surrounding HTML
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" /> 27
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female
If two or more radio buttons have the same name, the user can
only select one of them at a time
This is how you make a radio button “group”
If you ask for the value of that name, you will get the value
specified for the selected radio button
As with checkboxes, radio buttons do not contain any text 28
Fieldsets
Fieldsets are used to enclose a group of related form fields
The <legend> is the fieldset's title.
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40
cols="40"" rows="10
rows="10""
id="Remarks"></textarea>
</fieldset>
</form>
29
HTML5: Input - e-mail
The email type is used for input fields that should
contain an e-mail address.
It supports the Boolean multiple attribute, allowing
for multiple, comma-separated email addresses.
The value of the email field is automatically
validated when the form is submitted.
E-mail: <input type="email" name="user_email" />
HTML5: Input - url
The url type is used for input fields that should contain a URL
address.
The value of the url field is automatically validated when the
form is submitted.
Homepage: <input type="url" name="user_url" />
HTML5: Input - number
The number type is used for input fields that should contain a
numeric value.
Set restrictions on what numbers are accepted:
Points: <input type="number" name="points"
min="1" max="10" />
HTML5: Input - range
The range type is used for input fields that should contain a value
from a range of numbers.
The range type is displayed as a slider bar.
You can also set restrictions on what numbers are accepted:
<label for="rating">On a scale of 1 to 10, knowledge of
HTML5 is: </label>
<input type="range" min="1" max="10" name="rating"
type="range">
HTML5: Input – date pickers
HTML5 has several new input types for selecting date and time:
> date - Selects date, month and year
> month - Selects month and year
> week - Selects week and year
> time - Selects time (hour and minute)
> datetime - Selects time, date, month and year
> datetime-local - Selects time, date, month and
year (local time)
HTML5: Input - search
The search type is used for search fields like a site
search or Google search.
The search field behaves like a regular text field.
Search type is only supported in Chrome, Opera, and
safari.
Search Google:
<input type="search“ name="googlesearch" />
HTML5: Input – color picker
The color type is used for input fields that should contain a
color.
This input type will allow you to select a color from a color
picker:
Color: <input type="color" name="user_color" />
HTML5: Input - form
HTML5 has several new elements and attributes for
forms.
> datalist
• Datalists are currently only supported in Firefox and
Opera, but they are very cool.
• They fulfill a common requirement: a text field with a set
of predefined autocomplete options.
<datalist id=“dept”>
<option value=“comp”>comp</option>
<option value=“inft”>inft</option>
<option value=“extc”>extc</option>
</datalist>
Forms – Input Attributes
<input> readonly Attribute
The readonly attribute is similar to the disabled attribute:
it makes it impossible for the user to edit the form field.
Unlike disabled, however, the field can receive focus, and
its value is submitted with the form.
Forms – Input Attributes
<input> multiple Attribute
The multiple attribute, if present, indicates that multiple
values can be entered in a form control.
In HTML5, it can be added to email and file input types as
well.
At the time of writing, multiple file input is only
supported in Chrome, opera, and Firefox.
Select images:
<input type="file" name="img“ multiple="multiple" />
Forms – Input Types : tel
For telephone numbers, use the tel input type (type="tel").
Unlike the url and email types, the tel type doesn’t enforce a
particular syntax or pattern.
Letters and numbers—indeed, any characters other than new
lines or carriage returns—are valid.
Telephone: <input type="tel" name="usrtel" />
Forms – keygen <input type>
The purpose of the <keygen> element is to provide a secure way to
authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one private and
one public.
The private key is stored locally, and the public key is sent to the
server. The public key could be used to generate a client certificate to
authenticate the user in the future.
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
HTML5: New form elements
<input> types some examples
<input type="datetime">
<input type="number" min="18" max="65" step="1">
<input type="range" min="18" max="65" step="10">
HTML5: Audio
<!DOCTYPE HTML>
<html>
<body>
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML5: Audio
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
HTML5: Video
<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg" width="320" height="240"
controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML5: Video
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<video>
Attributes: autoplay, controls, loop, height, width,
src
The <source> element is used when you want to
upload multiple audio or video elements.
figure Element
Allows for associating captions with embedded content,
including images, audio or videos.
<figure>
Image, audio, video, etc.
<figcaption>
48
New features include:
Semantic elements: header, footer, section, article, others.
canvas for drawing
paths of rectangles, arcs, lines, images
mouse events
localStorage (variation of cookies)
audio & video elements
including drawing video on canvas
Drawing
Canvas element
Screen geometry: upper left corner is origin.
stroke versus fill
draw Rectangles
http://faculty.purchase.edu/jeanine.meyer/html5workshop
/wkshopdrawing0.html
500,0,default color,20 by
0,0, default color, 10 by
20, fill
10, stroke
0,300,green,30 by 30, stroke
500,300, 50 by 50, fill rgb(200,0,100)
<!DOCTYPE html>
<html lang="en"><head><title>Four rectangles</title>
<meta charset="UTF-8"><script>
var ctx;
function init() {
ctx =
document.getElementById('canvas').getContext('2d');
ctx.lineWidth = 2;
ctx.strokeRect(0,0,10,10);
ctx.fillRect(500,0,20,20);
ctx.strokeStyle = "green";
ctx.fillStyle = "rgb(200,0,100)";
ctx.strokeRect(0,300,30,30);
ctx.fillRect(500,300,50,50); }
</script> </head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400"> Your
browser doesn't support the HTML5 element
canvas.</canvas>
</body>
</html>
HTMl 5 : New Elements
53
54
HTML5: Detection
[Modernizr] is an open source, MIT-licensed JavaScript library
that detects support for many HTML5 & CSS3 features. To use
it, include the following <script> element at the top of your
page...
HTML5: Detection
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 sure is fun</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
