Marco Casario | RIAvolutionize the web

Creating custom HTML5 input types using regular expressions

This is an excerpt from the HTML5 Solutions: Essential Techniques for HTML5 Developers book by Apress (where I'm one of the author).

Solution 4-8: Creating custom input types using regular expressions

Regular expressions provide a powerful, concise, and flexible means for matching strings of text, such as

particular characters, words, or patterns of characters. A regular expression is written in a formal language

that can be interpreted by a regular expression processor, which is a program that either serves as a

parser generator or examines text and identifies parts that match the provided specification. See Wikipedia

for more information: http://en.wikipedia.org/wiki/Regular_expression.

HTML5 allows you to check the user’s inputs and to match the input values against a regular expression.

What’s involved

The code that you needed to write to use regular expressions with previous versions of HTML was

as follows:

<input type="text" name="ssn"

onblur="if (!^\d{3}-\d{2}-\d{4}$this.value) alert(this.title+'\nAn error occurred. Please

verify your data.');" title="The Social Security Number"/>

On the onblur event of the input element, a JavaScript statement is executed. It controls the pattern to be

applied to the data in the field, and it provides an error message if the validation wasn’t successful.

With HTML5, a new attribute is available that allows you to associate a pattern of characters via regular

expressions to a text input to be applied as validation of the data inserted in the field. The markup for this

is really simple:

<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$"

The value specified in the pattern attribute must match the JavaScript pattern production as described in

this document: www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf.

Google I/O 2012 is about to start ... but without Larry Page

Google I/O begins in less than 48 hours! Even if you're not attending in person, you can still get all the news via the live stream.

Larry Page should not be on stage as he's sick (with no voice)!

The first day's keynote will be at 9:30 a.m. PDT on June 27, and the second day's is at 10:00 a.m. PDT on June 28. Lots of cool Chrome and HTML5 sessions that you really don't want to miss will also be streamed live. Other sessions will be recorded and made available soon after the conference. 

To keep up to date with the relevant HTML5 sessions, follow +Google Chrome Developers (http://g.co/PlusChromeDev).

Thanks to Peter (Google Chrome Developer Relations) for the info :)

 

Validating form controls in HTML5

This is an excerpt from the HTML5 Solutions: Essential Techniques for HTML5 Developers book by Apress (where I'm one of the author).

HTML5 Solution 4-7: Validating form controls

In the first solution in this chapter, we showed you how to use built-in mechanisms to validate an e-mail

input type. This function is new to HTML5.

When you work with forms, validation of data is definitely an important aspect that may require quite a lot

of effort. We often resort to mixed validation systems. With JavaScript or AJAX frameworks (such as

JQuery, Dojo, and MooTools), you can make client-side validations and you can develop server-side

validating procedures with server-side languages (PHP, Python, Java, and so on).

Thanks to the insertion of new attributes in HTML5, you can delegate some data verification functions to

the browser and reduce the effort required for these kinds of operations (at least from the client side).

Sending multiple files with HTML5 and without JavaScript or Flash

This is an excerpt from the HTML5 Solutions: Essential Techniques for HTML5 Developers book by Apress (where I'm one of the author).

It was already possible to send any kind of file from your computer to a remote server with the older

versions of HTML by using the form, and the <input type = file> in particular.

This form control, however, had the limit of being able to send only one file at a time. If the user wanted to

upload a photo album and thus send several photos, the developer had to use other technologies, such as

Flash or JavaScript, to provide this feature.

Now, with HTML5 and with the addition of an attribute, it is possible to manage everything without using

any external language.

HTML5 introduces a new attribute to the file input type, multiple, to improve file upload usability. Multiple

is a Boolean attribute that indicates whether the user should be allowed to specify more than one value.

It’s specified inline to the markup input tag:

<input type="file" multiple />

This attribute is supported by the latest versions of Safari, Chrome, Firefox, Internet Explorer, and Opera.

The input control will be rendered according to the browser, with a simple text input with a button on the

side to select the files (e.g., Opera), or with only a button (e.g., Chrome and Safari).

Other browsers, such as Chrome, use the same button label used for a simple file input type. However,

they specify the number of selected files for the user (but not their file names, as Opera and Firefox do).

To carry out a multiple selection, the user will use the SHIFT or CTRL or CMD keys after having clicked on

the Choose Files or Add Files button.

How to build it

From a technical point of view, the only thing you need to be aware of to allow the user to upload multiple

files is to add the multiple attribute in the declaration of the tag file input type.

Here is a complete example:

<!DOCTYPE html>

<html>

<head>

<title>

Solution 4-5: Sending multiple files

</title>

</head>

<body>

<form id="myForm">

<fieldset>

<legend>Solution 4-5: Sending multiple files</legend>

<label>Upload one or more files:</label>

<input type="file" name="multipleFileUpload" multiple />

<br />

</fieldset>

</form>

</body>

</html>

Expert tips

The files that the user selects will have to be sent to the server and processed using server-side language.

Some programming languages, such as PHP, require you to add brackets to the name attribute of the tag

to send multiple files:

<input name="filesUploaded[]" type="file" multiple />

By doing so, PHP will construct an array data type, which will contain the uploaded files on the server. If

you don’t specify the brackets, the programming language will process the files in order and only provide

the last file in your script.

 

CSS3 Solutions book is ready !

It's about to be released the CSS3 Solutions book. Together with the HTML5 Solutions, this book provides a collection of solutions to all of the most common CSS3 problems. Every solution contains sample code that is production-ready and can be applied to any project.

CSS3 brings a mass of changes, additions, and improvements to CSS across a range of new modules. Web designers and developers now have a whole host of new techniques up their sleeves, from working with colors and fonts accurately, to using media queries to ensure correct styling across a multitude of devices. But all of these new technologies bring more tags to learn and more avenues for things to go wrong. CSS3 Solutions provides a collection of solutions to all of the most common CSS3 problems. Every solution contains sample code that is production-ready and can be applied to any project.

What you’ll learn

Real-world solutions for everyday CSS3 development, saving hours of frustration. Problems covered include: 

• Developing across multiple devices
• Design patterns for user experience and mobile
• Working with the CSS box model