- Formulare ermöglichen das Eingaben von Daten in html-Seiten
- Text-Eingaben können in einzeilige Eingabefelder (input-Tag, type='text') erfolgen
- Text-Eingaben können in mehrzeiligen Textfeldern (textarea-Tag) erfolgen
- Das method-Attribut des form-Tags bestimmt die HTTP-Übertragungsmethode für die Formulardaten.
- Bei der
method="get"
(default, geeignet für Suche oder Weiterblättern)
werden die Formular-Daten an die Aufrufadresse angefügt.
Ein sog. Web-Form-Anti-Spam schützt ein HTML-Formulare vor Spam-Bots, indem es HTML-Quellcode in ECMAScript-Code wandelt und diesen einfügt.
Hinweise: w3.org forms ( HTML 5, 2013 ), de.wikipedia Webformular und en.wikipedia Form - Tag
-
<form action="http://www.example.org/cgi-bin/feedback.pl" method="get"> <!-- Formularelemente --> </form>
- Bei der
method="post"
(post = verschicken, geeignet für Datenbank oder Bestellungen)
überträgt über den Standardeingabekanal auch umfangreiche Formular-Daten. - Falls beim Client-Rechner das mail-Programm funktioniert,
so können mit
method="post"die Faomular-Daten per Mailaction="mailto:..."übertragen werden.<form action="mailto:myname@myfirma.de" method="post" enctype="text/plain"> <!-- Formularelemente --> </form>
- Text-Inhalte von Formularen können vor dem Verschicken mit ECMAScript geprüft werden.
Hier sollen unterschiedliche Möglichkeiten gezeigt werden,
wie auf Formular-Element mit ECMAScript zugegriffen werden kann.
Insbesondere wird in den Beipspielen auf das textarea-Tag zugegriffen.
Das XHTML form-Tag (als Beispiel):
<form name="NAME_FORM" id="ID_FORM" action=" onsubmit="return check(this)"> <textarea name="NAME_TA" id="ID_TA"></textarea> <input name="NAME_IP" id="ID_IP" value="" /> </form>
Zugriffe auf Formular-Elemente (Attribute, Werte, innerHTML, usw.) sind nur möglich,
wenn der
ECMAScript
-Code im body nach dem XHTML-Form-Tag steht
oder in einem
ECMAScript
-Tag im header etwa gemäß
window.onload = function () { ... hier steht ... }
steht.
Wie kann dann (dort) auf das textarea-Tag zugegriffen werden?
ta1, ta2, ta3, ta4, ta5 sind 5 verschieden Möglichkeiten,
um auf das textarea-Element zuzugreifen:
var ta1 = document.getElementById('ID_TA'); // Seite-eindeutige id
var ta2 = document.getElementsByTagName('textarea')[0]; // textarea-Array
var ta3 = document.getElementById('ID_IP').previousSibling;
var ta4 = document.getElementById('ID_FORM').childNodes[0]; // child of parent
var ta5 = document.NAME_FORM.NAME_TA; // form element
Das Tag <form ... onsubmit="return check(this)">
kann eine Funktion aufrufen, die vor der action="..."
ausgeführt wird.
Der this-Parameter entspricht hier dem form-Tag selbst.
Wie kann dann in der aufgerufenen Funktion auf das textarea-Element
zugegriffen werden?
ta2, ta3, ta4, ta5 sind verschieden Möglichkeiten,
um in der Funktion auf das textarea-Element zuzugreifen:
function check(FORM) {
var ta2 = FORM[0]; // TA-Array
var ta3 = FORM[1].previousSibling; // verheriger Nachbar
var ta4 = FORM.childNodes[0]; // child of parent
var ta5 = FORM.NAME_TA; // form element
return false; // = keine Daten-Weitergabe an action="..."
}
Prinzip (Formular in der html-Seite):
<form name = "NAME_FORMULAR"
id = "ID_FORMULAR"
action = "javascript:alert('action')"
onsubmit = "return auswertung(this);">
...
<input type='checkbox' name='CB1' /> Lieferung frei Haus
<input type='checkbox' name='CB2' /> Lieferung zu Selbstkosten
<input type='submit' value='Auswertung' />
</form>
Text-Inhalte von Formularen können vor dem Verschicken mit ECMAScript geprüft werden. Prinzip (Auswertung im Header):
function auswertung(form) {
var inp = form.getElementsByTagName('input');
for (var i=0; i < inp.length; i++) {
if(inp[i].type == "checkbox" && inp[i].checked)
{ ... }
}
return false; // bleibt lokal
}
Mit ECMAScript kann auf Formulardaten zugegriffen werden.
Mit
var form = document.getElementById('ID_FORMULAR')
var form = getElementsByName('NAME_FORMULAR')
var formarr = getElementsByTagName('form')
kann per DOM-Syntax auf Elemente zugegriffen werden.
Gebräuchlich sind auch noch die folgenden (alten) Zugriffsarten:
| Art | .Eigenschaft | .Methode() |
|---|---|---|
| Fomularindex | x = document.forms[0].action; | document.forms[0].reset(); |
| Formularname | x = document.NAME_FORMULAR.action; | document.NAME_FORMULAR.reset(); |
| Formularname | x = document.forms.NAME_FORMULAR.action; | document.forms.NAME_FORMULAR.reset(); |
| ["Formularname"] | x = document.forms["NAME_FORMULAR"].action; | document.forms["NAME_FORMULAR"].reset(); |
Der folgende html-Quelltext erzeugt beim Laden der Seite ein Formular.
<form id = "HTML_FORM" name = "HTML_FORM"
action = "javascript:alert('HTML_FORM')"
onsubmit = "return false;"
class="center">
<fieldset>
<legend> legend für text-input </legend>
<input type="text" value="input text"
name="INP" style="width:200px;" />
<input type="button" style="display:inline; width:200px"
value="Zeige die interne Tag-Darstellung"
onclick="show_innerHTML(this.form)" />
</fieldset>
<!--
alternativ: text-input:
<input type="text" value="input text"
name="INP" style="width:200px;" />
-->
<fieldset>
<legend>legend für textarea </legend>
<textarea name="TA" cols="90" rows="10" style="width:100%;">
textarea </textarea>
</fieldset>
</form>
Wie sieht die Funktion onclick="show_innerHTML(this.form)" aus?
Durch
onclick="show_innerHTML(this.form)" wird die Funktion
show_innerHTML(obj) aufgerufen, die den String str mit
obj.elements['TA'].value = str;
in das textarea-Objekt ['TA'] schreibt.
Die innere Darstellung bei den Browsern ist unterschiedlich.
Deshalb werden die internen Tags in der
function show_innerHTML(obj)
mit Hilfe von Regulären Ausdrücken in Kleinbuchstaben gewandelt.
function show_innerHTML(obj) {
var str = obj.innerHTML;
var re = new RegExp("<(/?)(\\w+)", "gi");
if( re.exec(str) ) {
var repl = "\n<"+RegExp.$1;
repl += RegExp.$2.toLowerCase();
str = str.replace(re, repl);
} obj.elements['TA'].value = str;
}
Formulare sind ein mächtiges Darstellungs- und Interaktionsmittel.
Wie werden
DOM-Objekte erzeugt?
Ein DOM-Tag kann (nicht bei MSIE) erzeugt werden wie z.B.
var tag = document.createElement("input");
Attribute werden eingefügt (nicht bei MSIE) wie z.B.
tag.setAttribute("type","text");
Der MSIE braucht eine "Sondereinladung", die
in str html-Source-Code aufbaut und dann das Objekt mit
var tag = document.createElement(str);
erzeugt.
Die Funktion create_tag(att_paare)
übernimmt die MSIE-Sonderbehandlung.
Der Funktion create_tag(att_paare)
wird ein Array übergeben.
att_paare[0] ist der Tagname,
( ) gefolgt von den Attribut-Paaren
att_paare[i] ein Attributname
und
att_paare[i+1] ein zugeordneter Attributwert.
Beispiel:
var inp = create_tag(['input', 'name','INP',
'type','text', 'value','input text',
'style','width:100%;border:none;']);
Wie wird ein Formular-Objekt per JavaScript erzeugt? Die benötigten Elemente für das Formular sind:
var fs1 = create_tag(['fieldset']);
var ld1 = create_tag(['legend']);
ld1 = append_text(ld1, 'legend für text-input');
var fs2 = create_tag(['fieldset']);
var ld2 = create_tag(['legend']);
ld2 = append_text(ld2, 'legend für textarea');
var inp = create_tag(['input', 'type','text', ... ]);
var but1 = create_tag(['input', 'type','button', ...
'onclick','show_innerHTML(this.form)']);
var ta = create_tag(['textarea', ...]);
ta = append_text(ta, 'textarea');
var form = create_tag(['form',...]);
|
// Zusammenbau von fs1 etwa:
fs1.appendChild(ld1); // ld1 an fs1 anfügen
fs1.appendChild(inp); // inp in fs1
// Zusammenbau von fs2 etwa:
fs2.appendChild(ld2); // ld2 an fs2 anfügen
fs2.appendChild(ta); // ta in fs2
// Zusammenbau von form etwa:
form.appendChild(fs1); // fs1 in form
form.appendChild(but1);// but1 in form
form.appendChild(fs2); // fs2 in form
// form in div-Tag (mit id=..) einfügen:
var id_obj=document.getElementById(id)
id_obj.appendChild(form);
|
Bei einem erneuten Einfügen des form-Objektes in das div-Tag (mit id = ...) ist vorher das alte div-Inhalt zu löschen. Etwa gemäss Ist
var id_obj=document.getElementById(id)
if(id_obj.childNodes.length > 0){
id_obj.removeChild(id_obj.childNodes[0]);
} id_obj.appendChild(form);
OP: ===================================================
<FIELDSET>
<LEGEND>legend für text-input</LEGEND>
<INPUT type="text" value="form" name="INP"
STYLE='width: 100%;
border-top-color: #000000; border-left-color: #000000;
border-right-color: #000000; border-bottom-color: #000000;
border-top-width: medium; border-left-width: medium;
border-right-width: medium; border-bottom-width: medium;
border-top-style: none; border-left-style: none;
border-right-style: none; border-bottom-style: none'/>
</FIELDSET>
<INPUT type="button" STYLE='width: 100%'
value="Zeige die interne Tag-Darstellung" onclick="show_innerHTML(this.form)"/>
<FIELDSET>
<LEGEND>legend für textarea</LEGEND>
<TEXTAREA name="TA" cols="90" rows="10" STYLE='width: 100%'>
textarea
</TEXTAREA>
</FIELDSET>
FF: ===================================================
<fieldset>
<legend>legend für text-input</legend>
<input style="border: medium none ; width: 100%;"
name="INP" value="form" type="text">
</fieldset>
<input onclick="show_innerHTML(this.form)"
value="Zeige die interne Tag-Darstellung" style="width: 100%;" type="button">
<fieldset>
<legend>legend für textarea</legend>
<textarea style="width: 100%;" rows="10" cols="90" name="TA">
textarea
</textarea>
</fieldset>
MSIE: ===================================================
<FIELDSET>
<LEGEND>legend für text-input</LEGEND>
<INPUT style="WIDTH: 100%;
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
value=form name=INP>
</FIELDSET>
<INPUT style="WIDTH: 100%" onclick=show_innerHTML(this.form)
type=button value="Zeige die interne Tag-Darstellung">
<FIELDSET>
<LEGEND>legend für textarea</LEGEND>
<TEXTAREA style="WIDTH: 100%" name=TA rows=10 cols=90>
textarea
</TEXTAREA>
</FIELDSET>
function create_tag(att_paare) {
if(!att_paare || att_paare.length < 1) return null;
var len = att_paare.length;
if(len%2==0) alert("err att_paare"+att_paare);
var clientPC = navigator.userAgent.toLowerCase();
if((clientPC.indexOf('msie')!=-1)
&& (clientPC.indexOf('opera') ==-1)) {
// Sondereinladung an msIe:
var str = '<' + att_paare[0] + ' ';
for(var i=1; i < len; i += 2) {
str += att_paare[i] + '="' + att_paare[i+1] + '" ';
} str += '></' + att_paare[0] + '>';
return document.createElement(str);
} else {
// W3C: FF + Opera:
var tag = document.createElement(att_paare[0]);
for(var i=1; i < len; i += 2) {
tag.setAttribute(att_paare[i],att_paare[i+1]);
} return tag;
}
}
function append_text(obj, text){
var str = document.createTextNode(text);
obj.appendChild(str); return obj;
}
function show_innerHTML(obj) {
var str = obj.innerHTML;
var re = new RegExp("<(/?)(\\w+)","gi");
if( re.exec(str) ) {
var repl = "\n<"+RegExp.$1;
repl += RegExp.$2.toLowerCase();
str = str.replace(re, repl);
} obj.elements['TA'].value = str;
}
function create_my_form(id) {
var form = create_tag(['form', 'name','JS_FORM',
'action','',
'onsubmit','return false;']);
var fs1 = create_tag(['fieldset']);
var ld1 = create_tag(['legend']);
ld1 = append_text(ld1, 'legend für text-input');
var inp = create_tag(['input', 'type','text',
'value','input text', 'name','INP',
'style','width:100%;border:none;']);
//
var fs2 = create_tag(['fieldset']);
var ld2 = create_tag(['legend']);
ld2 = append_text(ld2, 'legend für textarea');
var ta = create_tag(['textarea', 'name','TA',
'cols','90', 'rows','10',
'style', 'width:100%']);
ta = append_text(ta, 'textarea');
var but1 = create_tag(['input', 'type','button',
'style','width:100%', 'value','Zeige die interne Tag-Darstellung',
'onclick','show_innerHTML(this.form)']);
fs1.appendChild(ld1);
fs1.appendChild(inp);
form.appendChild(fs1);
form.appendChild(but1);
fs2.appendChild(ld2);
fs2.appendChild(ta);
form.appendChild(fs2);
// an DIV-Tag einfügen:
var id_obj=document.getElementById(id)
if(id_obj.childNodes.length>0){
id_obj.removeChild(id_obj.childNodes[0]);
} id_obj.appendChild(form);
}
Formular mit ECMAScript