web-dev-qa-db-fra.com

Comment créer une étiquette dans un élément <input>?

Je voudrais insérer un texte descriptif à l'intérieur d'un élément d'entrée qui disparaît lorsque l'utilisateur clique dessus.

Je sais que c'est un truc très courant, mais je ne sais pas comment faire ça ..

Quelle est la solution la plus simple/meilleure?

htmlformslabelplaceholder
41
collimarco
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

Un meilleur exemple serait le bouton de recherche SO! C'est de là que j'ai obtenu ce code. Afficher la source de la page est un outil précieux.

44
Cory Walker

Si vous utilisez HTML5, vous pouvez utiliser l'attribut placeholder.

<input type="text" name="user" placeholder="Username">
117
Rich Bradshaw

À mon avis, la meilleure solution consiste à ne pas utiliser d'images ni d'utiliser la valeur par défaut de l'entrée. Cela ressemble plutôt à la solution de David Dorward.

Il est facile à mettre en œuvre et se dégrade agréablement pour les lecteurs d'écran et les utilisateurs sans JavaScript.

Jetez un coup d’œil aux deux exemples suivants: http://attardi.org/labels/

J'utilise généralement la deuxième méthode (étiquettes2) sur mes formulaires.

37
Tex

L'approche courante consiste à utiliser la valeur par défaut en tant qu'étiquette, puis à la supprimer lorsque le champ gagne le focus.

Je n'aime vraiment pas cette approche car elle a des implications en termes d'accessibilité et de facilité d'utilisation.

Au lieu de cela, je commencerais par utiliser un élément standard à côté du champ.

Ensuite, si JavaScript est actif, définissez une classe sur un élément ancêtre de sorte que de nouveaux styles l'appliquent:

  • Positionner relativement un div qui contient l'entrée et l'étiquette
  • Positionner absolument l'étiquette
  • Positionner absolument l'entrée au-dessus de l'étiquette
  • Supprimer les bordures de l'entrée et définir sa couleur d'arrière-plan sur transparente

Ensuite, et aussi chaque fois que l'entrée perd le focus, je teste pour voir si l'entrée a une valeur. Si tel est le cas, assurez-vous qu'un élément ancêtre a une classe (par exemple, "hide-label"), sinon, assurez-vous qu'il n'a pas cette classe.

Chaque fois que l'entrée gagne le focus, définissez cette classe.

La feuille de style utiliserait ce nom de classe dans un sélecteur pour masquer l'étiquette (en utilisant text-indent: -9999px; généralement).

Cette approche offre une expérience décente à tous les utilisateurs, y compris ceux dont JS est désactivé et ceux qui utilisent des lecteurs d'écran.

4
Quentin

J'ai mis en place les solutions proposées par @ Cory Walker avec les extensions de @Rafael Et la forme unique @Tex witch était un peu compliquée pour moi

résistant aux erreurs avec javascript et CSS désactivé.

Il manipule la couleur de fond du champ de formulaire pour afficher/masquer le libellé.

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

Voir le script en action: http://mattr.co.uk/work/form_label.html

2
Maciek

S'il vous plaît utiliser PlaceHolder.JS cela fonctionne dans tous les navigateurs et très facile pour les navigateurs non compatibles avec HTML5. http://jamesallardice.github.io/Placeholders.js/

1
SK641
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

Ajoutez également un événement onblur.

1
Alex V

Un indice sur la propriété HTML placeholder et la balise textarea, assurez-vous qu'il n'y a pas d'espace entre <textarea> et </textarea>, sinon le placeholder ne fonctionne pas, par exemple:

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

Cela ne fonctionnera pas, car il y a un espace entre ...

1
cn123h

Lorsque vous commencez à taper, il disparaîtra. Si vide, il réapparaîtra.

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>

Manière la plus simple ...

1
Thaha kp

Vous n'avez pas besoin d'un code Javascript pour cela ... 
Je pense que vous voulez dire l'attribut placeholder. Voici le code:

<input type="text" placeholder="Your descriptive text goes here...">



Le texte par défaut sera gris et, une fois cliqué, il disparaîtra!

0
1010

utilisez ceci

style:

<style type="text/css">
    .defaultLabel_on { color:#0F0; }
    .defaultLabel_off { color:#CCC; }
</style>

html:

javascript:

function defaultLabelClean() {
    inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++)  {
        if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
            inputs[i].value = '';
        }
    }
}

function defaultLabelAttachEvents(element, label) {
    element.setAttribute("innerLabel", label);
    element.onfocus = function(e) {
        if (this.value==label) {
            this.className = 'defaultLabel_on';
            this.value = '';
        }
    }
    element.onblur = function(e) {
        if (this.value=='') {
            this.className = 'defaultLabel_off';
            this.value = element.getAttribute("innerLabel");
        }
    }

    if (element.value=='') {
        element.className = 'defaultLabel_off';
        element.value = element.getAttribute("innerLabel");
    }
}


defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");

N'oubliez pas d'appeler la fonction defaultLabelClean () avant d'envoyer le formulaire.

bon travail

0
Davide Consonni

Je pense qu'il est bon de conserver l'étiquette et de ne pas utiliser d'espace réservé comme mentionné ci-dessus. Son bon pour UX comme expliqué ici: https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

Voici un exemple avec une étiquette dans des champs de saisie: codepen.io/jdax/pen/mEBJNa

0
Mohammed