Formulare

Zurück zum Script-DB Eingang

http://www.erleuchtet.kilu.de/Script-DB/index.htm

Ausfüllen

Textarea ohne Scrollbalken

Textarea ohne Scrollbalken I

Ein Textfeld ohne Scrollbalken ausführen zu lassen ist möglich über css:

textarea
{
overflow:auto;
/*overflow:hidden;*/

background-color : white;
border: Medium;

/* NUR IE: */

scrollbar-3d-light-color:#C0C0C0;
scrollbar-arrow-color:#FFFFFF;
scrollbar-base-color:#374962;
scrollbar-dark-shadow-color:#808080;
scrollbar-face-color:#FF0000;
scrollbar-highlight-color:#FF2311;
scrollbar-shadow-color:#FFFF80;

}

<TEXTAREA NAME="Eingabe" ROWS="10" COLS="55" wrap="off" >
</TEXTAREA>

Ist jetzt der Seitenhintergrund auch weiß, dann verschwindet der Textarea - Eingabebereich als solcher, bis seine Dimensionen überschritten werden; in dem Fall erscheinen die Scrollbalken (wieder). Allerdings auf der Innenseite, so daß der Text jedesmal neu umgebrochen wird. Deshalb wrap=off. (Ansonsten sollte man standardmäßig wrap="soft" angeben, um den Text auch im alten Netscape 4.x umbrechen zu lassen)

overflow:hidden statt overflow:auto bewirkt, daß die Scrollbalken nie angezeigt werden.

Mitwachsende Formularfelder

Tabulatorsprünge erzwingen

In Formularen Tabulatorsprünge durch TABINDEX erzwingen

<Input type = "Radio" Name = "xysn" Value = "1" TABINDEX = "2" >
<BR>

<Input type = "Radio" Name = "blahblah" Value = "2" TABINDEX = "1" >

Ruft die beiden Eingaben in umgekehrter Reihenfolge auf

Funktioniert in modernen Browsern auch bei normalen Verweisen: <A HREF TABINDEX = ...

Formularfeld vormarkieren

Ein bestimmtes Formularfeld vormarkieren:

<body Onload="document.forms.Suche.SuchTextEingabe.select();document.forms.Suche.SuchTextEingabe.focus();">

In DER Reihenfolge! Erst select, dann focus.

OnClick="value=' ';"

Leert das Verzeichnis wieder.

- - - -

Felder markieren

Mit CSS:

'input:focus' reagiert auf das Anklicken von Formular-Elementen (Felder und Submit-Button)

input:focus { background-color : #000000;}

Css bei focus geht allerdings nur bei gecko-basierten Browsern.

Der MS Explorer benötigt Javascript:

<input type=text
onFocus="this.style.backgroundColor='#000000'"
onBlur="this.style.backgroundColor='#FFFFFF'"
>

Oder:

onChange="this.style.backgroundColor='#FFFFFF'"

Vorausgefülltes Formularfeld

Schreibt Text in ein bereits vorausgefülltes Formularfeld, ohne es vorher löschen zu müssen

Internet Magazin 10/01

<form method="POST"
action="http://www.blahblah.de" name="suchformular">
<input size ="8" type="text" name="suche" value="suchbegriff?"
onFocus="javascript:if (document.suchformular.suche.value == 'suchbegriff?')
document.suchformular.suche.value = ' ' ;"> <input border="0"
src="../images/go.gif" type="image" width="28" height="18" >
</form>

oder:

Internet Magazin 07/01

<Input type="text" value="vorgabe" OnFocus="if(this.value=='Geben Sie hier etwas ein!') this.value=' '" OnBlur="="if(this.value==' ')this.value='vorgabe'">

oder:

Internet Magazin 09/02

<Input type="Internet-Magazin" value="Internet-Magazin" OnFocus="if(this.value==' Internet-Magazin ') this.value=' '" OnBlur="if(this.value==' ') this.value=' ' Internet-Magazin ">

Oder: Internet Magazin Online

Anleitung:

1. Script im <HEAD> Teil der Seite einfügen.

2. Folgendes onFocus Element in das gewünschte Forumularobjekt einfügen: onFocus="TextWeg(this)" Dieses bei jedem Formularobjekt wiederholen, bei dem der default Wert gelöscht werden soll.

Script:

<head>

<script>
function TextWeg(das_Feld){
if (das_Feld.defaultValue==das_Feld.value)
das_Feld.value = ""
}
</script>
</head>

<body bgcolor="#FFFFFF">
<form>
<input type="text" value="Der default Wert" onFocus="TextWeg(this)">
</form>

</body>
</html>

Ersetzt Eingabe durch Sternchen

Ersetzt in Formularen die Eingabe durch Sternchen *

<Input name="irgendwas" size="20" type="password" >

normal ist:

<Input name="irgendwas" size="20" type="text" >

Prüfen

Absenden sperren

Absenden vorläufig sperren:

<HEAD>

<Script>

Function prf()
{

if (document.forms.DDD.wasimmer.checked)
{document.forms.DDD.absenden.disabled=false;}

else
{document.forms.DDD.absenden.disabled=true;}

}

</Script>

</HEAD>

<BODY BGCOLOR="#ffffff" onload="document.forms.DDD.reset();">

<Form Name="DDD" Action=dahin>

<Input type="checkbox" value="OK" name="wasimmer" Onclick="javascript:prf();"> Alles OK

<Input type="submit" name="absenden" value="los" disabled>

</Form>

(Internet Magazin 07/06)

- - - -

Auch so läßt sich auch das Absenden eines Formulars mit einer Sicherheitsabfrage abfangen:

<HEAD>

<SCRIPT language="JavaScript" type="text/javascript">


</SCRIPT>

</HEAD>

<BODY BGCOLOR="#ffffff" onload="document.forms.DDD.reset();">

<Form Name="DDD" Action=dahin>

<INPUT TYPE=button VALUE="Ja!" > Machen

<BR>

<INPUT TYPE=button VALUE="LOS" Onclick="javascript:los();">
</FORM>

- - - -

<BODY onload="document.forms.DDD.reset();" ... dient dazu, die Checkbox auf jeden Fall beim Laden der Seite zu deaktivieren

------------

Variante 2: Verhindert, daß ein Formular versehentlich zweimal abgesendet wird.

<SCRIPT language="JavaScript" type="text/javascript">

</SCRIPT>

<FORM NAME="Formular" ACTION=dahin>

...Input irgendwas

<INPUT TYPE= Button NAME="Verwerten" VALUE="Los," OnClick="Abschicken();">
<BR>

- Bitte nur einmal abschicken; Werte erscheinen sonst mehrfach -
<INPUT type="checkbox" VALUE="0K" NAME="Nachfrage" >[OK]

</FORM>

Formulare Prüfen 1

Formulare Prüfen

<html>
<head>
<title>Formularprüfung</title>

<script language="Javascript">



</script>

</script>
</head>
<body>

<H1> Formulare </H1>
<Form Name="Form1" OnSubmit="return pruef();"
acti action="mailto:hier@da.de"method="post" enctype="text/plain">

Namen:
<Input Name="userName" Type=text></input>
<Input Name="Los" Type=Submit value="Abschicken"></input>
</Form>

</head>
<body>

-------

AUCH:

<Input Name="userName" Type=text Size=80 Value="Hier bitte Namen eingeben" OnChange="javascript:if(this.value=='' ) {alert(' Bitte Namen eingeben ' )}">

(Prüft auf leeres Feld)

-------

AUCH:

Formulare Prüfen 2

http://www.erleuchtet.kilu.de/autostyle/_wortliste/form_wortliste.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>



<SCRIPT language="JavaScript" type="text/javascript" src="form_wortlist.txt"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">


</SCRIPT>

<TITLE>Formular-Eingabe mit JavaScript-Wortprüfung</TITLE>

</HEAD>

<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#0000ff"
ALINK="#ff0000">

<P>
<A HREF="../" target="_top">zurück</A>
<H1>
Formular-Eingabe Wortprüfung
</H1>

<P>
<U>Testet auf Worte in 'form_wortlist.txt'</U>:
<P>



<SCRIPT language="Javascript">

</SCRIPT>

<P>
- um bei erlaubter Eingabe das Formular abzuschicken
<P>



<FORM Name="Formular1" OnSubmit="return checkwort();" method="post" enctype="text/plain">

Namen:

<INPUT Name="userName" Type=text>
<INPUT Name="Los" Type=Submit value="Abschicken">

</FORM>

<P>
</BODY></HTML>

Achtung:

Da die 'erlaubten Worte' in JavaScript entweder im Quelltext der Seite einzusehen sind, oder die Textdatei mit ihnen beim vollständigen Speichern der Webseite auf der Festplatte landet, ist die Methode als echte (Pass-) Wortprüfung ungeeignet, und dient nur als Vorfilter und Hinweis an den Benutzer.

Ein Formular- Button (egal welcher Art) hat darüber hinaus die Eigenschaft, das Formular auch dann abzuschicken, wenn JavaScript nicht eingeschaltet ist oder einen Fehler aufweist - was schnell passieren kann.

Um das zu verhindern, kann man entweder den Formular- Button durch einen JavaScript- Verweis ersetzen:

<Input Name="Los" value="Abschicken" onclick="javascript:checkwort();" NOtype = "button">

- was dann wieder Schwierigkeit mit sich bringt, die ENTER- Taste zum Abschicken des Formulars zu benutzen -

oder aber (wie hier) die Action- Anweisung aus dem Formular selbst zu entfernen und in die JavaScript- Funktion einzubauen:

docu document.Formular1.action="mailto:hier@da.de";

In dem Fall kann das Formular nur dann abgeschickt werden, wenn JavaScript korrekt arbeitet und die Sperre somit aktiv ist.

Formulare Prüfen 3

Verlangt eine Sucheingabe von mindestens 3 Buchstaben

<HTML>
<HEAD>

<script type="text/javascript">

</script>

</HEAD>

<BODY>

<form name="Suche" action="suche.php" method="post" onSubmit="return chkFormular()">

<input name="Sucheingabe" type="text" size="50" maxlength="50" value="a">

<input type="submit" value="Suchen">

</form>

</BODY>
</HTML>

Formulare Prüfen 4

// Prüft, welches Element eines Formulars gerade aktiviert ist:
// - und löst mit 'submit' eine Aktion aus -

function pruefen()
{
var Formular = document.forms["Formular-Name"];
var InputAnzahl = Formular.getElementsByTagName("input").length;

alert (InputAnzahl);

for (y=0; y < InputAnzahl; y++)
{

if (Formular.elements.Element-Name[y].checked == true)
{
alert ((y+1) + " IST CHECKED");
Formular.submit();
}

else
{
alert ((y+1) + " nicht checked");
}
}

}

// Lädt das Skript 1 Sekunde, nachdem die Seite (vollständig) geladen wurde:

window.onload = window.setTimeout('pruefen()', 1000);

Ohne Sonderzeichen

Die Eingabe in einem Formularfeld nachträglich auf Buchstaben und Ziffern reduzieren:

OhneSonderzeichen = Eingabe.replace(/\W/gi,"");

Aus: Internet-Magazin 02/06

E-Mail-Adresse Prüfen

Prüfen auf Gültigkeit der E-Mail-Eingabe:

Internet Magazin Online

Beschreibung: Dieses Script überprüft den Inhalt einer Textbox, ob eine gültige E-Mail Adresse eingegeben wurde.
Folgende Kriterien werden überprüft:

- Mindestens ein Zeichen vor dem &quo "@"

- &quo "@"nach vorangestellten Zeichen

- Midestens ein Zeichen nach dem &quo "@",welches von einem Punkt (.) gefolgt wird.

- Diesem Punkt folgt entweder eine zwei oder drei Zeichen lange Zeichenkette.

----

var kette = document.forms.Eingabe.EMail.value;
var filter = /^.+@.+..{2,3}$/;
if (filter.test(kette) == false)

{
alert("Bitte eine gültige E-Mail-Adresse eingeben!");
document.forms.Eingabe.EMail.focus();
return false;
}