Stocker des informations arbitraires dans des balises HTML pour JavaScript?

Question

Une question très générale.

Je génère de manière dynamique un formulaire divisé en plusieurs niveaux d'onglets à l'aide de HTML / JavaScript.

Je souhaite mettre en surbrillance certains champs (ceux dont la valeur diffère d'un modèle global) avec un symbole étoile * à l'aide de CSS et d'image de fond.

Un champ JS parcourt chaque champ, compare sa valeur et définit si nécessaire une classe CSS. Jusqu'ici, tout va bien.

De plus, je souhaite non seulement que chaque champ modifié soit marqué d'une étoile, mais également de l'onglet il est .

Parce que j'aime la simplicité, j'aimerais stocker l'ID d'élément de l'onglet en tant qu'attribut quelque part dans la balise HTML de chaque champ (quelque chose comme "parentTab"). La fonction JS met alors en surbrillance le champ et son "parentTab". élément (et peut-être que celui-ci est également "parentTab").

Ma première approche consiste à utiliser le "titre" de manière abusive. attribut ou somethiong pour stocker parentTab dans. Bien sûr, c'est sale. Cependant, si j'ajoute simplement des attributs arbitraires à la balise DIV ou INPUT, elle ne sera plus validée et je me sens moins sécurisé que d'accéder à ces attributs - qui sait comment différents navigateurs le traitent et le géreront à l'avenir?

Ma question est donc la suivante: existe-t-il un moyen valide, conforme aux normes - un attribut quelconque - de stocker des données arbitraires dans des balises HTML, pour un traitement ultérieur par JavaScript?

Bien sûr, je pourrais créer un "parentTabs". JS tableau et être fait avec elle. Mais le stocker dans l’entrée elle-même serait tellement plus élégant.

Answer 1

Vous pouvez savoir à quel onglet appartient un champ en écrivant une fonction isChildOf, comme suit: http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

Utiliser le DOM pour résoudre ce problème sera toujours plus "élégant". que la duplication des données dans un format personnalisé.

Answer 2

avec l'introduction de html5, vous pouvez utiliser les attributs commençant par data - , et ils valideront toujours.

<input type="text" name="username" data-parentTab="tab1" value="non-default">

Answer 3

L'attribut rel est souvent un très bon choix pour stocker des données comme celle-ci.

Answer 4

Dans jQuery, vous avez l’API de données pour le sujet. http://docs.jquery.com/Internals/jQuery.data

Si vous n'utilisez pas jQuery, vous pouvez ajouter vos propres balises et y stocker n'importe quoi. tout le monde vous dira que ce n'est pas bien, etc., mais toutes les grandes firmes du Web le font. alors vous vous retrouverez dans une grande entreprise ;-)

Answer 5

J'aime la façon dont John Resig a fait cela: une balise de script de type arbitraire . Son exemple concerne les modèles, mais vous pouvez vraiment l'utiliser pour n'importe quoi.