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.