HTML5 took all this into account and now provides:
- A new set of input fields that include a validation API and visual feedback, contextualized keyboards, etc. Of course the look and feel depends on the web browser’s implementations, but the HTML5 forms specification introduced 13 new <input type=…/> fields: email, tel, color, url, date, datetime, datetime-local, month, week, time, range, number and search.
- Other goodies, such as the option to set an input field out of a <form>, new elements such as<datalist> for autocompletion, <output> for feedback, etc.
Examples of contextual keyboards; they differ depending on the type of <input> fields in the <form>. In the example we can see: email, URL, and phone number.
HTML5 form examples
In this section, we will show you what can be achieved with recent HTML5 additions for forms. Try the examples, enter erroneous values, submit the forms, and see what happens.
There is a lot of course content covered this week, and before we get into all the details of the elements and attributes introduced by HTML5 we suggest playing with running examples of full featured forms.
These examples are creations by students from a previous version of this course, when it was hosted at the w3devcampus.com Web site (the W3C e-learning platform). They are given “as is”. They use the geolocation API that will be presented in Week 6 for auto-filling the address input fields. This part will be explained next week.
Feel free to look at the source code, and do not hesitate to ask questions in the forum if you need explanations.
Using input elements for a Web application GUI
This page’s video shows that input elements, in particular the new elements introduced by HTML5, can be used as widgets to control the behavior of a Web application. In this situation, they do not need to be inside a <form> element. We just bind event listeners to them and we use them as client-side widgets.
EXAMPLE 1: CHOOSE THE COLOR, LINE WIDTH AND SPEED OF AN ANIMATION
- Bouncing rectangle without GUI (JS Bin)
- Bouncing rectangle with GUI (see screenshot at the top right of this page)
- Same example as above, on JS Bin, that uses polyfills for IE and Safari (spectrum.js for making <input type=color> work, and a small JS polyfill for making Math.sign() work too…). This is a good example of using a polyfill.
EXAMPLE 2: DATA VISUALIZATION CONTROL
- Final version with different types of charts and a GUI (see screenshot below)
Forms are a way to get user input which is sent to a remote server. This section of the course focuses on the HTML5 additions to forms, and as such will only cover the client-side part.
On the server side, you may have PHP, Java, C#, Ruby, Python, etc. components. There are several ways to collect server-side data from a form in a Web page: REST Web services, servlets, Microsoft ASP pages, etc.
On the client side, the forms indicate to which server and how the data should be sent, using the actionand method attributes respectively. A <button type=”submit”> or an <input type=submit> field is used to submit the form content.
For example: <form action=”myServerCode.php” method=”POST”>…</form>. Here, we set the URL of the server side code (myServerCode.php), and the HTTP method that will be used by the browser for sending the form content (POST).
This week, we will study the new elements and attributes offered by HTML5, and will also cover the new HTML5 form validation API.
The example in the video shows some best practices for writing accessible forms and does some basic layout using CSS. The additional example below (external resource) shows the same good practices but presents a more complete form with CSS rules to make a nice layout.