getElementsByName – Zugriff auf Formularfelder über das name-Attribut

getElementsByName – Zugriff über das Name-Attribut

getElementsByName gibt Elemente mit dem entsprechenden name-Attribut zurück und wird für den Zugriff auf Formularelemente verwendet.

getElementsByName – Formularfelder

gibt eine HTMLCollection aller Elemente mit dem name-Attribut name zurück.

Eine HTMLCollection ist eine Liste oder Sammlung von Elementen. Die einzelnen Elemente können über einen Index angesprochen werden, length gibt die Zahl der Elemente zurück und der Index beginnt mit 0. Die Reihenfolge der Elemente entspricht ihrer Reihenfolge im Quelltext.

Diese Liste sieht aus wie ein Array, hat einen Index wie ein Array, ist aber kein Array, so dass nicht alle Array-Methoden benutzt werden können.

Das name-Attribut in Formularen kodiert Name-/Wertpaare für eine Anwendung (meist PHP auf dem Server) und ist in der Regel eindeutig – ähnlich dem id-Attribut. Die Ausnahme bilden INPUT-Elemente vom Typ radio, in denen ein gemeinsames name-Attribut eine zusammengehörige Gruppe von Radiobuttons identifiziert, aber auch ein <input type="submit" name="submit" … /> kann mehrfach im Dokument vorkommen – z.B. als Button „Speichern“ und „Vorschau“.

<label for="test">
   <input type="text" name="test" id="test">
</label>

Das name-Attribut wendet sich an die Anwendung auf dem Server. Das PHP-Programm greift mit $_GET["test"] oder $_POST["test"] über das Paar name / value direkt auf den Wert der Eingabe in das Feld mit dem name-Attribut zu.

In der PHP-Anwendung auf dem Server
if (isset ($_POST ['test'])) { // Wenn beim Absenden ein Feld test mitgeliefert wurde
	$myvar = $_POST['test'];
}
Javascript auf der Client-Seite
document.getElementsByName("test")[0].oninput = function (){
    document.querySelector("#testinput").innerHTML = this.value;
} 

Ein sauberes HTML-Formular wird zusätzlich zum Name-Attribut ein id-Attribut einsetzen. So ist es möglich, das Feld durch ein label-Tag zugänglich zu machen und dem Benutzer die Eingabe zu erleichtern. Das Script auf der Client-Seite wird i.d.R. über das id-Attribut auf die Eingabe zugreifen.

In diesem Sinne sollte das Javascript bei eindeutigen Formularfeldern besser getElementById ("test") bzw. querySelector ("#test") den Vorzug geben.

getElementsByName für Radio-Buttons

In gleicher Weise wie bei getElementsByClassName und getElementsByTagName hat getElementsByName eine Eigenschaft length für die Anzahl der gefundenen Knoten und kann auf die gleiche Weise durchlaufen werden.

Farbe
<label><input type="radio" name="color" value="green"> Grün</label>
<label><input type="radio" name="color" value="red"> Rot</label>
<label><input type="radio" name="color" value="blue"> Blau</label>
var color = document.getElementsByName("color");
var lc = color.length;
for (var i=0; i<lc; i++) {
   color[i].onchange = function () {
      var colorField = document.querySelector('input[name="color"]:checked').value;
      document.querySelector("#result").setAttribute("style","background-color:" + colorField);
   }
}

Sitzt das label-Tag rund um das input-Element, braucht es kein for-Attribut, sondern vergrößert die sensitive Fläche der kleinen Radio-Buttons.

Das name-Attribut

Im Grunde genommen ist getElementsByName nur für die Felder von Formularen zuständig. In den Anfangszeiten des DOM gab des das name-Attribut noch für Elemente, die ein internes Sprungziel darstellten.

<a href="#target">zum Sprungziel</a>
   …
   …
<div name="target">Sprungziel</div>

Mit HTML5 gilt das name-Attribut in vielen Elementen als veraltet und unerwünscht und soll durch ein id-Attribut ersetzt werden. In den modernen Browsern funktioniert dieser alte Konstrukt darum auch nicht mehr, sondern das Sprungziel benutzt das id-Attribut.

Auch in veralteten HTML-Formularen sehen wir vielleicht ab und zu noch ein name-Attribut, das aber immer schon überflüssig war, denn der Wert des name-Attributs im form-Tag wird der Anwendung auf dem Server nicht mitgeliefert.