<h1>Show correct mobile keypad with <code>inputmode</code></h1>

<em>Note: Check this in mobile to see the different keypads!</em>
<form>
	<fieldset>
		<label for="num">Numeric Keypad:</label>
		<input id="num" inputmode="numeric">
	</fieldset>

	<fieldset>
		<label for="email">Email Keypad:</label>
		<input id="email" inputmode="email" type="email">
	</fieldset>

	<fieldset>
		<label for="tel">Telephone Keypad:</label>
		<input id="tel" inputmode="tel">
	</fieldset>

	<fieldset>
		<label for="url">Url Keypad:</label>
		<input id="url" inputmode="url" type="url">
	</fieldset>
</form>

/* Only for styling, not required for it to work */
body {
	background-color: lightgoldenrodyellow;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

h1 {
	font-size: 3rem;
	color: salmon;
	font-family: "Berkshire Swash", cursive;
	text-align: center;
}

h2 {
		font-size: 1.4rem;
	color: #333;
	font-family: "Berkshire Swash", cursive;
	text-align: center;
}

code {
	background: salmon;
	color: #fff;
	border-radius: 5px;
	padding:5px;
}

fieldset {
	margin: 30px;
}