Um ein Formularelement mit einer Beschriftung zu versehen, existiert der<label> Tag.

Anders als bei der Verwendung von „normalem“ Text besteht hier, dank des for-Attributs, ein direkter Bezug zum jeweiligen Eingabefeld.

Zusätzlich kann es sinnvoll sein, dem Formularfeld einen Wert vorzugeben. Der Nutzer sieht spo, unabhängig von der Positionierung des Labels, kurz vor der Eingabe, noch einmal, welcher Wert gefragt ist.

In einem kleinem HTML Beispiel sieht das Ganze so aus:


<form>

<label for="email">E-Mailadresse</label>
<input type="text" value="E-Mail" title="E-Mail" name="email" />

<label for="nachricht">Nachricht</label>
<textarea name="nachricht" title="Hinterlassen Sie hier Ihre Nachricht.">
Hinterlassen Sie hier Ihre Nachricht.
</textarea>

<input id="submit" type="submit" name="submit" value="Absenden" />

</form>

 

Klickt der Nutzer nun in eines der Felder, so blebt der vorgegebene Inhalt erhalten. Der Anwender ist gezwungen diese Vorgabe manuell zu löschen.

Eleganter ist es, den Text via Javascript zu entfernen. Dank jQuery lässt sich dies sehr einfach realisieren.


$('.clearMeFocus')
.focus( function() {
if ( $(this).val() == this.defaultValue ) { $(this).val(''); }
})

 

Bekommt also ein Element mit der Klasse .clearMeFocus Fokus, so wird zunächst geprüft, ob der aktuelle Wert dem Voreinstellungswert entspricht. Falls ja, wird der Wert und damit der Inhalt des Feldes gelöscht.

Verlässt der Nutzer das Feld, kann mit einer kleinen Funktion geprüft werden, ob eine Eingabe erfolgt ist. Sollte das Feld noch immer leer sein, so lässt sich der Wert bequem wieder auf den Eingangswert zurücksetzen.


.blur( function() {
if ( $(this).val()=='' ) { $(this).val(this.defaultValue); }
});

 

Komplett sieht die Anweisung dann also wie folgt aus:


$('.clearMeFocus')
.focus( function() {
if ( $(this).val() == this.defaultValue ) { $(this).val(''); }
})
.blur( function() {
if ( $(this).val()=='' ) { $(this).val(this.defaultValue); }
});

 

Gesehen bei Nick Boldison und der dort vorhandenen Kommentare etwas angepasst.

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • Y!GG
  • Oneview
  • MisterWong
  • Reddit
  • Webnews
  • seekXL
  • Folkd
  • Digg
  • del.icio.us
  • Newsrider
  • Colivia
  • Linkarena
  • Technorati
  • Wikio DE
  • SEOigg
  • blogmarks
  • Blogosphere News
  • Blogsvine
  • Facebook
  • Google Bookmarks
  • Webbrille
Die kleinen Icons verlinken verschiedene Social Bookmarking Dienste. Über einen Eintrag würden wir uns sehr freuen. Unter http://schraegschrift.de/feed/ findet man den kompletten Newsfeed. Die Reaktionen auf diesen speziellen Eintrag können Sie mit Hilfe eines weiteren RSS 2.0 Feeds verfolgen. Sie können einen Kommentar hinterlassen, oder sie setzen ein Trackback von Ihrer eigenen Seite.

Lesenswert!

  • Browserinhalt mit Javascript editibar machen

    Ab und zu ist es sinnvoll einen Screenshot vom Browserinhalt zu machen, um damit die Verwendung einer Webseite oder eines Formulars oder ähnlichem zu verdeutlichen. Wenn eine Änderung im Screenshot ...

  • Prototype aus Wordpress entfernen

    Wordpress lädt bei jedem Seitenaufruf die Javascript Bibliothek Protoype. Ganze 136 Kilobyte die nur für die Nutzung einiger Plugins sinnvoll sind. Je nach der Gestaltung Eurer Seite kann dies ...

  • Firefox 3.5

    Er ist da! Der neue Firefox 3.5 kann ab heute runtergeladen und installiert werden. Ein paar Neuigkeiten: schnellere JavaScript-Engine TraceMonkey neue Funktionen aus HTML 5 (u.a. ...

  • Nokia und Microsoft integrieren jQuery

    Sowohl Nokia als auch Microsoft integrieren jQuery in Ihre offiziellen Entwicklertools. Bei Microsoft wird jQuery ein Teil des Visual Studio. Laut den Angaben auf der jQuery Seite möchte Nokia ...

  • Der Internet Explorer 9 und seine Fischfreunde

    Alles neu macht der ... April. Es ist soweit. Windows 7 hat mir den Internet Explorer 9 angeboten. Eigentlich nicht unbedingt einen Post wert? Stimmt, aber in diesem Zusammenhang ist mir erstmalig ...

  • CodeIgniter -> Datenbank -> leere Seite (leerer View)

    Wer sich wundert, dass wenn er in CodeIgniter eine Datenbank per $this->load->database(); oder via $autoload['libraries'] = array('database'); einbindet, nur eine leere Seite zu sehen bekommt, obwohl ...

  • mht Datei? MHTML? Was ist das denn?

    Erst dachte ich, da hat sich doch jemand vertippt. Aber nein, weit gefehlt, es gibt tatsächlich ein mir bis dato unbekanntes Dateiformat. Wer schon einmal versucht hat eine Webseite zu speichern ...

  • Klickstrecken machen Page Impressions

    Ist Euch mal aufgefallen, wie viele Klickstrecken es auf Chip, PC-Welt und ähnlichen Seiten gibt? Haben die keinen Platz nach unten? Doch, hätten die schon, aber das Interesse, den gesamten Content ...

  • Jquery CSS Menu

    Viele CSS Menüs sehen relativ gleich aus. Beim "Mouseover" wird die Schrift fett oder der Hintergrund bekommt ne andere Farbe. Was etwas komplexere Animationen angeht, siehts mit CSS eher mau ...

  • "Little Boxes" - Teil 2

    So klein sind die Boxen von Peter Müller eigentlich gar nicht. Ich dachte, hmm ... Markt und Technik und ... naja, ganz schön einfach...". Aber jetzt, wo ich durch bin, muß ich sagen: Durchaus ...

Eine Antwort hinterlassen

Name (*)
Mail (wird nicht veröffentlicht) (*)
Webseite
Kommentar