, , to group related form controls and add structure. - Browsers can now perform built-in form validation without JavaScript by leveraging new attributes like required, pattern, and more. - HTML5 simplifies markup for forms and removes deprecated tags to clean up code and semantics. Overall, HTML5 aims to make forms more usable, consistent,">, , to group related form controls and add structure. - Browsers can now perform built-in form validation without JavaScript by leveraging new attributes like required, pattern, and more. - HTML5 simplifies markup for forms and removes deprecated tags to clean up code and semantics. Overall, HTML5 aims to make forms more usable, consistent,">
[go: up one dir, main page]
Scribd
Upload
71 views56 pages

WT Chap2 HTML5 Forms

HTML5 introduces new form controls and validation features to simplify creating forms and improve the user experience. Some key points: - HTML5 adds several new input types like email, url, number, and date pickers to make it easier for browsers to validate user input. - HTML5 introduces new semantic form elements like <fieldset>, <legend>, <output> to group related form controls and add structure. - Browsers can now perform built-in form validation without JavaScript by leveraging new attributes like required, pattern, and more. - HTML5 simplifies markup for forms and removes deprecated tags to clean up code and semantics. Overall, HTML5 aims to make forms more usable, consistent,

Uploaded by

Brandon Stark
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
71 views56 pages

WT Chap2 HTML5 Forms

HTML5 introduces new form controls and validation features to simplify creating forms and improve the user experience. Some key points: - HTML5 adds several new input types like email, url, number, and date pickers to make it easier for browsers to validate user input. - HTML5 introduces new semantic form elements like <fieldset>, <legend>, <output> to group related form controls and add structure. - Browsers can now perform built-in form validation without JavaScript by leveraging new attributes like required, pattern, and more. - HTML5 simplifies markup for forms and removes deprecated tags to clean up code and semantics. Overall, HTML5 aims to make forms more usable, consistent,

Uploaded by

Brandon Stark
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

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>

You might also like