Zum Inhalt . Zur Suche .

Formular TAB HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Bestellformular</title>


<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
  if (val) { nm=val.name; if ((val=val.value)!="") {
   if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
   if (p<1 || p==(val.length-1)) errors+='- '+nm+' muss eine gültige E-Mail Adresse sein. ';
   } else if (test!='R') { num = parseFloat(val);
   if (isNaN(val)) errors+='- '+nm+' muss ein Nummer sein. ';
   if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
    min=test.substring(8,p); max=test.substring(p+1);
    if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'. ';
  } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' muss ausgefüllt sein. '; }
  } if (errors) alert('Folgende Fehler sind aufgetreten: '+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script>
</head>

<body>
<h1>Bestellformular</h1>

<form name="form1" method="post" action="">

<fieldset>
  <legend>Personalien</legend>

  <table width="400" >
  <tr>
   <td width="120"><label for="vorname">Vorname</label></td>
   <td width="280">
   <input name="Vorname" type="text" id="vorname"  size="30" maxlength="30" tabindex="1" />
   </td>
  </tr>
  <tr>
   <td><label for="name">Name</label></td>
   <td>
   <input name="Name" type="text" id="name" size="30" maxlength="30" tabindex="2" />
   </td>
  </tr>
  <tr>
   <td><label for="telefon">Telefonnummer</label></td>
   <td>
   <input name="Telefon" type="text" id="telefon" size="30" maxlength="30" tabindex="3" />
   </td>
  </tr>
  <tr>
   <td><label for="mail">E-Mail</label></td>
   <td>
   <input name="Mail" type="text" id="mail" size="30" maxlength="30" tabindex="4" />
   </td>
  </tr>
  </table>
</fieldset>


<fieldset>
  <legend>Ich bestelle</legend>

  <table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="120"><div align="right">
   <input name="Kaese" type="text" id="kaese" size="5" maxlength="3" tabindex="5" />
   </div></td>
   <td width="280"><label for="kaese">St&uuml;ck K&auml;se</label></td>
  </tr>
  <tr>
   <td><div align="right">
    <input name="Joghurt" type="text" id="joghurt" size="5" maxlength="3" tabindex="6" />
   </div></td>
   <td><label for="joghurt">Glas Joghurt</label></td>
  </tr>
  <tr>
   <td><div align="right">

    <input name="Quark" type="text" id="quark" size="5" maxlength="3" tabindex="7" />

   </div></td>
   <td><label for="quark">Glas Quark</label></td>
  </tr>
  <tr>
   <td><div align="right">
    <input name="Butter" type="text" id="butter" size="5" maxlength="3" tabindex="8" />
   </div></td>
   <td><label for="butter">Packungen Butter </label></td>
  </tr>
  </table>
</fieldset>

<fieldset>
  <legend>Ich bezahle</legend>
  <table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="120"><div align="right">
   <input type="radio" name="zahlung" value="rechnung" id="zahl_rech" tabindex="9" />
   </div></td>
   <td width="280"><label for="zahl_rech">Mit Rechnung</label></td>
  </tr>
  <tr>
   <td><div align="right">
   <input type="radio" name="zahlung" value="ueberweisung" id="zahl_ueber" tabindex="10" />
   </div></td>
   <td><label for="zahl_ueber">Mittels &Uuml;berweisung </label></td>
  </tr>
  <tr>
   <td><div align="right">
    <input type="radio" name="zahlung" value="kreditkarte" id="zahl_karte" tabindex="11" />
   </div></td>
   <td><label for="zahl_karte">mit Kreditkarte</label> </td>
  </tr>
</table>
</fieldset>

<fieldset>
  <legend>Wir w&uuml;nschen zus&auml;tzlich </legend>
  <table width="400" border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td width="120"><div align="right">
    <input name="zusatz" type="checkbox" id="zus_gesch" value="geschenk" tabindex="12" />
   </div></td>
   <td width="280"><label for="zus_gesch">Geschenkverpackung</label></td>
  </tr>
  <tr>
   <td><div align="right">
    <input name="zusatz" type="checkbox" id="zus_rezept" value="rezept" tabindex="13" />
   </div></td>
   <td><label for="zus_rezept">Rezeptbuch</label></td>
  </tr>
  <tr>
   <td><div align="right">
   <input name="zusatz" type="checkbox" id="zus_brosch" value="broschuere" tabindex="14" />
   </div></td>
   <td><label for="zus_brosch">Brosch&uuml;re</label></td>
  </tr>
  </table>
</fieldset>

<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td align="right" width="120">
   <input name="Submit" type="submit" onclick="MM_validateForm('name','','R','telefon','','RisNum','mail','','RisEmail');return document.MM_returnValue" value="Senden" tabindex="15" />
   </td>
   <td width="280">
   <input name="reset" type="reset" id="reset" value="Zur&uuml;cksetzen" />
   </td>
  </tr>
</table>

</form>

</body>

</html>

Google-Suche


Google -Ads