Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

input要素 pattern属性

pattern属性は、その入力フィールドに入力可能な値の正規表現を表します。

使用例

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Hello! HTML5></title>
<meta charset="UTF-8">
</head>
<body>
    <form action="hoge.cgi" method="post">
        <p>
            TEL:<input type="text" id="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" title="[半角数字2〜4桁]-[半角数字2〜4桁]-[半角数字4桁]" />
            <input type="submit" value="送信" />
        </p>
    </form>
</body>

レンダリング

[送信]ボタンクリック