pattern属性

input要素のpattern属性は、正規表現を使った入力規制を指定する属性。HTML5にて新たに導入された属性である。

ブラウザ対応

構文

<input pattern="正規表現を使った入力規制">

入力規制に従った入力値でないと、送信できない。

title属性

pattern属性と共に使うtitle属性は、特別な意味を持つ。

<input pattern="正規表現を使った入力規制" title="エラー表記">

入力規制に反し送信できないと、ツールチップなどにメッセージが現れる。そのメッセージに追加する内容を、title属性に指定できる。例えば、半角英数字で入力しなければならない場合、「半角英数字で入力して下さい。」というメッセージを、title属性に指定すると良いだろう。

pattern属性に対応しているinput要素のタイプ（type属性値）

text search tel url email password

サンプルコード

半角英数字

<input pattern="^[0-9A-Za-z]+$">

<input pattern="^[0-9A-Za-z]+$" title="半角英数字で入力して下さい。">

半角英字８文字

<input pattern="[A-Za-z]{8}">

<input pattern="[A-Za-z]{8}" title="半角英字８文字で入力して下さい。">

サンプル

HTMLソースコード

<form action="sample-input.php" method="post" target="_blank">
	<p>
		<label>
			郵便番号：
			<input name="sampleName" pattern="\d{3}-\d{4}" title="郵便番号は、「123-4567」のように、「３桁の数字、ハイフン（‐）、４桁の数字」の順で入力して下さい。">
		</label>
	</p>
	<p><input type="submit" value="送信"></p>
</form>

実際の表示

サンプルの動作について

「３桁の数字、ハイフン（‐）、４桁の数字」の順で入力しておかないと、送信できない。