<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>/home/antu &#187; HTML</title>
	<atom:link href="http://www.antusblog.de/category/webgestaltung/html-webgestaltung/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.antusblog.de</link>
	<description>Linux, Programmierung und andere Dinge die mich interessieren</description>
	<lastBuildDate>Mon, 26 Oct 2009 06:00:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Absenden, Zurücksetzen und Verlassen von Formularen</title>
		<link>http://www.antusblog.de/2009/06/15/absenden-zurucksetzen-und-verlassen-von-formularen/</link>
		<comments>http://www.antusblog.de/2009/06/15/absenden-zurucksetzen-und-verlassen-von-formularen/#comments</comments>
		<pubDate>Mon, 15 Jun 2009 20:48:58 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Java Script]]></category>
		<category><![CDATA[Absenden]]></category>
		<category><![CDATA[Formular]]></category>
		<category><![CDATA[Schließen]]></category>
		<category><![CDATA[Verlassen]]></category>
		<category><![CDATA[Zurücksetzen]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=1510</guid>
		<description><![CDATA[Manchmal verklickt man sich, oder man überliest in Eile einen Hinweis. Da kann es schon mal passieren, das man ausversehen auf die Zurücksetzen-Schaltfläche anstatt auf die direkt daneben liegende Absenden-Schaltfläche klickt. Oder man schließt versehentlich das falsche Fenster, und alle im Formular eingegebenen Daten müssen noch einmal eingegeben werden. Gerade bei längeren Forenbeiträgen, oder Blog-Artikeln [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.antusblog.de/wp-content/uploads/2009/06/Formular.schliessen.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/06/Formular.schliessen.png" alt="Abfrage vor dem Schließen eines Formulars/einer Seite" title="Abfrage vor dem Schließen eines Formulars/einer Seite" width="380" height="150" class="aligncenter size-full wp-image-1549" /></a>Manchmal verklickt man sich, oder man überliest in Eile einen Hinweis. Da kann es schon mal passieren, das man ausversehen auf die Zurücksetzen-Schaltfläche anstatt auf die direkt daneben liegende Absenden-Schaltfläche klickt. Oder man schließt versehentlich das falsche Fenster, und alle im Formular eingegebenen Daten müssen noch einmal eingegeben werden. Gerade bei längeren Forenbeiträgen, oder Blog-Artikeln ist das sehr ärgerlich. </p>
<p>Ein paar einfache Java Script-Funktionen schaffen da Abhilfe. Vor dem Absenden oder Zurücksetzen eines Formulars kann der Benutzer noch einmal gefragt werden ob er das wirklich tun will. Auch vor dem Verlassen/Schließen der Seite lässt sich eine solche Abfrage erstellen. Außerdem erkläre ich, wie man eine Schaltfläche erst nach einer bestimmten Zeit aktivieren kann.</p>
<p><span id="more-1510"></span></p>
<h2>Zurücksetzen der Formularfelder</h2>
<p>Um dem Benutzer die Möglichkeit zu geben, die Formularfelder wieder auf den Anfangswert zurückzusetzen bzw. sie wieder zu leeren genügt ein <code>input</code>-Element vom Typ <code>reset</code>.</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;reset&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Zur&amp;uuml;cksetzen&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span></pre></div></div>

<p>Mit Java Script ist es allerdings auch möglich, beim Zurücksetzen des Formulars noch weitere Aktionen auszuführen oder das Zurücksetzen besser zu steuern. So ist es beispielsweise möglich nur bestimmte Felder zurückzusetzen oder den Benutzer zu fragen ob er die Daten wirklich zurücksetzen möchte. Dazu trägt man im <code>onreset</code>-Ereignis des <code>form</code>-Elementes die Funktion ein, die beim Zurücksetzen des Formulars ausgeführt werden soll.</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">action</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;...&quot;</span> <span style="color: #000066;">onreset</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;return wirklichZuruecksetzen();&quot;</span>&gt;</span></pre></div></div>

<p>Es ist auch möglich die Funktion einen Wert zurückgeben zu lassen, mit dem man steuern kann ob das Formular auch wirklich zurückgesetzt wird. Gibt die aufgerufene Funktion <code>false</code> zurück wird das Formular nicht zurückgesetzt, bei <code>true</code> wird es zurückgesetzt.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> wirklichZuruecksetzen<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066;">confirm</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Alle Eingaben loeschen?'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// Anstatt dessen koennte man hier auch nur bestimmte Felder zuruecksetzen und</span>
	<span style="color: #006600; font-style: italic;">// false zurueckgeben.</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<h2>Abfrage vor dem Absenden</h2>
<p>Um eine Abfrage vor dem Absenden zu erstellen, trägt man einfach eine Funktion beim <code>onsubmit</code>-Ereignis des <code>form</code>-Elements ein, auch hier entscheidet wieder der Rückgabewert darüber ob das Formular abgesendet wird.</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">action</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;...&quot;</span> <span style="color: #000066;">onsubmit</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;return confirm('Daten abschicken?');&quot;</span>&gt;</span></pre></div></div>

<p>Der Vorteil dieser Methode ist, das sie schnell und einfach programmiert ist, der Nachteil das sie nur funktioniert, wenn der Benutzer Java Script aktiviert hat bzw. sein Browser Java Script unterstützt. Bei wichtigen Formularen (beispielsweise einer Bestellung) ist es empfehlenswert, die Daten erst an eine Zwischenseite zu senden, welche noch einmal alle Eingaben auflistet und auf der noch einmal das Absenden bestätigt werden muss. </p>
<p>Im <code>onsubmit</code>-Ereignis lässt sich übrigens nicht nur eine Abfrage einbauen. Man könnte beispielsweise auch überprüfen ob alle Felder (richtig) ausgefüllt sind, und den Benutzer auf eventuelle Fehler hinweisen/auffordern diese zu korrigieren.</p>
<h2>Verlassen/Schließen des Formulars: Abfrage bzw. Funktion ausführen</h2>
<p>Man kann den Benutzer vor dem Verlassen der aktuellen Seite zu fragen ob er die Seite wirklich verlassen möchte. Dazu kann das <a href="https://developer.mozilla.org/en/DOM/window.onbeforeunload"><code>onbeforeunload</code></a>-Ereignis verwendet werden, welches heutzutage von den meisten Browsern unterstützt wird, obwohl es nicht zum Standard gehört.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/* Fragt den Benutzer, ob er die Seite wirklich verlassen moechte.
 */</span>
window.<span style="color: #660066;">onbeforeunload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// Hier koennte man noch abfragen ob bereits Eingaben getaetigt wurden,</span>
	<span style="color: #006600; font-style: italic;">// wenn nicht, braucht man in den meisten Faellen wohl auch keine Nachricht</span>
	<span style="color: #006600; font-style: italic;">// anzeigen.</span>
	<span style="color: #003366; font-weight: bold;">var</span> nachricht <span style="color: #339933;">=</span> <span style="color: #3366CC;">'Sie haben das Formular noch nicht abgesendet, möchten Sie das Fenster trotzdem schließen?'</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> e <span style="color: #339933;">=</span> e <span style="color: #339933;">||</span> window.<span style="color: #660066;">event</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		e.<span style="color: #660066;">returnValue</span> <span style="color: #339933;">=</span> nachricht<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">return</span> nachricht<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// Keine Meldung ausgeben, wenn der Benutzer die Seite ueber die</span>
	<span style="color: #006600; font-style: italic;">// Absenden-Schaltflaeche verlaesst.</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> document.<span style="color: #660066;">forms</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
		document.<span style="color: #660066;">forms</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">onsubmit</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> window.<span style="color: #660066;">onbeforeunload</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Die dem <code>onbeforeunload</code>-Ereignis zugewiesene Funktion sorgt dafür das der Benutzer beim Schließen des Fensters bzw. beim Verlassen der Seite gefragt wird ob er die Seite wirklich schließen möchte. Damit das geschieht, muss die Nachricht, die angezeigt werden soll in das <code>returnValue</code>-Element von dem Ereignis geschrieben, und als Rückgabewert zurückgegeben werden. Bleibt <code>returnValue</code> leer bzw. wird nichts zurückgegeben, erscheint auch keine Nachricht.</p>
<h2>Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit freigeben</h2>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/06/Abschicken.erst.nach.einer.bestimmten.Zeit.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/06/Abschicken.erst.nach.einer.bestimmten.Zeit.png" alt="Die Abschicken-Schaltfläche ist ausgegraut und zeigt an, dass das Formular erst in 17 Sekunden abgeschickt werden kann." title="Die Abschicken-Schaltfläche ist ausgegraut und zeigt an, dass das Formular erst in 17 Sekunden abgeschickt werden kann." width="140" height="80" class="alignright size-full wp-image-1541" /></a>Es ist möglich die Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit zu aktivieren, so dass der Benutzer sie vorher nicht anklicken kann. Das ist beispielsweise in einem Forum sinnvoll, wo der Benutzer nur alle 60 Sekunden einen Beitrag schreiben kann. Der Browser des Benutzers stellt die Schaltfläche ausgegraut da, und zeigt auf der Schaltfläche an wie lange es noch dauert bis das Formular abgesendet werden kann. Die Zeit muss selbstverständlich auch serverseitig überprüft werden, diese Funktion ist nur dazu gedacht, es dem Benutzer einfacher zu machen, zu erkennen wann er auf die Absenden-Schaltfläche klicken kann. Durch das Deaktivieren von Java Script kann die Funktion &#8220;umgangen&#8221; werden, sie stellt also keinen Sicherheitsmechanismus dar!</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/* Sorgt dafuer, das eine Schaltflaeche erst nach Ablauf einer bestimmten Zeit
 * klickbar wird, kann aber leicht &quot;umgangen&quot; werden.
 */</span>
<span style="color: #003366; font-weight: bold;">function</span> AbsendenENA<span style="color: #009900;">&#40;</span>sf<span style="color: #339933;">,</span> zeit<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> intervall <span style="color: #339933;">=</span> window.<span style="color: #660066;">setInterval</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> self.<span style="color: #660066;">aktualisieren</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	sf.<span style="color: #660066;">disabled</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> sftext <span style="color: #339933;">=</span> sf.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">aktualisieren</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>zeit <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			sf.<span style="color: #660066;">value</span> <span style="color: #339933;">=</span> sftext <span style="color: #339933;">+</span> <span style="color: #3366CC;">'('</span> <span style="color: #339933;">+</span> zeit <span style="color: #339933;">+</span> <span style="color: #3366CC;">')'</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			sf.<span style="color: #660066;">value</span> <span style="color: #339933;">=</span> sftext<span style="color: #339933;">;</span>
			sf.<span style="color: #660066;">disabled</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			window.<span style="color: #660066;">clearInterval</span><span style="color: #009900;">&#40;</span>intervall<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		zeit<span style="color: #339933;">--;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">aktualisieren</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// Absenden-Schaltflaeche erst nach einer bestimmten Zeit benutzbar machen</span>
	<span style="color: #003366; font-weight: bold;">new</span> AbsendenENA<span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'abschicken'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">20</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Im Beispiel wird eine neue Instanz des AbsendenENA-Objekts erstellt, der erste Parameter ist das Schaltflächen-Objekt (mit der ID <em>abschicken</em>), der zweite die Zeit bis zum Aktivieren, in Sekunden. Die Klasse kann theoretisch an jeder Stelle benutzt werden, im Beispiel wird sie beim <code>onload</code>-Ereignis aufgerufen.</p>
<p>Ich rate dazu, die Funktion nur an Stellen zu verwenden, an denen es dem Benutzer aus technischen (oder auch anderen) Gründen eh nicht möglich wäre das Formular vor Ablauf der Zeit abzuschicken, beispielsweise weil ein Spamschutz das Abschicken serverseitig eh nur alle X Sekunden zulässt. Man kann den Benutzer mit einer solchen Funktion nicht dazu zwingen sich irgendwelche Forenregeln, AGBs, oder sonstwas durchzulesen.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/06/15/absenden-zurucksetzen-und-verlassen-von-formularen/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

