Formulare richtig erstellen

ByStones · 01.04.2010, 12:05

Hallo,
hab wieder mal ne kleine Frage:
Wie kann ich am besten Formulare erstellen ?
Soll heißen welches wie soll ich die inputs am besten verpacken, dann mit das ganze ordentlich strukturiert ist und man dafür keine Elemente "misbrauchen" muss ?

Die einfachste möglichkeit wäre natürlich das ganze in eine blinde Tablle zu packen, aber dafür sind eigentlich keine Tabellen da ?

Code:

<table border="0">
<tr><td>Name:</td><td><input type="text" name="name" value="" /></td></tr>
</table>

Oder soll man es ganz ohne umgebenes Element machen?
Und den label-Elementen eine fixe Breite geben damit das ganze ordentlich aussieht ?

Code:

<label for="name">Name:</label><inpu type="text" name="name" value="" /><br />

Oder vielleicht doch über eine Liste (wieder entsprechend Formatieren):

Code:

<ol>
<li><label for="name">Name:</label><inpu type="text" name="name" value="" /></li>
</ol>

Was ist die beste Lösung ? Oder soll man es sogar ganz anders machen ?

Grüße

nikosch · 01.04.2010, 12:07

Das ist mehr ein philosophische Frage. Tabellen sollte man i.A. vermeiden, ansonsten tu wie DU magst.

ChrisB · 01.04.2010, 12:12

Es gibt auch genug Leute, die Formulare durchaus für einen berechtigten Anwendungsfall von Tabellen sehen - immerhin gibt es hier eindeutig zugeordnete Daten-Paare, jeweils Eingabefeld und Beschriftung.

ragtek · 01.04.2010, 12:15

Zitat:

Zitat von ChrisB

Es gibt auch genug Leute, die Formulare durchaus für einen berechtigten Anwendungsfall von Tabellen sehen - immerhin gibt es hier eindeutig zugeordnete Daten-Paare, jeweils Eingabefeld und Beschriftung.

Das gibt es aber auch mit label und dem Eingabefeld

nikosch · 01.04.2010, 12:20

Zitat:

immerhin gibt es hier eindeutig zugeordnete Daten-Paare, jeweils Eingabefeld und Beschriftung

Kenne ich bisher nur als Argument für Definitionslisten. label sollte man allerdings auf jeden Fall verwenden.

ByStones · 01.04.2010, 12:50

was haltet ihr von der Idee das ganze mit einer Definitionsliste zu machen ?
bei dd kommt das label rein und bei dt dann das input ?

Code:

<dl>
<dd><label for="name">Name:</label></dd>
       <dt><input typ="text" name="name" id="name" value="" /></dt>
<dd><label for="email">E-Mail:</label></dd>
       <dt><input typ="text" name="email" id="email" value="" /></dt>
</dl>

wenn mandas ganze dann noch mit css formatiert kommt was ganz ansehliches dabei raus:

Code:

dl dt{
    float: left;    
}

dl dd{
    float:left;
    clear: left;
    width: 70px; /*Breite der dd damit das ganze bündig ist*/
}

dl dd,dt{
    margin-top: 5px;
}

nikosch · 01.04.2010, 12:58

Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel
SimpleBits / SimpleQuiz › Part VI › Form(atting)

xm22 · 08.04.2010, 10:45

Semantisch gesehen, ist ein Formular ja keine Definitionsliste. Mein Ansatz ist. jeden Abschnitt (Label + Feld (+ Fehlermeldung + etc.)) in ein Div. dann hat man auch genügend Möglichkeiten, alles zu formatieren - Das aber nur nebenbei.

feeela · 08.04.2010, 14:46

Zitat:

Zitat von ByStones

was haltet ihr von der Idee das ganze mit einer Definitionsliste zu machen ?

Wenn du es in eine DL packst, kannst du meiner Meinung nach auch gleich eine Tabelle verwenden. Sinnentfremdet ist das in beiden Fällen.

Ich stelle die Eingabfelder entweder direkt in die LABEL und formatiere die LABEL als BLock-Elemente:

Code:

<label for="xy">Labeltext: <input type="text" id="xy" /></label>

oder ich schreibe es hintereinander und nutze Zeilenumbrüche:

Code:

<label for="xy">Labeltext:</label><input type="text" id="xy" /><br />

Gruß,

Feeela

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Websiteteile vom User erstellen lassen	magni	PHP Tipps 2009	4	15.12.2009 11:17
Kleinen PHP Script "Bannerrotation" aus MySQL-Datenbank erstellen...	ispvip	PHP Tipps 2009	2	03.11.2009 09:01
PHP Ordner erstellen mit bestimmten Namen	matzee	PHP Tipps 2009	13	04.09.2009 11:45
Umlaute mit Request richtig übertragen	Lebenssonde	JavaScript, Ajax und mehr	4	28.07.2009 15:10
[Erledigt] jpeg erstellen aus textstring erstellen	Psydl	PHP Tipps 2009	16	07.07.2009 18:54
parameter von interfaces in klassen richtig mit anwenden?	litterauspirna	PHP Tipps 2009	27	30.06.2009 20:58
[Erledigt] foreach schleife beim erstellen einer image_map schlägt fehl	litterauspirna	PHP Tipps 2009	8	25.05.2009 13:04
Mit PHP ein zip-Archiv erstellen	BartTheDevil89	PHP Tipps 2009	8	24.03.2009 16:19
[Erledigt] Javascript-Code in einem document.write richtig durchführen + richtiges Po	BartTheDevil89	JavaScript, Ajax und mehr	15	29.11.2008 14:08
[Erledigt] Verzeichniss erstellen mit ftp_mkdir...	Lapje	PHP Tipps 2008	6	21.10.2008 15:14
Anker erstellen	fachinformatiker	HTML, Usability und Barrierefreiheit	5	17.05.2006 10:18
Stammbaum erstellen	Riot	PHP Tipps 2005	17	13.05.2005 16:32
code-schnipsel -> tabelle richtig erstellen, aber wie?		PHP Tipps 2005	1	08.05.2005 03:45
Ordner erstellen und Datei uploaden	Juuro	PHP Tipps 2005	6	20.01.2005 21:18
Ordner per Skript erstellen --> Rechte Problem		PHP Tipps 2004	2	06.07.2004 14:19

01.04.2010, 12:05
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Formulare richtig erstellen Hallo, hab wieder mal ne kleine Frage: Wie kann ich am besten Formulare erstellen ? Soll heißen welches wie soll ich die inputs am besten verpacken, dann mit das ganze ordentlich strukturiert ist und man dafür keine Elemente "misbrauchen" muss ? Die einfachste möglichkeit wäre natürlich das ganze in eine blinde Tablle zu packen, aber dafür sind eigentlich keine Tabellen da ? Code: <table border="0"> <tr><td>Name:</td><td><input type="text" name="name" value="" /></td></tr> </table> Oder soll man es ganz ohne umgebenes Element machen? Und den label-Elementen eine fixe Breite geben damit das ganze ordentlich aussieht ? Code: <label for="name">Name:</label><inpu type="text" name="name" value="" /><br /> Oder vielleicht doch über eine Liste (wieder entsprechend Formatieren): Code: <ol> <li><label for="name">Name:</label><inpu type="text" name="name" value="" /></li> </ol> Was ist die beste Lösung ? Oder soll man es sogar ganz anders machen ? Grüße


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

01.04.2010, 12:07
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das ist mehr ein philosophische Frage. Tabellen sollte man i.A. vermeiden, ansonsten tu wie DU magst. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.04.2010, 12:12
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Es gibt auch genug Leute, die Formulare durchaus für einen berechtigten Anwendungsfall von Tabellen sehen - immerhin gibt es hier eindeutig zugeordnete Daten-Paare, jeweils Eingabefeld und Beschriftung.

01.04.2010, 12:58
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Vorsprung durch Webstandards \| Semantischer Code - Definitionen, Methoden, Zweifel SimpleBits / SimpleQuiz › Part VI › Form(atting) __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.04.2010, 10:45
xm22 Erfahrener Benutzer Registriert seit: 30.07.2008 Beiträge: 1.167 PHP-Kenntnisse: Fortgeschritten	Semantisch gesehen, ist ein Formular ja keine Definitionsliste. Mein Ansatz ist. jeden Abschnitt (Label + Feld (+ Fehlermeldung + etc.)) in ein Div. dann hat man auch genügend Möglichkeiten, alles zu formatieren - Das aber nur nebenbei.