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

HTMLパターン属性

HTMLパターン属性は、HTML要素の値がHTMLドキュメントで一致する正規表現を定義します。

構文

以下は構文です-

<input pattern=”regular expression”>

HTMLパターン属性の例を見てみましょう-

例

<!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 attribute Example</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パターン属性

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

HTMLパターン属性


  1. HTMLラップ属性

    HTML wrap属性は、フォームがHTMLドキュメントで送信されたときにテキスト領域のテキストをどのように折り返すかを定義します。 構文 以下は構文です- <textarea wrap=”hard | soft”></textarea> HTMLラップ属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height:

  2. HTMLドラッグ可能属性

    HTML DOMドラッグ可能属性は、要素がドラッグ可能かどうかを指定するブール値を返す/設定します。 注 −リンクと画像はデフォルトでドラッグ可能です。 HTMLドラッグ可能の例を見てみましょう 属性- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM draggable</title> <style>    * {       padding: 2px;       margin:5px; &n