<div>
<h2>通常</h2>
<input type="text" placeholder="[type:text]">
<input type="text" inputmode="text" placeholder="[type:text][inputmode:text]">
	
<h2>メールアドレス</h2>
<input type="email" placeholder="[type:email]">
<input type="email" inputmode="email" placeholder="[type:email][inputmode:email]">
<input type="text" inputmode="email" placeholder="[type:text][inputmode:email]">

<h2>実数</h2>
<input type="text" inputmode="decimal" placeholder="[type:text][inputmode:decimal]">
	
<h2>数字</h2>
<input type="number" placeholder="[type:number]">
<input type="number" inputmode="numeric" placeholder="[type:number][inputmode:numeric]">
<input type="text" inputmode="numeric" placeholder="[type:text][inputmode:numeric]">

<h2>英数字</h2>
<input type="text" inputmode="verbatim" placeholder="[type:text][inputmode:verbatim]">

<h2>電話番号</h2>
<input type="tel" placeholder="[type:tel]">
<input type="tel" inputmode="tel" placeholder="[type:tel][inputmode:tel]">
<input type="text" inputmode="tel" placeholder="[type:text][inputmode:tel]">

<h2>URL</h2>
<input type="url" placeholder="[type:url]">
<input type="url" inputmode="tel" placeholder="[type:url][inputmode:url]">
<input type="text" inputmode="tel" placeholder="[type:text][inputmode:url]">
	
<hr>

<h2>古い手法</h2>
<input type="text" pattern="\d*" placeholder="[type:text][pattern:\d*]">
<input type="text" pattern="[0-9]*" placeholder="[type:text][pattern:0-9*]">
	
</div>
div{
	padding:1rem;
}
h2{
	padding:1rem 0 0;
}
input{
	display: flex;
	font-size: 1.25rem;
	padding: .25rem;
	margin: .25rem;
	width:90%;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.