This is the P2PU Archive. If you want the current site, go to www.p2pu.org!
HTML5
My recent threads
You haven't posted any discussions yet.
Recently updated threads
- Week 4 - Drag&Drop Sun, 2010-10-17 18:17
- HTML5 Resources Wed, 2010-10-13 22:07
- Two Vids From Google IO 2010 On HTML5 and Chrome Tue, 2010-10-12 15:51
- Week 3 - Forms Sun, 2010-10-10 13:19
- HTML5 Mobile Web Development Tue, 2010-10-05 22:17
Week 3 - Forms
Go back to: General discussion
Please use this topic to post specific resources and questions regarding HTML5 Forms.
What about the ol' good diveintohtml5?
http://diveintohtml5.org/forms.html
I would like to suggest that people take a look at this web site which may be an ideal way to *collaborate* on creating live web pages to test out various HTML5 features:
http://www.editme.com/
It is a commercial site but they have a 30 day free trial. When used in conjunction with an HTML5 enabled browser (Opera perhaps) it will give us the ability to test out HTML5 features we create while allowing *collaborative* editing, version control, commenting etc. Although the site is primarily intended for WYSIWYG editing, if you edit your pages in *HTML* mode it will _largely_ preserve your code as you typed it. It also appears to allow the insertion of javascript and css - in other words it does not appear to limit the HTML code you can insert. The only thing we would not be able to do is submit forms to a server as I don't think they support any form processing or backend database (this isn't needed to learn HTML5 features anyway).
I would suggest you try it out if your are interested and perhaps in a few days as we explore the capabilities we could arrange for a single application with all members having access to it.
I also look at using jottit.com for this purpose but it does not allow javascript to be inserted and its primary mode of input is a wiki styled markup language. This application is particularly attractive because registration and usage is dead simple and it appears to offer features ideal for collaborative work. If you find any shortcomings to editme or if you know of other tools for collaborative work please share that info.
I think this application is pretty sweet for this course.
I just created this application during lunch attempting to create a form with all 13 of the new types:
http://html5.editme.com/
Several of the HTML5 form features did not work in the browsers I have installed but I had the most success with Opera ver 10.6.
It takes a little time to get used to editme.com but it has some very nice features including code editor, simply security model, complete version control, commenting and some wiki-like constructs for placing menus and navigational elements on the page. You have full control of javascript and css. This really is an ideal platform for this course. I suggest you play with it and once you get a basic handle using it that we start collaborating on HTML5 form creation and other topics in the course. Feel free to add a comment to may page as I made application viewable and commentable to the public.
BTW, I apologize for the triplicate emails I cause to be sent - apparently if you go back and edit your grammar or spelling p2pu sends out a new blast of emails.
Hi Dan
Editme looks great and I checked out the form.
Very good idea!
I added the latest changes from Pablo to my repository and added a form.html with first tests using the input field with type email, url and attributes like placeholder and autofocus.
What I can see so far is:
Input element, "placeholder" and "autofocus" attributes are not supported in IE9 Beta, Opera 10.62
Input type "email": no validation of entered email address in IE9 Beta. Opera 10.62 actually does a validation and gives a detailed error message. Actually all browsers send empty value in email field.
Input type "url": no validation in IE9 Beta, Safari 5.0.2 or Firefox 4.0 Beta3
AFAIK only firefox 4+ has support for those fields/attributes in forms. Firefox 3.6.10 no :(
Added a number field with some javascript controls. The controls only work in Chrome 6 and Safari 5, although Safari does not show the spin controls.
IE9 gets nothing of it...
The range input element (slider) works in Safari 5, Chrome 6 and Opera 10.62. Firefox 4 Beta3 and Internet Explorer 9 display a standard text input.
The slide itself does not seem very useful to me when relying on the standard implementation of the browser. The user can change the value but does not see what he changes. So you need to add a field to display the resulting value using JavaScript. The slider uses numbers as the spinbox, too. Adding a mapping array for number=>string helps to understand the selected value better.
I added an example to the form.html.
Adding the date input field the only update on what Dan posted in his example form, we see that Firefox 4 Beta3 displays a spinbox with the first date being 1582-10-15 (!?).
HTML5 defines for forms the methods GET, POST, PUT and DELETE. The last two were not implemented so far by the browser vendors, but regarding RESTful applications, they are very useful.
http://www.w3.org/TR/html5/association-of-controls-and-forms.html#form-s...
http://www.artima.com/lejava/articles/why_put_and_delete.html