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

HTMLでinput要素の値を正規表現でチェックする方法（pattern属性の使い方）

HTMLでは、<input>要素にpattern属性を指定することで、入力値を正規表現で検証できます。フォーム送信時に、入力内容が指定したパターンに一致しているかどうかをブラウザが自動的にチェックし、一致しない場合はエラーメッセージを表示します。

以下のコードでは、国名コードの入力欄に対して「半角英字3文字」というパターンを設定しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <title>HTML novalidate attribute</title>
   </head>
   <body>
      <form action = "" method = "get" novalidate>
         Student Name<br><input type = "name" name = "sname"><br>
         Rank<br><input type = "number" name = "rank"><br>
         Student Country <br><input type = "text" name = "ccode" pattern="[A-Za-z]{3}" title = "country code"><br>

         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

ポイント解説

上記の例では、pattern="[A-Za-z]{3}"と指定することで、3文字の半角英字のみが入力として許可されます。入力値がパターンに一致しない場合、フォームは送信されず、ブラウザがバリデーションエラーを表示します。

また、title属性に説明文を設定しておくと、多くのブラウザではマウスオーバー時にツールチップとして表示され、どのような形式で入力すべきかをユーザーに伝えやすくなります。

  1. HTMLのinput要素におけるchecked属性の使い方を解説

    checked属性とはinput要素のchecked属性は、Webページが読み込まれた時点で、チェックボックス（type=checkbox）にあらかじめチェックが入った状態で表示するための属性です。ラジオボタン（type=radio）に対しても同様に使用できます。基本的な記述方法（構文）は以下のとおりです。<input type=checkbox checked>上記のように「checked」を指定することで、ページ読み込み時にチェックボックスが選択された状態になります。実装例それでは、input要素のchecked属性を使った具体的なサンプルコードを見ていきましょう。以下は、会員

  2. HTML input value属性とは？値の設定・取得方法をサンプルコードで解説

    HTML input value属性とは HTMLのinput要素におけるvalue属性は、フォーム部品の値を設定・取得するために使用される属性です。JavaScriptからは、このvalueプロパティを通じて、入力欄の現在の値を取得（return）したり、新しい値を動的に設定（set）したりすることができます。 value属性は、テキスト入力欄やURL入力欄、ボタンなどさまざまな種類のinput要素で利用でき、JavaScriptと組み合わせることで、ユーザーの操作に応じた動的なフォーム制御が可能になります。 input valueプロパティの基本構文 値を取得する場合： inputObj