ECMAScript und Formular

Nächste Vorherige Lösung Punkte

Das folgende Code-Schnipsel soll abhängig von der Anzahl der eingetippten Zeichen den Eingabehintergrund hellrot färben. Richtige Aussagen bitte ankreuzen.
<script>
function set_color(that, a,b) { 'use strict';
  var len = that.value.length;
  (len < a || len > b) ? that.style.backgroundColor='#faa'
                      : that.style.backgroundColor='#fff';
}
</script>

<form action="">
  <input name="MYNAM" value="123" onkeyup="set_color(this,3,5)">
</form>
Der Hintergrund des gesamten Formulares wird hellrot, wenn weniger als 3 Zeichen oder mehr als 5 Zeichen in der Texteingabe name="MYNAM" sin.
Weil die Zeile (len < a || len > b) ? ... und auch 'use strict'; keine syntaktisch richtigen Zuweisungen sind, bewirkt der Aufruf set_color(this,3,5) einer Warnung.
Zusätzlich zu onkeyup="set_color(this,3,5)" ist auch onclick="set_color(this,3,5)" erlaubt
Das folgende Code-Schnipsel enthält HTML-Quelltext.
<form
   action="http://de.wikipedia.7val.com/wiki/Spezial:Suche"
   method="get">
  <input type="text" name="search" value="">
  <input type="submit" value="Artikel" name="go">
  <input type="submit" value="Volltext" name="fulltext">
</form>
Bei einem Formular dürfen mehrere input-submit-Buttons verwendet werden.
Wegen SOP ( Same-Origin-Policy ) darf das Formular nicht in einer anderen Homepage stehen.
Das Frmular bietet auch auf Mobilfon's eine wikipedia-Suche an.
Es geht um das clientseitige Validieren eines Formulares, das aus input-Tags und einer Textarea besteht. Falls die Formulardaten mit Hilfe von action zum Server gesendet werden, werden (name/value)-Paare übertragen. Bitte die richtigen Aussagen ankreuzen.
<script>
function push_tg(tg, arr) {  
  arr.push('<' + tg.tagName.toLowerCase()+ 
     ' name="'  + tg.name  + '"' +
     ' value="' + tg.value + '" />');
}
function validiere_form(form) {
  var tg, type, i, arr = [ ], 
  ftgs = form.elements;                       /* 1 */
  form.URL.value = location.href;             /* 2 */

  for (i = 0; i < ftgs.length; i += 1) { 
    tg = ftgs[i]; type = tg.type.toLowerCase(); 
    if (type === 'radio' || type === 'checkbox') { 
      tg.value = tg.checked ? '1' : '0';     /* 3 */
    } push_tg(tg, arr);                      /* 4 */
  } ftgs.TA.value = '\n===\n'+arr.join('\n');/* 5 */
  return false;                              /* 6 */
}
</script>
<form method="post" action = "#" onsubmit = "return validiere_form(this);">
 <input type="hidden" name="URL" value="index.htm" />
 <input type="text" name="NAME" value="" required="required" placeholder="Vorname" /> 
 <input type="checkbox" name="CB1" checked="checked" />
 <input type="checkbox" name="CB2" value="" /><br />
 <textarea name="TA" rows="22" cols="60">TA</textarea><br />
 <input type="submit" value="Bitte Senden" />
</form>
Bei einem Klick auf des submit-Button wird erst for-onsubmit ausgeführt. Gibt die onsubmit-Funktion false zurück, so wird kein action ausgeführt.
Bei /* 1 */ entspricht form dem this vom onsubmit-Ausfruf der validiere_form()-Funktion.
Bei /* 2 */ wird der value="index.htm" vom hidden-Element mit name="URL" mit dem URL-String der Seite überschrieben.
Bei /* 3 */ wird bei jedem type="checkbox"-Input-Tag der checked-Zustand als 1 oder 0 in das value-Attribut übertragen.
Bei /* 4 */ wird mit Hilfe der Funktion push_tg(tg, arr) von jedem Tag ein name-value-String in arr "gepushed".
Bei /* 5 */ werden die arr-String-Elemente zu einen Gesamtstring zusammen gefügt.
Bei /* 6 */ wird false zurück gegeben und dadurch wird nachfolgend action ausgeführt.
Bei HTML5 bedeutet bei einem Input-text-Feld das Attribut required="required", daß das Eingabefeld nicht leer bleiben darf.
Bei HTML5 bedeutet bei einem Input-text-Feld das Attribut placeholder="Vorname", daß das Eingabefeld zunächst den String "Vorname" anzeigt. Der String "Vorname" verschwindet, wenn das Eingabefeld den Fokus erhält.
Das folgende Code-Schnipsel enthält einen Array arr mit 8*9 = 72 Zahlen. Was soll das Code-Schnipsel bewirken? Richtige Aussagen bitte ankreuzen.
<script>
var captcha = (function (anz) {'use strict';
 var arr = [ 
 49, 50, 51, 52, 53, 54, 55, 56, 57,
 49, 50, 51, 52, 53, 54, 55, 56, 57,
 10102, 10103, 10104, 10105, 10106, 10107, 10108, 10109, 10110, 
 10122, 10123, 10124, 10125, 10126, 10127, 10128, 10129, 10130,
  9312,  9313,  9314,  9315,  9316,  9317,  9318,  9319,  9320, 
 10112, 10113, 10114, 10115, 10116, 10117, 10118, 10119, 10120, 
 9332, 9333, 9334, 9335, 9336, 9337, 9338, 9339, 9340, 
 9352, 9353, 9354, 9355, 9356, 9357, 9358, 9359, 9360], 
 i, j, k, len = arr.length, num ='', txt ='', 
 sty = 'font-style:italic;';

 for (i = 0; i < anz; i += 1) {
   j = 0.95 + Math.random() * 1.6; 
   k = Math.floor(Math.random() * len); 
   num += 1 + k % 9;
   if(k % 3 === 0) { txt += "<span style='"+sty+"'>&#";
   } else {  txt += "<span style='font-size:"+j+"em;'>&#";
   } txt += arr[k]+"; </span>"; } return {num:num, txt:txt};
}(4));

window.onload = function(){
  document.getElementById('CAPTCHA_PIC').innerHTML = captcha.txt;
}
</script>

<p id="CAPTCHA_PIC"></p>

<form action="#"
  onsubmit="alert(this.CAPTCHA_TXT.value===captcha.num);return false;">
<input type="text" name="CAPTCHA_TXT" value="" />
<input type="submit" value="Ist CAPTCHA ok?" />
</form>
Für jedes i der for-Schleife wird eine Zufallszahl k ermittelt mit dem Bereich 0, 1, 2, ..., 71
Als Rückgabewert von num ergibt sich eine Zahl = (1-9) + (1-9) + (1-9) + (1-9), wbei (1-9) eine Zahl 1, 2, 3, ..., 9 ist.
In der Variablen txt werden Zahlen aufaddiert.
Infolge von document.getElementById('CAPTCHA_PIC').innerHTML = captcha.txt; werden in <p id="CAPTCHA_PIC"></p> Unicode-Ziffern-Zeichen, die grafischen Zeichen ähneln, dargestellt.
Wird in <input type="text" name="CAPTCHA_TXT" value="" /> die Zahl eingetragen, die den Unicode-Ziffern-Zeichen entspricht und dann submit geklickt, so zeigt onsubmit Gleichheit (true) an.