it-swarm.com.de

Wie erstelle ich ein Label innerhalb eines <input> -Elements?

Ich möchte einen beschreibenden Text in ein Eingabeelement einfügen, das verschwindet, wenn der Benutzer darauf klickt.

Ich weiß, dass es ein sehr verbreiteter Trick ist, aber ich weiß nicht, wie ich das machen soll ..

Was ist die einfachste/bessere Lösung?

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

Ein besseres Beispiel wäre die Suchtaste SO! Dort habe ich diesen Code bekommen. Das Anzeigen der Seitenquelle ist ein wertvolles Werkzeug.

44
Cory Walker

Wenn Sie HTML5 verwenden, können Sie das placeholder-Attribut verwenden.

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

Meiner Meinung nach umfasst die beste Lösung weder Bilder noch den Standardwert der Eingabe. Es sieht eher wie die Lösung von David Dorward aus.

Es ist einfach zu implementieren und lässt sich gut für Bildschirmleser und Benutzer ohne Javascript verwenden.

Sehen Sie sich die beiden Beispiele hier an: http://attardi.org/labels/

Ich verwende normalerweise die zweite Methode (labels2) in meinen Formularen.

37
Tex

Der übliche Ansatz besteht darin, den Standardwert als Beschriftung zu verwenden und ihn dann zu entfernen, wenn das Feld den Fokus erhält.

Ich mag diesen Ansatz wirklich nicht, da er Auswirkungen auf die Zugänglichkeit und die Nutzbarkeit hat.

Stattdessen würde ich zunächst ein Standardelement neben dem Feld verwenden.

Wenn JavaScript aktiviert ist, legen Sie eine Klasse für ein Vorfahrenelement fest, wodurch einige neue Stile das anwenden:

  • Positionieren Sie relativ ein div, das die Eingabe und das Label enthält
  • Positionieren Sie das Etikett absolut
  • Positionieren Sie die Eingabe absolut auf dem Etikett
  • Entfernen Sie die Ränder der Eingabe und setzen Sie die Hintergrundfarbe auf transparent

Dann und auch wenn die Eingabe den Fokus verliert, teste ich, ob die Eingabe einen Wert hat. Wenn dies der Fall ist, stellen Sie sicher, dass ein Vorfahrenelement über eine Klasse verfügt (z. B. "Hide-Label").

Wenn die Eingabe den Fokus erhält, legen Sie diese Klasse fest.

Das Stylesheet würde diesen Klassennamen in einem Selektor verwenden, um die Beschriftung auszublenden (Text-Einzug: -9999px; normalerweise).

Dieser Ansatz bietet eine anständige Erfahrung für alle Benutzer, auch für Benutzer mit deaktiviertem JS und für Benutzer, die Bildschirmleseprogramme verwenden.

4
Quentin

Ich habe Lösungen zusammengestellt, die von @ Cory Walker mit den Erweiterungen von @Rafael Und der Form @Tex vorgeschlagen wurden, die für mich etwas kompliziert war .__ 

fehlersicher mit Javascript und deaktiviertem CSS.

Es wird mit der Hintergrundfarbe des Formularfelds bearbeitet, um die Beschriftung ein-/auszublenden.

<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>

Sehen Sie sich das Skript in Aktion an: http://mattr.co.uk/work/form_label.html

2
Maciek

Bitte verwenden Sie PlaceHolder.JS in allen Browsern und sehr einfach für nicht HTML5-kompatible Browser 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">

Fügen Sie auch ein Onblur-Ereignis hinzu.

1
Alex V

Ein Hinweis über die HTML-Eigenschaft Platzhalter und das Tag Textarea . Bitte stellen Sie sicher, dass zwischen <textarea> und </textarea> kein Leerzeichen steht. Andernfalls funktioniert der Platzhalter nicht. Beispiel:

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

Das wird nicht funktionieren, da zwischen den ...

1
cn123h

Wenn Sie mit der Eingabe beginnen, verschwindet es. Wenn es leer ist, wird es wieder angezeigt.

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

Einfachste Möglichkeit ...

1
Thaha kp

Sie benötigen dafür keinen Javascript-Code ... 
Ich glaube, Sie meinen das Platzhalterattribut. Hier ist der Code:

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



Der Standardtext ist grau und wenn Sie darauf klicken, verschwindet er!

0
1010

benutze das

stil:

<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");

Denken Sie daran, die Funktion defaultLabelClean () vor dem Senden des Formulars aufzurufen.

gute Arbeit

0
Davide Consonni

Ich finde es gut, das Label zu behalten und keinen Platzhalter wie oben erwähnt zu verwenden. Es ist gut für UX, wie hier erklärt: https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

Hier ein Beispiel mit Label in Eingabefeldern: codepen.io/jdax/pen/mEBJNa

0
Mohammed