HTMLのdata-*属性とは？カスタムデータ属性の基本と使い方を実例付きで解説
HTMLのdata-*属性は、あらゆるHTML要素に独自のカスタムデータを埋め込むために使用されるグローバル属性です。グローバル属性であるため、どの要素に対しても自由に利用できます。
JavaScriptと連携して要素に関連付ける情報を持たせたい場合などに非常に便利で、モダンなWeb開発では広く活用されています。
data-*属性の書き方（構文）
基本的な構文は以下の通りです。
<element data-属性名="値">
ここで注意すべきポイントは次の2つです。
- 属性名には小文字のみを使用する（大文字は使用不可）
- 接頭辞「data-」の後に、少なくとも1文字以上の文字が必要
data-*属性の実装例
それでは、実際に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>
実行結果
このコードをブラウザで表示すると、3つの見出し（Java、jQuery、MySQL）が表示されます。
それぞれの見出しには「data-tutorial-type」というカスタムデータ属性が設定されており、クリックするとgetAttribute()メソッドによってその値が取得され、アラートダイアログに表示されます。
例えば「jQuery」の見出しをクリックすると、以下のように「scripting language」という値が表示されます。
まとめ
data-*属性を使えば、HTML要素に意味のあるカスタムデータを持たせることができ、JavaScriptから簡単に参照・操作できます。表示には影響を与えずにデータを保持できるため、動的なWebアプリケーションの開発において非常に有用な機能です。ぜひ活用してみてください。
-
HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t
-
HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次