In FF and IE, using the :text selector
selects both text and email inputs. In Safari and Chrome,
only text inputs are selected.
I tested in Safari 5, Chrome 5.03, FF 3.6.3 (all on OS X) and IE8.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testing HTML5 email tags</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
</script>
<script type="text/javascript">
$(document).ready
(
function ()
{
var page_console = $("<div>").appendTo($("body"));
var first_message = $("<div>", { text: "There is/are " + $(":text").length + " text inputs (using :text selector)" }).appendTo(page_console);
var second_message = $("<div>", { text: "There is " + $("input[type=email]").length + " email input (using input[type=email] selector" }).appendTo(page_console);
var third_message = $("<div>", { text: "There is " + $("input[type=text]").length + " text inputs (using input[type=text] selector" }).appendTo(page_console);
}
);
</script>
</head>
<body>
<input type="text" id="text_input" value="This is a text input" />
<input type="email" id="email_input" value="This is an email input" />
</body>
</html>
I'm not sure what the behaviour here should be. Having :text work across both is/would be handy, but maybe there could/should be a different selector to grab all fields where the user can type in values?