Utilisations moins connues d’attributs mieux connus —

La liste des attributs disponibles en HTML est longue et bien documentée. Même si vous ne les avez pas mémorisés (et il n’y a absolument rien de mal à ce qu’un auteur… euh… une personne au hasard dans la rue, qui l’ait mémorisé), il existe de nombreux endroits où les attributs HTML que vous connaissez auront des significations différentes ou plus spécifiques. des emplois. Jetons un coup d’oeil.

name

Vous avez peut-être entendu parler du name attribut, donnant un nom/une étiquette aux informations envoyées via un formulaire. Et plus précisément vous l’avez peut-être utilisé pour regrouper un ensemble de boutons radio, mais vous pouvez également l’utiliser avec le details élément pour n’avoir qu’un seul accordéon parmi un ensemble d’accordéons ouverts à la fois.

Comme si vous aviez plus d’un réfrigérateur au bureau au travail, toute personne respectable n’ouvrirait qu’une seule porte à la fois. C’est vrai, Bob ?

<details name="office-kitchen">
  <summary>Refrigerator 1</summary>
  Lunches, condiments, yogurt et al.
</details>
<details name="office-kitchen">
  <summary>Refrigerator 2</summary>
  More Lunches, leftovers from client meeting, stray cans of off-brand soda et al.
</details>
<details name="office-kitchen">
  <summary>Refrigerator 3</summary>
  Cookie dough someone bought from somebody’s child’s fundraiser, expired milk, unidentifiable meat et al.
</details>

title

Vous avez probablement entendu parler de l’attribut universel title. Il est généralement considéré comme le texte d’une info-bulle intégrée, mais trois éléments ont une sémantique spéciale pour l’attribut title : input et les gemmes rarement utilisées, la définition (dfn) élément et l’abréviation (abbr) élément.

Si vous utilisez un pattern attribut sur un input pour fournir une correction d’erreur basée sur les expressions régulières, vous devez absolument indiquer à l’utilisateur comment répondre aux critères que vous utilisez. Le title L’attribut peut être utilisé à la fois comme info-bulle et comme message affiché lorsque l’utilisateur ne répond pas à ces critères.

<form method="post" action="#">
  <label>Who took my <em>well labeled</em> yogurt from the company fridge? I know it was you, Bob.<br>
    <input type="text" pattern="Bob [A-Za-z].+" title="There are many Bobs. The only question is which one it was. Please limit your answers to Bob and his/her last name.">
  </label><br>
  <button type="submit">Submit</submit>
</form>

Pour un dfn élément, si vous utilisez l’élément title attribut, il doit alors inclure le terme défini. dfn devrait toujours contenir du texte, mais il peut s’agir d’une abréviation ou d’une forme différente du terme.

<p><dfn title="Office Yogurt Thief">OYG</dfn>’s are a pox on humanity. Stealing yogurts from the office fridge even when they are labeled.</p>

UN title sur un abbr L’élément définit non seulement l’info-bulle, mais comporte explicitement l’extension de l’abréviation ou de l’acronyme. Comme il est dit dans la spécification: « Le Lesser Known Uses Of Better Known Attributes — Smashing Magazine L’attribut, s’il est spécifié, doit contenir une extension de l’abréviation et rien d’autre. C’est l’équivalent de la menace d’une attaque mafieuse si vous ne faites pas attention à votre title attributs. Vous êtes prévenu, Bob.

When dealing with a suspected yogurt thief, we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with the problem.

value

Le value L’attribut est bien connu pour définir des valeurs par défaut sur inputs, mais vous pouvez également l’utiliser sur un élément de liste (li) dans une liste ordonnée (ol) pour modifier le numéro de cet élément et de tout ce qui le suit. Il ne prend que des entiers, mais vous pouvez l’utiliser quel que soit le type de liste ordonnée que vous utilisez (chiffres numériques, alphabétiques ou romains).

<h1>Favorite Co-workers</h1>
<ol>
  <li>Tina</li>
  <li>Keesha</li>
  <li>Carlos</li>
  <li>Jamal</li>
  <li>Scott</li>
  <li value="37">Bob</li>
  <li>Bobbie</li>
  <li>Bobby</li>
  <li>"Rob"</li>
</ol>

datetime

Vous avez peut-être utilisé un datetime attribut sur un time élément pour fournir un format lisible par machine de l’heure et/ou de la date représentée dans le time texte de l’élément :

<time datetime="2024-12-09">Dec. 12, 2024</time>

Le même attribut peut également être utilisé avec le ins et del éléments (utilisés pour noter un ajout/insertion et une suppression de contenu, respectivement). Le datetime attribut sur ins et del fournit une date lisible par machine (et éventuellement une heure) pour le moment où la modification a été effectuée. Vous pouvez le montrer au visiteur s’il le souhaite, mais il est principalement destiné à un usage privé.

Découvrez les modifications de la version originale d’un exemple précédent :

When dealing with a <ins datetime="2024-11-17">suspected</ins> yogurt thief <del datetime="2024-11-17">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17">Bob</del> <ins datetime="2024-11-17">the problem</ins>.

En guise de remarque supplémentaire, les lecteurs d’écran le font pas annoncer le datetime attribut dans ce contexte.

cite

Rester avec nos amis souvent négligés ins et delle cite attribut que vous utilisez sur blockquote et q des éléments permettant de fournir une URL de la source de la citation peuvent également être utilisés sur ins et del pour fournir l’URL d’un document expliquant les modifications.

When dealing with a <ins datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">suspected</ins> yogurt thief <del datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">Bob</del> <ins datetime="2024-11-17" cite="https://codepen.io/undeadinstitute/full/VYZeaZm">the problem</ins>.

Encore une fois, ces dates ne sont pas annoncées dans les technologies d’assistance, comme les lecteurs d’écran.

multiple

Vous connaissez probablement le multiple attribut comme cet attribut plus que ce que l’on voit qui transforme un menu déroulant en une boîte à sélection multiple, comme un collègue qui vous permet de choisir deux beignets dans la boîte. (Je te regarde, Tina.) Mais il a aussi deux autres utilisations. Vous pouvez l’ajouter à la fois à un fichier input et un email entrée pour accepter plusieurs fichiers et e-mails, respectivement.

<form method="post" action="#">
  <label>Upload complaint forms (about Bob) <input type="file" multiple> </label><br>
  <label>Email all of Bob’s bosses: <input type="email" multiple></label><br>
  <button type="submit">Submit</submit>
</form>

Assurez-vous simplement que les e-mails sont séparés par des virgules.

for

Au cours de vos voyages sur Internet, vous avez probablement rencontré le for attribut lorsqu’il est utilisé pour associer un label élément avec un champ de formulaire (input, select, textareaetc.), mais vous pouvez également l’utiliser pour associer explicitement les éléments d’un calcul à un output élément.

Contrairement à un label–input relation, qui est une relation biunivoque (c’est-à-dire une étiquette pour un champ), la for attribut utilisé sur un output peut contenir une liste non ordonnée et séparée par des espaces des identifiants des champs qui ont contribué au calcul.

<form method="post" action="#" id="comeuppance"> 
  <fieldset><legend>Defendant name</legend>
    <label>First Name: <input name="fname" type="text"></label>
    <label>Last Name: <input name="lname" type="text"></label>
  </fieldset>
  <label>Number of yogurts stolen (unlabeled): 
    <input name="numunlbld" id="numstolen-unlbld" type="number">
  </label> * 
  <label>Unlabeled Multiplier: 
    <input name="multiunlbld" id="multi-unlbld" type="number" value="0.5">
  </label> + 
  <label>Number of yogurts stolen (labeled): 
    <input name="numlbld" id="numstolen-lbld" type="number">
  </label> * 
  <label>Labeled Multiplier: 
    <input name="multilbld" id="multi-lbld" type="number" value="1.5">
  </label> = 
  <label>Suggested prison term (in years):
    <output id="answer" for="numstolen-unlbld numstolen-lbld multi-unlbld multi-lbld"></output>
  </label>
</form>

target

Tout comme vous pouvez utiliser un target attribut pour ouvrir un lien dans un nouvel onglet/fenêtre, vous pouvez utiliser le même target attribut et valeur _blank avoir un form ouvrez la réponse dans un nouvel onglet/fenêtre.

<form method="post" action="#" id="comeuppance" target="_blank"> 
  [...]
</form>

disabled

Vous avez peut-être utilisé le disabled pour supprimer un champ de formulaire individuel, mais vous pouvez également l’utiliser pour désactiver chaque descendant d’un fieldset élément.

Peu importe ce que disent les RH et leur philosophie d’innocence jusqu’à preuve du contraire, nous savons tous que Bob l’a fait. N’est-ce pas ?

<form method="post" action="#" id="comeuppance"> 
  <fieldset disabled><legend>Defendant name</legend>
    <label>First Name: <input name="fname" type="text" value="Bob"></label>
    <label>Last Name: <input name="lname" type="text" value="McBobberson"></label>
  </fieldset>
  [...]
</form>

Sélecteurs d’attributs

Bien qu’il ne s’agisse pas techniquement d’une astuce HTML, les attributs peuvent également être utilisés comme sélecteurs en CSS. Vous placez des crochets autour du nom de l’attribut et vous sélectionnerez tous les éléments qui contiennent cet attribut.

<style>
  Lesser Known Uses Of Better Known Attributes — Smashing Magazine {
    background-color: red;
  }
</style>
<h1>List of <del>Suspects</del><ins>Co-workers</ins></h1>
<ol>
  <li>Fred</li>
  <li>Rhonda</li>
  <li>Philomina</li>
  <li>Cranford</li>
  <li>Scott</li>
  <li title="the guilty one">Bob</li>
  <li>Bobbie</li>
  <li>Bobby</li>
  <li>"Rob"</li>
</ol>

En fait, vous pouvez faire bien plus avec les sélecteurs d’attributs, mais c’est le sujet d’un autre article : littéralement.

Conclusion

D’accord, maintenant que nous avons appris quelques anecdotes que nous pouvons utiliser pour poursuivre correctement les transgressions du bureau de Bob et des yaourts, avez-vous un attribut HTML préféré dont je n’ai pas parlé ? Montrez votre énergie personnelle de vie de fête dans les commentaires. (Et, oui, les gens cool ont un attribut HTML préféré… les gens vraiment cool… n’est-ce pas ? N’est-ce pas ?? N’est-ce pas !?!?!?!?!)

(gg, ouais)