HTML Formular

[Hannybaby]

Hallo,

ich mache gerade das Buch "PHP & MySQL von Kopf bis Fuß" durch... nun soll ein HTML Formular mit einem PHP Skript verknüft werden. Das HTML-Formular steht fertig zum Download bereit. Ich möchte aber, nachdem ich auch HTML "richtig können" möchte, das Formular selbst schreiben. Deshalb habe ich einmal den Code um Formulare zu erstellen verglichen. Im HTML Buch wird folgender Code verwendet:

 <form id="beanform" action="http://www.starbuzzcoffee.com/processorder.php" method="post">
<table>
                <tr>
                  <td>Name:</td>
                  <td>
                    <input type="text" name="name" id="name" value="" />
                  </td>
                </tr>
</table>
</form>

Im PHP & MySQL-Buch sieht der Code hingegen folgendermaßen aus:

<form method="post" action="anmelden.php">
<label for="vorname">Vorname:</label>
<input type="text" id="vorname" name="vorname" /><br />
</form>

Die erste Variante scheint also eine Tabelle zu sein, du zweite kommt völlig ohne aus. Aber was ist jetzt besser oder richtiger?

 

[Hannybaby]

u vergessen... sollte natürlich in der Überschrift Formular heißen...

 

[Trawell]

Hallo

ich find die Lösung mit der Tabelle besser, so kannst du das ganze Formular schöner gestalten.
Damit meine ich Feldbezeichnungen und Textfelder schön untereinander
Ohne Tabelle hast Du zwar meisstens gleichlange Textfelder, aber sicher unterschiedliche Feldbezeichnungen, dann verschiebt sich das ganze.

Also, Formulare immer schön in Tabellen schreiben ^^

schau dir selbst die unterschiedlichen Resultate an, dann merkst Du was ich meine

LG
Trawell

 

[Martin Wendel]

u vergessen... sollte natürlich in der Überschrift Formular heißen...

Du kannst den Titel ändern, in dem du im Eingangsbeitrag auf bearbeiten und dann auf erweitert klickst.

 

[Hannybaby]

Hallo

ich find die Lösung mit der Tabelle besser, so kannst du das ganze Formular schöner gestalten.
Damit meine ich Feldbezeichnungen und Textfelder schön untereinander
Ohne Tabelle hast Du zwar meisstens gleichlange Textfelder, aber sicher unterschiedliche Feldbezeichnungen, dann verschiebt sich das ganze.

Also, Formulare immer schön in Tabellen schreiben ^^

schau dir selbst die unterschiedlichen Resultate an, dann merkst Du was ich meine

LG
Trawell

Klingt logisch Danke dir!

Du kannst den Titel ändern, in dem du im Eingangsbeitrag auf bearbeiten und dann auf erweitert klickst.

ah, ganz schön versteckt - aber hab's gefunden

 

[wdominik]

Die meisten HTML-Elemente, so auch die Tabelle (<table>) haben eine semantische Bedeutung, sprich sie beschreiben die Art des Inhaltes. Man sollte sie daher nie nur rein aus gestalterischen Aspekten heraus missbrauchen.
Wenn du also sauberes HTML anstrebst (was du wirklich tun solltest), dann sollte im reinen HTML lediglich die Bedeutung der Inhalte beschreiben werden. So solltest du einen <h1> Tag z. B. nur dann benutzen, um auch eine Überschrift der obersten Hierarchie zu kennzeichnen, nicht etwa um einen Text besonders groß erscheinen zu lassen. Auch die Tabelle (<table>) dient einzig und allein zur Abbildung tabellarischer Daten, z. B. die Spieltabelle der Bundesliga o. Ä.
Alles was das Aussehen betrifft, wird mittels CSS in einer separaten Datei beschrieben. Hier legst du die Schriftart, -größe, Farben, Anordnung von Elementen, etc. fest.

In deinem Fall mit dem Formular mag man evtl. sogar noch darüber diskutieren können, da es ja gewissermaßen (Beschreibung / Eingabefeld) eine tabellenähnliche Struktur aufweist. Von daher ist man hier noch in einer Art Grenzbereich, aber spätestens wenn du Tabellen dazu verwendest um das Layout der Seite zu bestimmen (Links Navigation, rechts Inhalt) sind sie definitiv Fehl am Platz.

Warum das Ganze? Zum einen natürlich die Trennung von Design und Inhalt, zum anderen aber auch zwecks der Maschinenlesbarkeit. Suchmaschinen können ja nicht das äußere Erscheinungsbild beurteilen, sondern sehen nur die Tags und können damit auf den Inhalt schließen. So besser die Tags also den Inhalt beschreiben, desto besser kann die Suchmaschine deine Seite beurteilen und den Inhalt einordnen. Aber auch für Screenreader (für Menschen mit eingeschränkter Sehfähigkeit) sind gut strukturierte Seiten eine Hilfe.

Übrigens würde ich an deiner Stelle auch das label-Element wieder mit in den Code nehmen (Lässt sich auch innerhalb der Tabelle benutzen). Mit diesem gibst du nämlich an, dass die Beschreibung („Name“) und das Eingabefeld zusammengehören. Im for-Attribut wird hierbei einfach die ID des Eingabefeldes angegeben, also keine Schwierigkeit eigentlich.

Aber wie weit du das alles beachten willst ist natürlich deine Sache. Gerade am Anfang ist das sicher eine große Flut an Information von allen Seiten, und bis man das alles so anwenden kann vergeht natürlich Zeit. Ein paar Empfehlungen zum Einstieg in die Webentwicklung habe ich in einem anderen Theard schon gegeben, also falls dich manches noch näher interessiert, kannst du da gerne einen Blick drauf werfen. Ansonsten weiterhin viel Erfolg und vor Allem natürlich auch Spaß!

 

[torben1]

Hallo

ich find die Lösung mit der Tabelle besser, so kannst du das ganze Formular schöner gestalten.
Damit meine ich Feldbezeichnungen und Textfelder schön untereinander
Ohne Tabelle hast Du zwar meisstens gleichlange Textfelder, aber sicher unterschiedliche Feldbezeichnungen, dann verschiebt sich das ganze.

Also, Formulare immer schön in Tabellen schreiben ^^

schau dir selbst die unterschiedlichen Resultate an, dann merkst Du was ich meine

LG
Trawell

Das ist der größte Käse seit langem! Kurze Rede für sowas keine Tabellen! Lange Rede siehe @wdominik.

 

[Hannybaby]

Danke Leute, dass ihr mir hier so toll weiterhelft Also, ich habe mir schon sowas gedacht, was wdominik geschrieben hat. Es ist ja nicht so, dass ich null Ahnung von HTML hatte bevor ich das Buch begonnen habe. Vor vielen Jahren und auch Jahre lang mal mehr mal weniger, habe ich bereits Websites mit Dreamweaver gebastelt, mich aber nie so wirklich für den Code interessiert. Das will ich eben zur Zeit ändern. Es wird ja immer und (fast) überall gepredigt, dass man CSS für das Layout benutzen soll und Tabellen wirklich nur für Daten die dann in den Tabellen dargestellt werden... wundert mich deshalb, dass ein offizielles Lernbuch für HTML so etwas abdruckt... hm...

 

[wdominik]

Kein Problem. Um welches Lehrbuch handelt es sich denn, bzw. aus welchem Jahr stammt deine Ausgabe davon? Eine Zeit lang waren Tabellenlayout ja durchaus in Mode, von daher kann das schon sein, dass Bücher aus dieser Zeit das so wiedergeben.
Falls noch weitere solche Fragen auftauchen sollten, einfach hier posten. ^^

 

[robinsbegin]

Sollte JavaScript ins Spiel kommen, so sollte man sich den Einsatz der <table> nochmal genau überlegen. Da macht das 2. Beispiel einfach mehr Sinn.

 

[torben1]

Sollte JavaScript ins Spiel kommen, so sollte man sich den Einsatz der <table> nochmal genau überlegen. Da macht das 2. Beispiel einfach mehr Sinn.

Welchen Vorteil sollte man haben? Ich sehe keinen...

 

[robinsbegin]

Stimmst du überein, dass es eine Geschmacksfrage sein koennte? Bzw. beim Einsatz von JQuery von <table> eher abzusehen ist?

 

[torben1]

Da verdammich doch... Ich hatte das zweite Beispiel als das Tabellenbeispiel angesehen. Asche auf mein Haupt! Natürlich hast Du vollkommen Recht!

 

[Trawell]

Nun ja
was die Positionierung einzelner Formularelemente angeht, benutze ich gern Tabellen. Für Formatierung natürlich CSS:
Was genau spricht gegen den EInsatz von Tabellen ?

Gruss, Trawell

 

[torben1]

Ließ Dir einfach nochmal http://www.apfeltalk.de/forum/showthread.php?t=433715&p=4012213&viewfull=1#post4012213 durch! Da steht es sehr schön drin.

 

[wdominik]

Joa, wie gesagt, wenn jemand gerne eine Tabelle bei Formularelementen macht, dann bitte - ist ja jetzt keine Todsünde oder so. Aber die Frage war ja nach der besseren bzw. eleganteren Lösung, und die fällt ganz klar auf die Lösung ohne Tabelle. Zumal man mittels CSS ja zum selben Erscheinungsbild kommen kann, ohne die genannten „Nachteile“ der Tabelle.

 

[timmy38233]

Das Label-Tag bietet zusätzlich noch den Vorteil dass man, wenn man es klickt, direkt den Fokus in dem dazugehörigen input hat.