This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Forms (and Html5)


Forms are a webpage staple and you will have quite a bit of that in the Challenge assignments; having said that, new developments such as html5 and css3 are going to have quite an effect on Javascript usage in this area.

Although browser support (particularly IE, even 9) isn't quite 100% as of now so you will still have to fallback on Javascript for full compatibility, Firefox 4, for example has support provided for HTML5 forms among other things. Support for the newer markup elements and attributes will significantly decrease the JavaScript code you’ll have to write to provide equivalent functionality. Think easier validation — your form elements will require zero JavaScript to glue the validation rules to it.

Also there exist Javascript libraries (to be discussed next week) that allow you to use html5/css3 in such a way that it degrades nicely for older or non-supporting browsers so it is worth paying some attention to these newer technologies right now.

So Javascript usage in this area at least is going to theoretically become redundant at some point but it is still worthwhile to see how it is used in a direct way since this will help you when it comes to using it in other less direct ways and even outside of thew webpage altogether!

http://www.w3.org/TR/html5-diff/  for an official status on html5 and differences to html4. From section 3.1:
The input element's type attribute now has the following new values:

in addition to

button, checkbox, file, hidden, image, password, radio, reset, submit, text,

as provided in html4.

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

http://dev.w3.org/html5/spec/Overview.html#forms  for stuff related to forms in particular; the input element has as well additional new attributes.The new attributes and input types make client-side form validation much simpler and without the need for Javascript.

For example the required attribute to indicate that the form is not to be submitted until a value is given. By adding this attribute to the customer name and delivery time fields, we allow the user agent to notify the user when the user submits the form without filling in those fields.

http://caniuse.com/  is a convenient always updated reference for what html5/css3 you can use in what environment.

-----------

Now is probably as good a time as any to start thinking about the Javascript Challenges so head over to http://en.wikiversity.org/wiki/Web_Design/JavaScript_Challenges and have a look at Challenge 1.

See if you can do Challenge 1 with the Javascript on the page, then see if you can do it with the Javascript in a separate file. Try it in JS Bin (or jsFiddle). If you have an online presence, test it out there as well.

Step2 of Challenge 1 talks about adding an event to the checkbox so you could just use an onclick to call your function; better is to try and include some Javascript in an external file to achieve the desired effect. Give some thought to both methods and try to think of reasons why the external file method is better. Also think about what happens if a user has disabled javascript in the browser.

Find two examples of html5 forms on the internet that make use of several of the new attributes described above.

Write Javascript in such a way as to try and reproduce these effects.

Task Discussion