Anzeige
Tutorialbeschreibung

Tabellenloses Formular mit Übergabe zur Weiterverarbeitung

Tabellenloses Formular mit Übergabe zur Weiterverarbeitung

In diesem Tutorial möchte ich kurz zeigen, wie man ein tabellenloses Formular mit Hilfe von CSS erstellen kann, und Dank PHP auch zum Leben erwecken.


Schritt 1: Das Formular (HTML)

Um ein Formular zu erstellen braucht man natürlich erstmal das "FORM"-Tag

Da ist es: <form></form>

Jetzt möchte man natürlich auch Felder zum Eintragen. Textfelder sehen in ihrer einfachsten Art so aus:

<input type="text" name="bezeichung"  />

"type" gibt den Typ des Feldes an,  "name" ist eben der Name des Feldes über den man es später ansprechen kann.

Fassen wir Zusammen:

<form>
   <input type="text" name="bezeichung"  />
</form>

Mit mehreren Felder dann so: (die Namen müssen unterschiedlich sein!)

<form>
   <input type="text" name="bezeichung1"  />
   <input type="text" name="bezeichung2"  />
   <input type="text" name="bezeichung3"  />
   <input type="text" name="bezeichung4"  />
</form>

um das Formular abzuschicken braucht man noch einen Sende-Button:

<input type="submit" value="senden" name="send"  />

"type" und "name" hatten wir schon, bei "value" kann man angeben, was auf dem Button stehen soll. In meinem Fall "senden".

Damit ist das Formular prinzipiell schon lebensfähig. ABER nicht schön... nicht nur optisch auch benuzterfreundlich gesehen. Deswegen nutzen wir jetzt "label" um die Felder des Formulars zu beschriften.

Dem Tag <label></label> weisen wir das Attribut "for" zu -> sieht so aus: <label for=""></label>
Warum? Damit wir jetzt jedem "label" ein konkretes Feld zuordnen können. Dafür müssen wir jedem Feld die gleiche "id" zuordnen wie dem "label":

   <label for="erstes_feld"></label><input type="text" name="bezeichung1" id="erstes_feld"  />

Damit weis der Browser nun, welches Label welchem Feld zugeordnet ist. Damit die Nutzer nun noch wissen, was sie überhaupt in das Feld eintragen sollen, sagen wir es ihnen:

   <label for="erstes_feld">Name:</label><input type="text" name="bezeichung1" id="erstes_feld"  />

Auf alle Felder angewandt sieht es nun so aus:

<form>
  <label for="erstes_feld">Name:</label><input type="text" name="name" id="erstes_feld"  />
  <label for="zweites_feld">Straße:</label><input type="text" name="strasse" id="zweites_feld"  />
  <label for="drittes_feld">Stadt:</label><input type="text" name="stadt" id="drittes_feld"  />
  <label for="viertes_feld">PLZ:</label><input type="text" name="plz" id="viertes_feld"  />
  <label for="absendebutton">&nbsp;</label><input type="submit" value="senden" name="send"  id="absendebutton" class="submit" />
</form>

In weiser Vorraussicht, geben wir dem Submitbutton eine CSS-Klasse mit auf dem weg. siehe ROT. Diese Klasse kann man nutzen um dem Submitfeld, was ja auch ein input-Feld ist, später trotzdem anders zu formatieren als die anderen input-Felder.

Jetzt ist das Formular - HTML-technisch gesehen - fertig.

Aber wir fassen die Felder der Ordnung halber noch in ein "fieldset" und verpassen diesem ein "legend" also eine Legende, eine Erklärung, um was es in dem Formular geht. Zum Beispiel: "Deine Anmeldung"

<form>
  <fieldset><legend>Deine Anmeldung</legend>
    <label for="erstes_feld">Name:</label><input type="text" name="name" id="erstes_feld"  />
     ...
    <label for="absendebutton"><input type="submit" value="senden" name="send"  id="absendebutton" />
  </fieldset>
</form>

Unser Formular sieht nun so aus:

Bilder


Nicht hübsch!

Deswegen kommen wir nun zum...

Schritt 2: CSS

Als Erstes rücken wir mit folgendem CSS erst einmal Alles ein bisschen zurecht.

Dabei schauen wir uns fieldset und label erstmal genauer an.

    fieldset {
        width: 200px;
    }

Dadurch ist das gesammte Formular nur noch 200px breit. Danach sieht es so aus:

Bilder

und noch das dazu...

    label{
    display:block;
    width:60px;
    float:left;
    }

Und es sieht schon fast aus wie ein Formular.

Bilder


Jetzt könnte ich Seitenweise schreiben, wie man hier alles formatieren kann. ich stelle einfach mal ein layout dar und kommentiere das CSS

So sieht das Ergebnis aus:

Bilder


und so sieht das CSS dazu aus:

    form {
        background: #eeee99; /* Das ist nur für die gelbe Hintergrundfarbe */
    }
    label, fieldset { /* Hier werden die Schriftart, Scrhiftgröße und die Schriftfarbe für "label" und "fieldset" festgelegt  */
    font-family: sans-serif;
    font-size:12px;
    color:#000000; 
    }
    fieldset { /* Jetzt passe ich die Breite von "fieldset" an mein Formular an, und gebe dem Rahmen eine andere Farbe */
        width:280px;
        border:1px solid #777777;
    }
    legend {
        margin:0 0 10px 0; /* Hier wird ein Abstand vom unteren Rand der Legende (Deine Anmeldung) festgelegt */
    }
    label{ /* Damit wird das Verhalten von "label" festgelegt, also die Entfernung zu den input-Feldern und zusätzlich ein Rahmen von 10px; */
        display:block;
        width:40px;
        float:left;
        margin:10px;
    }
    input { /* Ja und hier wird schließlich die Länge und der Abstand der input-Felder festgelegt. */
        width:180px;
        margin:10px;
    }

Und schon hat man ein schönes Formular. Das ist natürlich nur eine von vielen Varianten. Das ganze könnte auch so aussehen.

Bilder


Wohlbemerkt nur durch CSS, ohne etwas am HTML zu ändern.

Nun muss es nur noch verschickt werden. Dazu nutze ich hier PHP und zwar im...

Schritt 3: PHP

Da wir das Formular ja verschicken möchten, müssen wir den

<form> - Tag von oben noch ein bisschen ergänzen. Und zwar mit "action" und mit "method". Das sieht dann so aus:

<form action="<?=$_SERVER["PHP_SELF"]?>" method="post">

Mit "action" wird angegeben, wohin das Formular gesandt wird. In diesem Fall an die gleiche Datei, in der es sich befindet. (unabhängig davon wie sie heißt) Das ist durchaus üblich. Mit "method" legt man die Art des Versendens fest. Darauf gehe ich jetzt nicht näher ein. Es reicht hier, wenn da jetzt "post" steht.

Nun kommen wir zu PHP.

Da sich das Formular in der gleichen Datei befindet, müssen wir jetzt erstmal festlegen, dass falls das Formular abgeschickt wurde, wir es weiterverarbeiten wollen. Das geht so:

<?
if(isset($send)) {...} 
esle {  ?>  /*Hier kommt das oben erstellte Formular rein! */ <? } 
?>

Das heißt so viel wie, wenn dieVariable $send existiert, dann... anderenfalls zeige das Formular an.
So und wann existiert "$send" nun? Ganz einfach: wenn das Formular abgeschickt wurde, denn der Absendebuttoen heißt "send".

ABER! Spätestens Seit PHP 5 klappt das so nicht mehr, da globale Variablen ein erhöhtes Sicherheitsrisiko sind. Deswegen muss man die Variablen 'abholen'. Das heißt jede Variable, die mit dem Formular übergeben wurde muss man 'bestätigen'. Z.B. so:

if(isset($_POST["send "])) {$send = $_POST["send "];}

Das heißt, dass wenn die Variable $send mit Post übermittelt wurde, dann stecke die Variable in die Variable $send.

Das Ganze muss VOR der vorher behandelten if-else Anweisung stehen, bzw. man kann die beiden Sachen kombinieren. Also so:

<?
if(isset($_POST["send"])) {
 
  $send = $_POST["send"];
   if(isset($_POST["name"])) {$name= $_POST["name"];}
  if(isset($_POST["strasse"])) {$strasse= $_POST["strasse"];}
  if(isset($_POST["stadt"])) {$stadt= $_POST["stadt"];}
  if(isset($_POST["plz"])) {$plz= $_POST["plz"];}

  // nun hat man die Variablen, $name, $strasse, $stadt und $plz, die man nach belieben in die Datenbank schreiben kann, sich per Mail zuschicken lassen kann oder einfach zum weiterverarbeiten.

  echo "$name | $strasse| $stadt | $plz";  // so werden sie einfach nur angezeigt.

}
else { ?> /*Hier kommt das oben erstellte Formular rein! */ <? } 
?>

FERTIG, das wars. Ich habe es nochmal ausprobiert, nur mit dem hier geposteten Code. Es hat funktioniert. Sollte also auch bei euch gehen.

Viel Spaß damit.

Bitte das Tutorial nicht wo anders als Eigenes reinstellen!


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MrJimiHancock
  • 17.09.2012 - 13:13

Cool guter Ansatz. Ich habe bisher nur gelernt, Formulare in Kombination mit Tabellen zu scheiben, aber so dürfte das ja auch problemlos funktionieren....

Portrait von dopetob_
  • 14.07.2012 - 16:35

Danke sehr hilfreich!

Portrait von trendvisor
  • 24.02.2012 - 12:45

Danke, sehr hilfreich

Portrait von pTown
  • 12.12.2011 - 14:34

gutes tut, macht spaß auf mehr...

Portrait von stefan4asus
  • 29.07.2010 - 14:32

danke für die tolle anleitung :) leider sind die arbeitsdateien defekt :(

Portrait von tourischreck
  • 20.04.2010 - 09:21

Hat mir sehr gut geholfen, vielen Dank für die Mühe!

Portrait von rakader
  • 17.04.2010 - 07:16

Kurz und knapp - so soll es sein. Der PHP-Teil ist wohl nur für das lokale testen interessant. PHP kommt meist in Verbindung mit einem CMS zum tragen, und da werkeln dann eigene Plugins – wenn man nicht ohnehin schon online entwickelt.

Portrait von GundS
  • 27.04.2009 - 12:56

Dieses Tut macht NEUGIERIG! Es bietet unheimlich guten Stoff für weitere Kapitel wie z.B.: Weiterverarbeitung. Ich würde mich über ein weiteres kapitel sehr freuen.

Portrait von lonelyhawk
  • 26.04.2009 - 19:20

hej, der gesamte quelltext steht auch schon im direkt tutorial. braucht ihn bloß rauskopieren. hab nun trotzdem den komplette uelltext nochmal gepostet, aber diese änderung wartet noch auf freischaltung.

Portrait von Freixi
  • 26.04.2009 - 18:19

Bei mir gehen die Arbeitsdateien auch nicht auf.. fehlerhaft

Portrait von Arucard
  • 15.04.2009 - 10:17

das Tutorial ist gut geschrieben ärgere mich bloß das ich 50 Punkte in den Sand gesetzt habe für Arbeitsdateien die sich nich öffnen lassen :( hatte es ein zweites mal runtergeladen weill ich dachte das es am download lag also bitte ändern oder entfernen.

Portrait von lonelyhawk
  • 15.04.2009 - 11:53

hej, sorry für die 50 punkte, scheint auch schon jemand vor dir porbleme damit gehabt zu haben. bei mir gehts. na ich werde mal versuchen herauszufinden ob und wie ich die arbeitsdatei ändern kann.

Portrait von Schmiergelpapier
  • 14.04.2009 - 08:42

sehr schön. Mal schauen, ob ich's hinbekomme :-)

Portrait von Cocaine112358
  • 13.04.2009 - 21:25

Sehr schön :D
Kreative Designs^^

Portrait von Melli1
  • 12.04.2009 - 11:33

Super! Kann ich gut gebrauchen.

Portrait von Dieter_Hoefle
  • 11.04.2009 - 08:38

Ganz, ganz toller, praxisorientierter und didaktisch brillanter Beitrag !!!

Dafür herzlichen Dank

Dieter Höfle - Medienwerkstatt Ammerbuch

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.04.2009 - 02:49

nicht schlecht, werde es gleich versuchen

Portrait von phamo
  • 09.04.2009 - 21:33

nicht schlecht!
CSS bin ich gerad am lernen :)

achja dann müsste noch erklärt werden wie man die Daten z.B: per Email versendet oder in SQL DBs reinpackt usw. ;)

mfg

Portrait von lonelyhawk
  • 09.04.2009 - 22:26

das wird das nächste tutorial ;) wollte der übersicht halber nicht alles in eins packen...

Portrait von phamo
  • 09.04.2009 - 21:33

nicht schlecht!
CSS bin ich gerad am lernen :)

achja dann müsste noch erklärt werden wie man die Daten z.B: per Email versendet oder in SQL DBs reinpackt usw. ;)

mfg

x
×
×