HTML5-Handbuch - die neuen Features von HTML5

Parameter, welcher Radiobutton aktiviert werden soll. Das Aktivieren geschieht durch einen HTML-DOM-Zugriff auf das
checked
-Attribut, mit dem ein Radiobutton als aktiviert gekennzeichnet werden kann.
Referenzinformationen
    Eventreferenz
onkeypress
,
    Eventreferenz
onkeyup
:

10.1.3    Interaktive Elementereignisse
    Event-Handler sind besonders sinnvoll bei Elementen, mit denen der Anwender in irgendeiner Form etwas tun kann, zum Beispiel Hyperlinks, Formularelemente oder eingebettete Video- oder Audio-Player. Solche Elemente kann man im weiteren Sinne als interaktive Elemente verstehen.
Das ist allerdings kein wirklich scharfer Begriff, denn letztlich kann in HTML5 jedes sichtbare Element interaktiv werden. Das nachfolgende Beispiel konzentriert sich auf Formularinhalte.
Beispiel
    
    
    
    
    
    
    
    
    

     onsubmit="return prepareInput();">
    

    Name:

          onblur="hasContent('name', 'name_msg')"
      onchange="hideMessage('name_msg')">
    

    
    Bitte geben Sie Ihren Namen ein!
    
    

    

    E-Mail:

        onblur="hasContent('mail', 'mail_msg')"
    onchange="hideMessage('mail_msg')">
    

    
     Bitte geben Sie Ihre E-Mail-Adresse ein!
    
    

    

    

    
    
Erläuterung
    Das Beispiel zeigt ein vollständiges HTML-Dokument. Der Kopfbereich enthält einen Script-Bereich mit JavaScript-Funktionen, die im Zusammenhang mit den verwendeten Event-Handlern benötigt werden. Der Dokumentkörper besteht aus einem Formular, wie es auf einer Seite stehen könnte, wo man einen Newsletter abonnieren kann. In zwei Eingabefeldern soll der Anwender seinen Namen und seine Mailadresse eingeben. Unterhalb jedes der beiden Eingabefelder, ist jeweils ein
span
-Element notiert, das jedoch im Normalfall nicht sichtbar ist. Dafür sorgt die Stylesheet-Angabe
style=
"display: none"
.
    Die
input
-Elemente für die beiden Eingabefelder für Name und Mailadresse enthalten jeweils zwei Event-Handler:
onblur
und
onchange
. Das
blur
-Ereignis wird ausgelöst, wenn der Anwender ein interaktives Element, das zuvor den Fokus hatte, verlässt. Im Fall der
input
-Felder bedeutet das: wenn der Cursor sich zuletzt im Eingabefeld befandund der Anwender nun das Feld verlässt. Dabei ist egal, ob er durch einen Klick woanders hin geht oder mit der Tabulator-Taste. Das
change
-Ereignis wird ausgelöst, sobald sich der Inhalt oder Wert des Elements ändert, also beispielsweise, wenn der Anwender ein Zeichen eingibt, oder wenn er mit Maus und über Kontextmenü Inhalte aus der Zwischenablage in das Feld einfügt.
    Dem Event-Handler
onblur
wird in beiden Eingabefeldern der Aufruf einer JavaScript-Funktion namens
hasContent()
zugewiesen. Der Funktion werden zwei Parameter übergeben, nämlich die
id
-Namen des Eingabefeldes und des unterhalb davon notierten
span
-Elements mit dem verborgenen Inhalt. Die Funktion
hasContent()
ist im Script-Bereich im Dokumentkopf notiert. Sie prüft, ob die Anzahl der im Eingabefeld eingegebenen Zeichen 0 ist. Ist das der Fall, wird das verborgene
span
-Element auf sichtbar gesetzt. Der Anwender sieht also die Aufforderung wie z. B. Bitte geben Sie Ihren Namen ein! Außerdem wird der Cursor wieder in das Eingabefeld gesetzt. Sobald der Anwender dann ein Zeichen eingibt, wird der Event-Handler
onchange
ausgelöst. Er ruft die Funktion
hideMessage()
auf. Übergeben wird der
id
-Name des
span
-Elements mit dem Aufforderungstext. Die Funktion, ebenfalls im Dokumentkopf notiert, setzt den Aufforderungstext wieder auf unsichtbar.
    Im einleitenden

-Tag des Beispiels ist noch ein weiterer Event-Handler