Web Forms 2.0
-
Upload
lars-trieloff -
Category
Technology
-
view
4.996 -
download
0
description
Transcript of Web Forms 2.0
![Page 1: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/1.jpg)
Web Forms 2.0, REST & AJAXCreating RESTful Web Applications with AJAX and Web Forms 2.0
Lars Trieloff
Day Software
4580
![Page 2: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/2.jpg)
2
AGENDA
> Introduction
> Reminder: what is REST?
> Reminder: what is AJAX?
> Creating Web Applications with Web Forms 2.0
> Wrap-Up
![Page 3: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/3.jpg)
3
Hello, my name is Lars Trieloff
> Product Manager Collaboration and Digital Asset Management
> With Day since November 2007
> Background:
– Open Source Software Development
– Collaboration Software
– Technical Documentation (DocBook)
– Blogging
– IT Systems Engineering
![Page 4: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/4.jpg)
> Day Software AG from Basel, Switzerland
> Products: CRX Content Repository, Communiqué Web Content Management, Digital Asset Management and Collaboration
> Open Source and Standards: JSR-170, JSR-283 (Java Content Repository), Apache Jackrabbit, Apache Sling, and many more
4
and I work for Day Software
![Page 5: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/5.jpg)
REST
5
photo: bblfish
![Page 6: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/6.jpg)
Representational State Transfer
> Architectural Style for Networked Applications
– you cannot download it, you have to understand it
> Most prominent example: the World Wide Web
– but not every web application adheres to the REST principles
> Client-Server-Model
– Web Server and Web Browser
> Application state is enclosed in Resources
– only in Resources: no server-side sessions, no per-client server-side state
> Clients exchange Representations with the Server
– Clients manage their own state, if necessary
> Hypermedia as the engine of application state
– each Resource describes possible state transitions in Hypertext
6
![Page 7: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/7.jpg)
Resources have multiple Representations
7
Resource
URI
Representation Representation
Representation
![Page 8: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/8.jpg)
Four Simple Methods of Interaction
8
ResourceGET DELETE
PUT
POST
![Page 9: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/9.jpg)
Retrieve a Representation
9
GET
GET is a safe method, it cannot have any side effects.
Reality Check: Web Applications exposing operations such as “create item”, “delete item”, “start process” as hyperlinks (and thus as GET requests) violate HTTP principles and cause problems with Caches, Spiders, Robots, etc.
![Page 10: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/10.jpg)
Update or Create a Resource
10
PUT
PUT is an idempotent method, this means repeating the same PUT request multiple times always yields the same
result.
Reality Check: PUT is used infrequently due to lack of understanding and browser support, but it is the ideal mapping for actions such as “create new blog entry” or “update personal profile”
![Page 11: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/11.jpg)
Delete a Resource
11
DELETE
DELETE is an idempotent method, this means repeating the same DELETE
request multiple times always yields the same result.
Reality Check: DELETE is used infrequently due to lack of understanding and browser support, but it is the ideal mapping for actions such as “delete wiki page” or “remove item from shopping list”
![Page 12: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/12.jpg)
Invoke custom actions on a Resource
12
POST
POST is neither safe nor idempotent, and it can have side-effects of any kind.
Reality Check: POST is used for everything on the web, this causes problems, for example when POSTing an “place order” request instead of PUTting it multiple times. For operations with clear semantics, the most constrained method should be used.
![Page 13: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/13.jpg)
13
![Page 14: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/14.jpg)
13
Today’s web applications may have REST APIs, but only a few of them are really
RESTful, using Resources,
Representations, URIs and Methods properly.
Why? Because it is hard to do.
![Page 15: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/15.jpg)
14
![Page 16: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/16.jpg)
14
Good news: We can fix the problem at the client side where they appear. This keeps our server-
side code clear and client-independent.
How? Using AJAX.
![Page 17: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/17.jpg)
How to fix the client with AJAX
> Your client does not support other Representations (XML, JSON) out of the box?
– use XMLHttpRequest and evaluate the result
> Your client does not allow setting of HTTP Headers for accessing resources?
– use XMLHttpRequest
> Your client does not save client-side state
– do not reload the page, use XMLHttpRequest to build a virtual browser
– use Google Gears or HTML5 Storage
– use the Dojo Offline Toolkit
> Your client does cannot draw advanced control widgets
– use the Javascript DOM
– use widget Libraries: Dojo, Ext, YUI
15
![Page 18: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/18.jpg)
16
Javascript DOM and AJAX are medicine for the browser
![Page 19: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/19.jpg)
17
Connecting the Dots with Web Forms 2.0
> What are Web Forms 2.0
> What are the limitations of Web Forms 1.0
> Extensions to Form Elements
> Repetitions in Web Forms
> Extensions to the DOM and Event model
> Using Web Forms 2.0
![Page 20: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/20.jpg)
What are Web Forms 2.0
> An extension of the Forms module of HTML 4.0.1 or XHTML 1.1
– designed to fix some of the shortcomings of HTML Forms
> Specified by WHATWG with WC3
– Web Hypertext Application Technology Working Group
(Apple, Mozilla, Opera and others)
– W3C HTML Working Group
> Specification is “stable” and awaiting implementations
– but we do not have to wait so long
> There is nothing in Web Forms 2.0 that you could not do with Javascript DOM and AJAX, but Web Forms 2.0 are going to be the standard for that. This means less work to do for you.
18
![Page 21: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/21.jpg)
Why do we need Web Forms 2.0
Web Forms 1.0 are lacking some important features:
> They only allow GET and POST as request methods
– limiting the ability to build RESTful forms
> They do not specify how to deal with multiple input fields
> They have no built-in data types
> They have no built-in validation mechanisms
> They have to built-in way with dealing with repeated elements
19
![Page 22: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/22.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 23: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/23.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 24: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/24.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 25: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/25.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 26: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/26.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 27: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/27.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 28: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/28.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 29: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/29.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 30: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/30.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 31: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/31.jpg)
<form method="PUT" action="/meetings/mymeeting"
replace="values">
<label>E-mail address:
<input type="email" name="addr" required="requir
ed">
</label>
<label>Start date:
<input type="date" name="start" autocomplete="on
">
</label>
<label>Meeting time:
<input type="time" min="09:00" max="17:00" name=
"mt">
</label>
</form>
Web Forms 2.0 by Example
20
![Page 32: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/32.jpg)
New Input Types <input type=”...”>
21
submit
reset
hidden
password
checkbox
radio
file
image
button
datetime, date
datetime-local
month
week
time
number
range
url
![Page 33: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/33.jpg)
<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>
Built-in Validation
22
![Page 34: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/34.jpg)
<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>
Built-in Validation
22
![Page 35: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/35.jpg)
<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>
Built-in Validation
22
![Page 36: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/36.jpg)
<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>
Built-in Validation
22
![Page 37: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/37.jpg)
<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>
Built-in Validation
22
![Page 38: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/38.jpg)
<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>
Built-in Validation
22
![Page 39: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/39.jpg)
<input type="number" min="10"><input type="range" min="10" max="100" step="10"><input type="text" pattern="[A-Z][a-z]+"><textarea maxlength="140" oninvalid="alert('Make it short, this is twitter');return false"></textarea>
Built-in Validation
22
![Page 40: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/40.jpg)
<form data="example.xml"> Hello, <output name="hello">!</form>
23
Fetching Data
![Page 41: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/41.jpg)
<form data="example.xml"> Hello, <output name="hello">!</form>
<formdata xmlns="http://n.whatwg.org/formdata">
<field name="hello">World</field>
</formdata>
23
Fetching Data
+
![Page 42: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/42.jpg)
<form data="example.xml"> Hello, <output name="hello">!</form>
<formdata xmlns="http://n.whatwg.org/formdata">
<field name="hello">World</field>
</formdata>
23
Fetching Data
Hello, World!
+=
![Page 43: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/43.jpg)
<form data="example.xml"> Hello, <output name="hello">!</form>
<formdata xmlns="http://n.whatwg.org/formdata">
<field name="hello">World</field>
</formdata>
23
Fetching Data
Hello, World!
+=this w
orks for all
form data,
including selection
list, etc
![Page 44: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/44.jpg)
<form data="example.xml"> Hello, <output name="hello">!</form>
<formdata xmlns="http://n.whatwg.org/formdata">
<field name="hello">World</field>
</formdata>
23
Fetching Data
Hello, World!
+=this w
orks for all
form data,
including selection
list, etc
forms can use this encoding (application/x-
www-form+xml) to submit data
![Page 45: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/45.jpg)
24
Repeater Model
<html>
<head>
<title>Sample Order Form</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
</tbody>
<tr id="order" repeat="template" re
peat-start="3">
<td><input type="text" name="row[o
rder].product" value=""></td>
<td><input type="text" name="row[o
rder].quantity" value="1"></td>
<td><button type="remove">Remove T
his Row</button></td>
</tr>
</tbody>
</table>
<p><button type="add" template="order
">Add Row</button></p>
<p><button type="submit">Submit</butt
on></p>
</form>
</body>
</html>
![Page 46: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/46.jpg)
24
Repeater Model
<html>
<head>
<title>Sample Order Form</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
</tbody>
<tr id="order" repeat="template" re
peat-start="3">
<td><input type="text" name="row[o
rder].product" value=""></td>
<td><input type="text" name="row[o
rder].quantity" value="1"></td>
<td><button type="remove">Remove T
his Row</button></td>
</tr>
</tbody>
</table>
<p><button type="add" template="order
">Add Row</button></p>
<p><button type="submit">Submit</butt
on></p>
</form>
</body>
</html>
![Page 47: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/47.jpg)
24
Repeater Model
<html>
<head>
<title>Sample Order Form</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
</tbody>
<tr id="order" repeat="template" re
peat-start="3">
<td><input type="text" name="row[o
rder].product" value=""></td>
<td><input type="text" name="row[o
rder].quantity" value="1"></td>
<td><button type="remove">Remove T
his Row</button></td>
</tr>
</tbody>
</table>
<p><button type="add" template="order
">Add Row</button></p>
<p><button type="submit">Submit</butt
on></p>
</form>
</body>
</html>
![Page 48: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/48.jpg)
24
Repeater Model
<html>
<head>
<title>Sample Order Form</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
</tbody>
<tr id="order" repeat="template" re
peat-start="3">
<td><input type="text" name="row[o
rder].product" value=""></td>
<td><input type="text" name="row[o
rder].quantity" value="1"></td>
<td><button type="remove">Remove T
his Row</button></td>
</tr>
</tbody>
</table>
<p><button type="add" template="order
">Add Row</button></p>
<p><button type="submit">Submit</butt
on></p>
</form>
</body>
</html>
![Page 49: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/49.jpg)
24
Repeater Model
<html>
<head>
<title>Sample Order Form</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
</tbody>
<tr id="order" repeat="template" re
peat-start="3">
<td><input type="text" name="row[o
rder].product" value=""></td>
<td><input type="text" name="row[o
rder].quantity" value="1"></td>
<td><button type="remove">Remove T
his Row</button></td>
</tr>
</tbody>
</table>
<p><button type="add" template="order
">Add Row</button></p>
<p><button type="submit">Submit</butt
on></p>
</form>
</body>
</html>
![Page 50: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/50.jpg)
24
Repeater Model
<html>
<head>
<title>Sample Order Form</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
</tbody>
<tr id="order" repeat="template" re
peat-start="3">
<td><input type="text" name="row[o
rder].product" value=""></td>
<td><input type="text" name="row[o
rder].quantity" value="1"></td>
<td><button type="remove">Remove T
his Row</button></td>
</tr>
</tbody>
</table>
<p><button type="add" template="order
">Add Row</button></p>
<p><button type="submit">Submit</butt
on></p>
</form>
</body>
</html>
![Page 51: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/51.jpg)
24
Repeater Model
<html>
<head>
<title>Sample Order Form</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
</thead>
</tbody>
<tr id="order" repeat="template" re
peat-start="3">
<td><input type="text" name="row[o
rder].product" value=""></td>
<td><input type="text" name="row[o
rder].quantity" value="1"></td>
<td><button type="remove">Remove T
his Row</button></td>
</tr>
</tbody>
</table>
<p><button type="add" template="order
">Add Row</button></p>
<p><button type="submit">Submit</butt
on></p>
</form>
</body>
</html>
![Page 52: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/52.jpg)
DOM and Event Model Updates
25
DOM Updates
DOMImplementation. hasFeature( “WebForms”,”2.0”) ==true
All other DOM Interfaces reflect the new elements, attributes and attribute values.
Event Model Updates
<form onformchange=”…”>
<input onformchange=”…”>
<output onformchange=”…”>
<form onforminput=”…”>
<input onforminput=”…”>
<output onforminput=”…”>
<form oninvalid=”…”>
<input oninvalid=”…”>
<select oninvalid=”…”>
<textarea oninvalid=”…”>
![Page 53: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/53.jpg)
Getting Started
26
![Page 54: Web Forms 2.0](https://reader033.fdocuments.us/reader033/viewer/2022052822/554d13e1b4c905805d8b51a2/html5/thumbnails/54.jpg)
27
References
> REST: http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm
> HTTP: ftp://ftp.isi.edu/in-notes/rfc2616.txt
> Web Forms 2.0: http://www.whatwg.org/specs/web-forms/current-work/
> Javascript Implementation: http://code.google.com/p/webforms2/
> Dojo Toolkit: http://dojotoolkit.org/
> Ext JS: http://extjs.com/
> YUI: http://developer.yahoo.com/yui/
> Opera: http://www.opera.com/products/desktop/next/
> Apache Sling: http://incubator.apache.org/sling/site/index.html
> FF3 Native File Upload: http://soakedandsoaped.com/articles/read/firefox-3-native-ajax-file-upload