Introduction Forms

Introduction Forms

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.
    • Built-in validation system: JavaScript API for custom validation, CSS pseudo classes that are useful for changing an input field style depending on the validity of the input.
    • 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

INTRODUCTION

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.

THE EXAMPLES

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

EXAMPLE 2: DATA VISUALIZATION CONTROL

Example from the video, on JS Bin

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).

Another approach is to use JavaScript for sending the form content with Ajax. This will be covered in the HTML5 Part-2 course.

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.

ADDITIONAL EXAMPLE

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s