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

HTMLデータ-*属性

HTMLのdata-*属性は、すべてのHTML要素にカスタムデータ属性を埋め込むために使用されます。これはグローバル属性であり、任意の要素で使用できます。

以下は構文です-

<element data-attribute-name=”attribute_value”

上記では、属性名は小文字のみにする必要があります。そのため、プレフィックス「data-」の後に少なくとも1文字長くする必要があります

ここで、HTMLでdata-*属性を実装する例を見てみましょう。属性のいずれかをクリックして、詳細情報を取得します-

例

<!DOCTYPE html>
<html>
<head>
<script>
   function display(tutorial) {
      var type = tutorial.getAttribute("data-tutorial-type");
      alert(tutorial.innerHTML + " = " + type + ".");
   }
</script>
</head>
<body>
   <h1>Tutorials</h1>
   <h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
   <h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
   <h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html>

出力

HTMLデータ-*属性

次に、上の

見出しのいずれかをクリックして、属性に関する詳細情報を取得します。ここでjQuery属性をクリックしました-

HTMLデータ-*属性


  1. HTMLに必要な属性

    HTML必須属性は、HTMLドキュメントでフォームを送信する前にHTML要素に入力する必要があることを定義します。 入力に適用できます 、選択 、および textarea HTML要素。 構文 以下は構文です- <tagname required></tagname> 例 HTMLに必要な属性の例を見てみましょう- <!DOCTYPE html> <html> <style>    body {       color: #000;       he

  2. HTMLパターン属性

    HTMLパターン属性は、HTML要素の値がHTMLドキュメントで一致する正規表現を定義します。 構文 以下は構文です- <input pattern=”regular expression”> HTMLパターン属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;