There has been some discussion on the HTML/AIR listserv recently about the webkit rendering engine used within AIR, especially in regards to HTML5. There is a great article on the topic at the Adobe Developer Center: What's new about HTML, HTML5, CSS, and JavaScript in AIR 2.5?. As an experiment, I decided to create a quick HTML/AIR application that would go through all of the HTML5 items related to form fields. For my documentation I used A Form Of Madness (great title!) from the Dive into HTML5 site. I simply went through his examples and created an HTML page with every one.
<html> <head> <title>New Adobe AIR Project</title> <script type="text/javascript" src="lib/air/AIRAliases.js"></script> </head> <body> <!-- Sample code thanks to: http://diveintohtml5.org/forms.html --> <form> <p> <b>Placeholder test (should see text in field):</b><br/> <input type="text" name="placeholder" placeholder="Placeholder FTW"> </p> <p> <b>Autofocus (if you can type in here w/o clicking, it is working):</b><br/> <input type="text" name="autofocus" autofocus> </p> <p> <b>Type="email" (on mobile it would use a keyboard optimized for email):</b><br/> <input type="email" name="email"> </p> <p> <b>Type="url" (on mobile it would use a keyboard optimized for urls):</b><br/> <input type="url" name="url"> </p> <p> <b>Type="number" (creates a 'spinbox'):</b><br/> <input type="number" name="number" min="0" max="10" step="2" value="6"> </p> <p> <b>Type="range" (creates a 'slider'):</b><br/> <input type="range" name="range" min="0" max="10" step="2" value="6"> </p> <p> <b>Type="date" (creates a calendar):</b><br/> <input type="date" name="date"> </p> <p> <b>Type="month" (creates a calendar):</b><br/> <input type="month" name="month"> </p> <p> <b>Type="week" (creates a calendar):</b><br/> <input type="week" name="week"> </p> <p> <b>Type="time" (creates a time picker):</b><br/> <input type="time" name="time"> </p> <p> <b>Type="datetime" (creates a calendar + time picker):</b><br/> <input type="datetime" name="datetime"> </p> <p> <b>Type="datetime-local" (creates a calendar + time picker):</b><br/> <input type="datetime-local" name="datetime-local"> </p> <p> <b>Type="search" (rounded corners):</b><br/> <input type="search" name="search"> </p> <p> <b>Type="color" (creates a color picker):</b><br/> <input type="color" name="color"> </p> <p> <b>Required (would color the field if not filled in:</b><br/> <input type="text" name="required" required> </p> <p> <input type="submit" value="Submit"> </p> </body> </html>
If you read the "Form of Madness" article than you will quickly see that - like most of HTML5 - support is a bit... varied. So I didn't expect much of the above to work within AIR just yet. From my testing I found the following:
- Both autofocus and placeholder work just fine. Those are two darn handy features so I'm glad to see that.
- Everything else (except range) simply defaulted to a normal text field. Cool. We've got alternatives like jQuery UI so I'm not too concerned.
- The range field - oddly - didn't render at all. That was surprising. It should have simply defaulted to a text field.
Anyway, I don't know if this is useful for anyone but you can download the .AIR file below if you want to run this yourself.