HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。

pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。

構文

pattern属性の基本構文は次のとおりです。

<input pattern="正規表現">

サンプルコード

それでは、HTML pattern属性の具体的な使用例を見てみましょう。ここでは、パスワード入力欄に「8文字以上」という条件をpattern属性で設定しています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    input[type='password'] {
        width: 300px;
        padding: 8px 16px;
        border: 2px solid #fff;
        background: transparent;
        border-radius: 20px;
        display: block;
        margin: 1rem auto;
        outline: none;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 20px;
        width: 330px;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    ::placeholder {
        color: #000;
    }
</style>
<body>
<h1>HTML pattern属性のサンプル</h1>
<form action="">
<input type="password" placeholder="Enter your account password" required pattern=".{8}">
<input type="submit" value="Submit" class="btn" onclick='check()'>
</form>
<div class="show"></div>
<script>
    function check() {
        if (document.querySelector("input[type='password']").value.length < 8) {
            document.querySelector(".show").innerHTML = 'Please enter a password of more than or equal to 8 characters.';
        };
    }
</script>
</body>
</html>

実行結果

HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

8文字未満のパスワードを入力して「Submit」ボタンをクリックすると、警告メッセージが表示されます。

HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

使い方のポイント

  • required属性との併用：空欄のままの送信も防ぎたい場合は、required属性を一緒に指定しましょう。
  • title属性でヒントを表示：title属性に説明文を設定しておくと、パターンが一致しなかった場合にその内容がツールチップとして表示され、ユーザーに親切です。
  • 正規表現は入力値全体と照合される：pattern属性の正規表現は部分的ではなく、入力値全体との一致を判定する点に注意してください。
  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以