Schnelleinstieg Formularzugriffe Accassibility, Form Elements

HTML-Formulare werden für User-Eingabe-Daten und die Übertragung zum Server genutzt. Bei solchen Formularen werden oft (name='...'/value='...')-Paare verwendet, die der Server entgegen nimmt und verarbeitet.

Formulare ( einführend ) Beispiel

Hier geht es um die Nutzung von Formularen und den Formularelementen. Von den Eingabeelementen wird das input-Tag besonders oft benötigt. Möglich sind (inclusiv HTML5) die input-types (siehe z.B. en.wikipedia: HTML Element HTML5 ): 

button, checkbox, color, date, 
datetime, datetime-local, email, file,
hidden, image, month, number, password,
radio, range, reset, search, submit,
tel, text, time, url, week

Ein stark vereinfachtes Formular sieht im HTML-Quelltext etwa so aus: 

<form action="server-ziel-url-fuer-die-verarbeitung">

<input type="radio" name="RB_X" value="myVal 0"  checked="checked" />
<input type="radio" name="RB_X" value="myVal 1" />

<input type="checkbox" name="CB_0" value="myVal 0" checked="checked" />

<input type="text" name="TXT0" value="... Text-Eingabe-Zeile ..." /> 
<input type="hidden" name="TXT1" value="... Text-Hinterlegen per Script ..." /> 

<textarea name="TY1"></textare> 
<input type="submit" value="Sende" /> 
   submit ruft "onsubmit" vom form-tag auf und bei "return true" weiter mit "form-action" 
</form>

Das fieldset-Tag und das legend-Tag dienen der besseren Darstellung und Kennzeichnung von Formularen und Form-Elementen (ARIA).

Formulare ( rein clientseitig ) Wofür?

Bei einer rein clientseitigen Formular-Nutzung (z.B. ECMAScript-Tools, Widgets) gibt es Vereinfachungen. Je nach ECMAScript-Programmierstil kann z.B. auf die name-Attribute verzichtet werden.

Bei einer rein clientseitigen Formular-Nutzung wird im form-Tag keine action-url benötigt und ein onsubmit im form-Tag sollte stets false zurück geben.

Zugriffe auf Formularelemente ( unterschiedliche Arten ) älter-neuer

Hier ein Beispiel, das zeigt, wie mit this und dem name-Attribut eines Formelementes auf Werte zugegriffen werden kann. Die Funktion show_el_atts_von (el) gibt Attributwerte zu el aus. 

<script>
function show_el_atts_von (el) {
  var nodeName = '\n' + (el.nodeName || ''), s="";
  s += nodeName+".type="    + el.type;
  s += nodeName+".name="    + el.name;
  s += nodeName+".value="   + el.value;
  s += nodeName+".checked=" + el.checked;
  window.alert(s);
}
</script>

Nachfolgend kann diese Funktion show_el_atts_von(el) getestet werden: 

<form action="#" onsubmit="return false;"><fieldset><pre>

<input type="button" onclick="show_el_atts_von(this);" value="teste" />   

<input type="text" name="TXT" value="Text der Eingabezeile" />

Bitte Text eingeben   und bitte auch die folgende checkbox

<input type="checkbox"
       onclick="show_el_atts_von(this);show_el_atts_von(this.form.TXT);"
       value="teste" />

Bitte auch hier klicken: 
</pre></fieldset></form">

Formularzugriffe konnen (alternativ) auch mit DOM-Funktionen erfolgen, etwa 

var ff = document.forms;
var el = ff[0].elements[2]; // [2] weil auch fieldset ein Form-Element ist
window.alert(el.value);  teste 

//oder

var form = document.getElementsByTagName('form');
var inp = form[0].getElementsByTagName('input');
window.alert(inp[1].value); teste

Zugriffe auf Formulardaten ( systemisch ) Programmierung, Architektur

Zu DOM-Elementen gehören Änderungen infolge von Events. Wie kann sicher auf DOM-Element ( Nodes ) zugegriffen werden? Wie kann eine kritische, unübersichtliche Programmierung und Vermischung von DOM-Zugriffen mit den Verarbeitungen von Element-Werten mit ECMAScript minimiert werden?

In einer Seite sind die id - Bezeichner für DOM - Nodes eindeutig. Es bietet sich an, den Tag-id-Namen als eindeutigen key-Namen zu verwenden. Der Qelltext der beiden Funktionen get_alle_formwerte(), set_formwerte(obj) ist im Qelltext in dieser Seite. Etwa 

<form action="#" onsubmit="return false;">
<input id="my_txt" type="text" value='input' /><br />
<input id="my_num" type="text" value='4711 init' /><br />
<input id="my_cb" type="checkbox" /> my Check Box<br />
<textarea id="my_ta" cols="40" rows="2">my Txtearea</textarea>
</form>

<script>
  function get_alle_formwerte() { var f = {};
    f.my_num = parseInt(document.getElementById('my_num').value, 10);
    f.my_cb = document.getElementById('my_cb').checked || false;
    f.my_txt = document.getElementById('my_txt').value;
    f.my_ta = document.getElementById('my_ta').value;
    return f;
  }
  ... siehe Qelltext in dieser Seite
</script>


my Check Box

Bitte testen: get_alle_formwerte()
set_formwerte({my_cb:true,my_num:4712})
set_formwerte({ my_txt:"MEIN TEXT", my_ta:"MEINE TA"})
set_formwerte(form_werte_init)


Objekt-Erkundung Zugriffe auf Formulardaten

Die (oft zahlreichen) Objekt-Attribute können mit einem geeigneten Debugger erkundet werden. Ist dies nicht möglich (Sehbehinderung, zu umständlich oder ähnliches), so kann ggf. die folgende Funktion myObj.show_el_atts() weiter helfen. 

myObj.show_el_atts(['attnam','attnam',...]) zeigt die Werte zu den myObj-Attributnamen an.

myObj.show_el_atts()                        zeigt zu myObj 
                                            alle Attributnamen und die aktuellen Werte an.

Object.prototype.show_el_atts = function(props) {
  var el = this, nodeName = el.nodeName || '', p, i, br = "\n", s = "", 
  build_str = function() { // innere Funktion
    if (el.hasOwnProperty(p)) { 
      s += br + nodeName + "." + p + "=" + 
           ((typeof el[p] === 'object') ? 'Element' : el[p]);
    }
  }; 
  
  props = props || 'alle'; 
  
  if (props==='alle') { 
    for (p in el) { build_str(); }
  } else { // props ist ein Array:
    for (i = 0; i < props.length; i += 1) { p = props[i]; build_str(); }
  } return s;
}

Hier ein Test: 

   <form action="#" onsubmit="return false;">
   <input type="button"
      value="alle this-properties"
      onclick="this.show_el_atts(   );"
   />  
  

   <input type="text" size="60" name="TXT" value="Text der Eingabezeile" />
   

   <input type="button" value="this.form.TXT.show_el_atts(['size','name','value'])"
   onclick="this.form.TXT.show_el_atts(['size','name','value']);"/>


   <textarea name="TA1" cols="66" rows="3">Dies ist\n  eine Textarea</textarea>
   

 teste! <input type="checkbox" onclick="show_form_atts([1]))" />
 teste! <input type="checkbox" onclick="show_form_atts([0,'FORM1']))" />
   </form">


Die folgende Funktion show_form_atts(nr) zeigt einen Überblick über ein/mehrere Formulare an. Beispiele: 

show_form_atts(1)             zeigt Elemente und wichtige Attribute von document.forms[1] an 
                              (entspricht document.getElementsByTagName('form')[1]) 

show_form_atts('FRAME1')      zeigt Elemente und wichtige Attribute von document.forms['FRAME1'] an

show_form_atts([0,'FRAME1'])  zeigt Elemente und wichtige Attribute von 
                              document.forms[0] und document.forms['FRAME1'] an

Hier der ECMAScript-Quelltext: 

function show_form_atts(nr) { 
 var i, j, k, els, el, typ, s, nn, r=[], d=document, fs = d.forms;
 if(!fs){alert("error: kein form-tag");return null;}
 if (typeof nr === 'number' || typeof nr === 'string') { j = nr; nr = []; nr.push(j); }
  for (j = 0; j < nr.length; j += 1) {k=nr[j];
   if(!d.forms[k]){alert("error: show_form_atts([nr "+k+" ???], '...')");
     return null;
   } els = d.forms[k].elements;
   for (i = 0; i < els.length; i += 1) {
     el = els[i]; nn = el.nodeName.toLowerCase();
     if (nn === 'textarea') { typ = nn; 
     } else if (nn === 'input') { typ = el.type.toLowerCase(); } else { s=nn; }
     switch (typ) {
     case 'textarea': case 'hidden':case 'button':
     case 'text': s='value='+el.value; break;
     case 'radio': s='checked='+((el.checked)?true:false); break;
     case 'checkbox': s='checked='+ ((el.checked)?true:false); break;
     default: break;
     } r.push('\n.forms['+k+'].elements['+i+'] type="'+typ+'"\n  |' + s);
   }
 } window.alert(r);
}