トップページ >  HTML5 >  formのpattern
初版2013/02/27: 最終更新日2013/02/27
formのpattern
目次
formのpattern
formのpattern
HTML5ではpatternを使うことによって入力フォームのパターンを指定することができます。
pattern属性はなにも入力されていない場合にはチェックを行いません。1文字でも入力するとpattern属性でチェックを行います。
たとえば、携帯番号を入力する入力フォームが有るとします。以下、例です。

携帯番号



以下、ソースです。

<form>
<span>携帯番号</span>
<input type="text" pattern="\d{3}-\d{4}-\d{4}" placeholder="090-????-????" />
<input type="submit" value="ボタン" /><br /><br />
</form>

Chromeでは以下のようなメッセージが表示されます。



こちらにもpatternについて記述しています。