Webフォームの使いやすさを向上させる：JavaScriptによるラベル操作
2024-04-08
JavaScript、HTML、Label を使った入力要素に関連するラベルを見つける方法
前提条件
このチュートリアルを始める前に、以下の知識が必要です。
- HTML の基礎
- JavaScript の基礎
- DOM 操作の基礎
使用するツール
- テキストエディタ
- Web ブラウザ
手順
- HTML ファイルを作成し、以下のコードを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラベルと入力要素</title>
</head>
<body>
<label for="name">名前:</label>
<input type="text" id="name">
<label for="email">メールアドレス:</label>
<input type="email" id="email">
<script src="script.js"></script>
</body>
</html>
// 入力要素を取得
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
// ラベルを取得
const nameLabel = document.querySelector(`label[for="${nameInput.id}"]`);
const emailLabel = document.querySelector(`label[for="${emailInput.id}"]`);
// ラベルのテキスト内容を出力
console.log(nameLabel.textContent); // "名前:"
console.log(emailLabel.textContent); // "メールアドレス:"
コード解説
document.getElementById('name'):id属性が "name" の要素を取得します。document.querySelector(label[for="${nameInput.id}"]):for属性の値がnameInput.idと一致するlabel要素を取得します。nameLabel.textContent:nameLabel要素のテキスト内容を取得します。
上記以外にも、以下の方法で入力要素に関連するラベルを見つけることができます。
parentNodeプロパティを使うclosest()メソッドを使う
このチュートリアルでは、JavaScript を使って、特定の入力要素に関連する HTML ラベルを見つける方法について説明しました。
この方法は、フォームのバリデーションや、ユーザーインターフェイスの改善など、さまざまな場面で役立ちます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラベルと入力要素</title>
</head>
<body>
<form action="/submit">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<button type="submit">送信</button>
</form>
<script src="script.js"></script>
</body>
</html>
// 入力要素を取得
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
// ラベルを取得
const nameLabel = document.querySelector(`label[for="${nameInput.id}"]`);
const emailLabel = document.querySelector(`label[for="${emailInput.id}"]`);
// ラベルのテキスト内容を出力
console.log(nameLabel.textContent); // "名前:"
console.log(emailLabel.textContent); // "メールアドレス:"
// フォーム送信時にラベルのテキスト内容を出力
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log(nameLabel.textContent, nameInput.value);
console.log(emailLabel.textContent, emailInput.value);
});
このコードは、以下の動作を実現します。
nameとemailという名前を持つ入力要素とラベルを作成します。- JavaScript を使って、入力要素とラベルを取得します。
- ラベルのテキスト内容を出力します。
- フォーム送信時に、ラベルのテキスト内容と入力要素の値を出力します。
このサンプルコードを参考に、さまざまな方法で入力要素に関連するラベルを見つけてみてください。
入力要素に関連するラベルを見つける他の方法
parentNode プロパティを使う
const nameInput = document.getElementById('name');
const nameLabel = nameInput.parentNode;
console.log(nameLabel.textContent); // "名前:"
closest() メソッドは、指定されたセレクターに一致する最も近い祖先要素を取得します。このメソッドを使って、入力要素の最も近い label 要素を取得することができます。
const nameInput = document.getElementById('name');
const nameLabel = nameInput.closest('label');
console.log(nameLabel.textContent); // "名前:"
labels プロパティを使う
HTML5 では、input 要素に labels プロパティが追加されました。このプロパティは、その入力要素に関連するすべての label 要素のリストを返します。
const nameInput = document.getElementById('name');
const labels = nameInput.labels;
for (const label of labels) {
console.log(label.textContent);
}
// "名前:"
ライブラリを使う
jQuery などのライブラリを使うと、より簡単にラベルを取得することができます。
const nameInput = $('#name');
const nameLabel = $('label[for="name"]');
console.log(nameLabel.text()); // "名前:"
上記の方法以外にも、さまざまな方法でラベルを見つけることができます。
状況に合わせて、最適な方法を選択してください。
javascript html label
