efeminella/ios-html5-input-element-tips.html

## ios-html5-input-element-tips.html
<!doctype html>
<html lang="en">
  <head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>iOS HTML5 input element Example</title>
	<meta name="author" content="Eric Feminella" />
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<style>
		/* just some basic styles */
		html, body {
    	                font-family: Arial, Helvetica, sans-serif;
			color: #333;
		}
		#app-container {
			width: 300px;
			padding: 10px;
			margin: 0 auto;
			text-align: center;
		}
		h1 {
			font-size: 18px;
		}
		form {
			width: 100%;
		}
		input {
			width: 280px;
			margin: 0 auto 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			padding: 6px 10px;
			text-align: left;
			font-size: 16px;
			font-weight: 400;
			display: block;
		}
		input[type="submit"] {
			text-align: center;
			width: 200px
			margin: 15px auto;
			cursor: pointer;
			display: inline-block;
		}
	</style>
	<script>
		$(function(){
			$('form input[type="submit"]').click(function(evt){
				// programmatically close the keyboard by invoking blur() on the activeElement
				document.activeElement.blur();
				return false;
			});
		});
	</script>
</head>
<body>
	<article id="app-container">
		<header>
			<h1>iOS HTML5 input element Example</h1>
		</header>
		<form>
			<!-- set autocapitalize="on" to enable autocaps (the default)-->
			<input placeholder="autocapitalize on" type="text" autocapitalize="on">

			<!-- set autocapitalize="off" to disable autocaps -->
			<input type="text" placeholder="autocapitalize off" autocapitalize="off">

			<!-- set autocorrect="on" to enable autocorrect (the default)-->
			<input type="text" placeholder="autocorrect on" autocorrect="on">

			<!-- set autocorrect="off" to disable autocorrect -->
			<input type="text" placeholder="autocorrect off" autocorrect="off">

			<!-- input element of type 'tel' displays iOS telephone keyboard -->
			<input type="tel" placeholder="telephone keyboard">

			<!-- input element of type 'url' displays iOS url keyboard -->
			<input type="url" placeholder="url keyboard">

			<!-- input element of type 'email' displays iOS email keyboard -->
			<input type="email" placeholder="email keyboard">

			<!-- input element of type 'text' with regex pattern displays iOS numeric keyboard -->
			<input type="text" placeholder="numeric keyboard" pattern="\d*." />

			<!-- input element of type 'text' displays standard iOS keyboard -->
			<input type="text" placeholder="text keyboard">

			<input type="submit" value="Submit" />
		</form>
	</article>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>iOS HTML5 input element Example</title>
	<meta name="author" content="Eric Feminella" />
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<style>
	/* just some basic styles */
	html, body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	}
	#app-container {
	width: 300px;
	padding: 10px;
	margin: 0 auto;
	text-align: center;
	}
	h1 {
	font-size: 18px;
	}
	form {
	width: 100%;
	}
	input {
	width: 280px;
	margin: 0 auto 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 6px 10px;
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	display: block;
	}
	input[type="submit"] {
	text-align: center;
	width: 200px
	margin: 15px auto;
	cursor: pointer;
	display: inline-block;
	}
	</style>
	<script>
	$(function(){
	$('form input[type="submit"]').click(function(evt){
	// programmatically close the keyboard by invoking blur() on the activeElement
	document.activeElement.blur();
	return false;
	});
	});
	</script>
	</head>
	<body>
	<article id="app-container">
	<header>
	<h1>iOS HTML5 input element Example</h1>
	</header>
	<form>
	<!-- set autocapitalize="on" to enable autocaps (the default)-->
	<input placeholder="autocapitalize on" type="text" autocapitalize="on">

	<!-- set autocapitalize="off" to disable autocaps -->
	<input type="text" placeholder="autocapitalize off" autocapitalize="off">

	<!-- set autocorrect="on" to enable autocorrect (the default)-->
	<input type="text" placeholder="autocorrect on" autocorrect="on">

	<!-- set autocorrect="off" to disable autocorrect -->
	<input type="text" placeholder="autocorrect off" autocorrect="off">

	<!-- input element of type 'tel' displays iOS telephone keyboard -->
	<input type="tel" placeholder="telephone keyboard">

	<!-- input element of type 'url' displays iOS url keyboard -->
	<input type="url" placeholder="url keyboard">

	<!-- input element of type 'email' displays iOS email keyboard -->
	<input type="email" placeholder="email keyboard">

	<!-- input element of type 'text' with regex pattern displays iOS numeric keyboard -->
	<input type="text" placeholder="numeric keyboard" pattern="\d*." />

	<!-- input element of type 'text' displays standard iOS keyboard -->
	<input type="text" placeholder="text keyboard">

	<input type="submit" value="Submit" />
	</form>
	</article>
	</body>
	</html>