Příklad webového formuláře odesílaného na mail metodou POST včetně JS kontroly
Ukázka webového formuláře, obsahujícího běžné položky sloužící k identifikaci odesílatele (mail, event. jméno), předmět a vlastní text zprávy. Mimoto má pisatel možnost zatrhnout si políčko, díky němuž dostane kopii své zprávy i na svou zadanou mailovou adresu.
V tomto provedení jsou správně vyplněná pole ošetřena prioritně pomocí JavaScriptu a pouze v případě jeho vypnutí vstoupí na scénu PHP kontrola. Při pokusu o odeslání např. prázdného formuláře se nevypsaná a přitom nutná políčka obarví červeně a nad nimi se zobrazí vysvětlující text, taktéž červenou barvou. Obojí shodně při PHP i JS ověřování. Formulář si pamatuje již vyplněná pole a dožaduje se doplnění pouze chybějících - možno vyzkoušet a na zdrojový kód se podívat »sem«.
Zapojení JavaScriptu taktéž dovoluje odpočítávání již zadaných znaků a současně počet zbývajících do daného omezení délky zprávy. Samozřejmostí je možnost odeslat si kopii formuláře na vlastní adresu, např. pro kontrolu.
Je maximálně důležité, aby tzv. session byla nastartována ještě před jakýmkoli výpisem na stránce - více »zde«
Zdrojový kód stránky s formulářem a s JS kontrolou
<?php
session_start();
?>
<script type="text/javascript" language ="JavaScript"><!--
var maxlength = 300;
function textLimit(zprava, maxlength)
{
if (zprava.value.length > maxlength)
{
zprava.value = zprava.value.substring (0, maxlength);
alert('Váš text bude zkrácen na 300 znaků!');
}
}
function odpocet(policko)
{
x = policko.value.length;
if (x<300)
{
document.webovy.cislo_zbyva.value = 300-(x+1);
document.webovy.cislo_napsano.value = (x+1);
}
}
function nastavBarvu(element, barva) //obarveni nespravne vyplnenych policek
{
if (element.style)
element.style.backgroundColor = barva;
}
function zkontroluj(webovy)
{
var barvaChybne = "#ffcc99";
var barvaSpravne = "";
var pozice_zavinace = webovy.email.value.indexOf("@");
var cast_pred_zavinacem = webovy.email.value.substring(0, pozice_zavinace);
var cast_po_zavinaci = webovy.email.value.substring(pozice_zavinace+1,
webovy.email.value.length);
var pozice_posledni_tecky = cast_po_zavinaci.indexOf(".");
var pocet_znaku_za_posledni_teckou = cast_po_zavinaci.length -
pozice_posledni_tecky - 1;
var pozice_dvou_tecek_vedle_sebe = webovy.email.value.indexOf("..");
var valid = true;
var oznam = "";
if (webovy.name.value == "")
{
valid = false;
nastavBarvu(webovy.name, barvaChybne);
}
else
{
nastavBarvu(webovy.name, barvaSpravne);
}
if ((webovy.email.value == "") || (pozice_zavinace < 0) ||
(cast_pred_zavinacem.length <=0) || (cast_po_zavinaci.indexOf("@") >=0) ||
(cast_po_zavinaci.length <= 0) || (pozice_posledni_tecky < 0) ||
(pocet_znaku_za_posledni_teckou < 2 || pocet_znaku_za_posledni_teckou > 4) ||
(pozice_dvou_tecek_vedle_sebe >=0) || (cast_pred_zavinacem.charAt(0) == "." ||
cast_pred_zavinacem.charAt(cast_pred_zavinacem.length-1) == ".") ||
(cast_po_zavinaci.charAt(0) == "." ||
cast_po_zavinaci.charAt(cast_po_zavinaci.length-1) == "."))
{
valid = false;
nastavBarvu(webovy.email, barvaChybne);
oznam += "Zadejte prosím emailovou adresu ve správném tvaru\n";
}
else
{
nastavBarvu(webovy.email, barvaSpravne);
}
if ((webovy.predmet.value == "") || (webovy.predmet.value.search(/\S/) < 0))
{
valid = false;
nastavBarvu (webovy.predmet, barvaChybne);
oznam += "Napište prosím předmět zprávy\n";
}
else
{
nastavBarvu (webovy.predmet, barvaSpravne);
}
if (webovy.spam.value != 12)
{
valid = false;
nastavBarvu (webovy.spam, barvaChybne);
oznam += "Vyplňte prosím správné číslo\n";
}
else
{
nastavBarvu (webovy.spam, barvaSpravne);
}
if ((webovy.zprava.value == "") || (webovy.zprava.value.search(/\S/) < 0))
{
valid = false;
nastavBarvu (webovy.zprava, barvaChybne);
oznam += "Nezapomněli jste napsat samotnou zprávu?\n";
}
else
{
nastavBarvu (webovy.zprava, barvaSpravne);
}
if (!valid)
alert(oznam);
return valid;
}
//-->
</script>
<?php
if (isset($_SESSION["zprava"]))
{
echo $_SESSION["zprava"];
unset ($_SESSION["zprava"]);
}
?>
<form name="webovy" action="/php/formular-zpracuj/" method="post"
onsubmit="return zkontroluj(this)">
<h2 id="napiste">Webový formulář:</h2>
<span id="omez">
(do zprávy je povoleno vepsat nebo vložit maximálně 300 znaků!)</span>
<label for="nick">Vaše jméno nebo přezdívka:</label>
<input type="text" size=25 maxlength=25 name="nick" id="nick"><br>
<label for="email"><font color=red>*</font>
Váš email:</label>
<input type="text" size=25 maxlength=25 name="email" id="email"><br>
<label for="predmet"><font color=red>*</font>
Předmět zprávy:</label>
<input type="text" size=25 maxlength=25 name="predmet" id="predmet"><br>
<p id="spambot">
Ochrana před spambotem - doplňte prosím výsledek (číslo):</p>
<label for="spam"><font color=red>*</font>
čtyři krát tři</font></label>
<input type="text" size=10 name="spam" id="spam"><br>
<p id="psani">
<label for="zprava"><font color=red>*</font>
Text Vaší zprávy:</label><br>
<textarea name="zprava" id="zprava" wrap="physical" onKeyPress="odpocet(this);"
onKeyUp="textLimit(this.form.zprava, 300);"></textarea></p><br>
<p> <!--zde nastavení kopie na svůj email-->
<input type="checkbox" name="kopie" checked="checked" id="checked">
Poslat si zprávu i na zadaný email</p><br>
<input type ="submit" name="poslano" id="poslano" value="Odeslat zprávu"><br>
<div id="pocitadlo">Zbývá ještě<input type="text" name="cislo_zbyva" maxlength=3
value="300"> znaků, napsáno je již<input type="text" name="cislo_napsano"
maxlength=3 value="0">znaků.</div><br>
<h5 class="hvezdicka">
Políčka s <font color=red>červenou *</font> je nutné vyplnit</h5>
</form>