Text Input Type
Description
When building forms, we can associate the input field with its semantic type.
This association has two advantages.
First, when the input field receives focus it prompts the user with the appropriate keyboard.
A field that is specified as type="number" will automatically prompt a numeric keyboard.
A field that is mapped with type="tel" will prompt a telephone-specific keyboard.
This association allows the browser to apply validation rules that are applicable for the field type.
The search field (type="search") is styled and behaves slightly different than the other input types.
Example
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.5.2.js'></script>
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script type='text/javascript'
src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){<!--from w w w . ja v a2s . c o m-->
$('.tooltip').hide();
$('.tooltip').each( function() {
$(this).prev().focus( function() {
$(this).nextAll('.tooltip').show('fast');
}).blur( function() {
$(this).nextAll('.tooltip').hide('fast');
});
});
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="content">
<div>
<label for="telephone"> Phone Number* </label>
<input type="tel" name="telephone" id="telephone" required placeholder="Telephone#">
<div name="telephone_tooltip" class="tooltip">
Valid format
<strong>
<span>999-999-9999</span>
</strong>. Please include the area code.
</div>
</div>
</div>
</div>
</body>
</html>