Formular mit Divs statt Tabellen
Sympatisant
- css
Hallo,
ich moechte gerne ein Formular mittels CSS und DIVs realisieren(*).
Alle Beispiele, die ich hier und im Web gefunden habe, nutzen
in etwa den gleichen Code.
Doch stoesst man dabei auf Probleme, sollte eine Feldbeschreibung
Gibt es da eine Moeglichkeit, dass sich alle anderen Container
(linke Spalte) der Groesse anpassen - also sich an der Laenge des
groessten Containers orientieren?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.div_table_row label {
float:left;
height:15px;
margin:0pt 10px 0pt 0pt;
padding:0pt;
text-align:left;
width:150px;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="div_table_row">
<label>Erster Eintrag</label>
<input type="name" size="20">
</div>
<div class="div_table_row">
<label>Zweiter</label>
<input type="name" size="20">
</div>
<div class="div_table_row">
<label>Lorem Ipsum DoremDorem Lareo</label>
<input type="name" size="20">
</div>
</body>
</html>
(*) Ich bin mir dessen bewusst, dass man fuer Formulare durchaus
Tabellen nutzen kann.
Doch in meinem Falle ist es erforderlich mit DIVs zu arbeiten.
Besten Dank!
MfG,
Sympatisant
Gibt es da eine Moeglichkeit, dass sich alle anderen Container
(linke Spalte) der Groesse anpassen - also sich an der Laenge des
groessten Containers orientieren?
nein, das ist ein feature von tabellen - javascript könnte helfen
<div class="div_table_row">
<label>Lorem Ipsum DoremDorem Lareo</label>
<input type="name" size="20">
</div>
>
>
> (\*) Ich bin mir dessen bewusst, dass man fuer Formulare durchaus
> Tabellen [nutzen kann](http://forum.de.selfhtml.org/archiv/2005/8/t112555/).
tabellen sind in formularen genauso falsch wie zum layouten von inhalten, formulare sind formulare und keine tabellarischen daten
> Doch in meinem Falle ist es erforderlich mit DIVs zu arbeiten.
was hälst du von <fieldset />- oder <p />-elementen? es ist meistens nicht erforderlich mit <div />-elementen zu arbeiten
zudem, wieso hat ein div die klasse "div\_table\_row" - ist das nicht etwas unglücklich gewählt? wie wärs mit "formularzeile"?
Hallo,
tabellen sind in formularen genauso falsch wie zum layouten von inhalten,
formulare sind formulare und keine tabellarischen daten
Das ist sicherlich eine Grundsatzfrage - aber ich schliesse mich deiner
Meinung an, da es fuer mich logisch klingt.
was hälst du von <fieldset />- oder <p />-elementen? es ist meistens nicht
erforderlich mit <div />-elementen zu arbeiten
Da halte ich viel von ;)
zudem, wieso hat ein div die klasse "div_table_row" - ist das nicht etwas
unglücklich gewählt? wie wärs mit "formularzeile"?
..war ja nur zum Testen.
Das heisst nun, dass es _nicht_ moeglich ist(*), die Labels auf eine
gemeinsame Laenge zu bekommen?
Dann muss ich an dieser Stelle aber mal in den Raum werfen, dass Tabellen
dann doch durchaus Sinn machen oder nicht?
(*) ohne Javascript
MfG,
Sympatisant
Da halte ich viel von ;)
wunderbar
unglücklich gewählt? wie wärs mit "formularzeile"?
..war ja nur zum Testen.
ich hab schon live projekte gesehen wo ein produktivscript zum rendern der überschriften "test.php" benannt war - war ursprünglich auch nur zum testen ;)
auch wenns nur zum testen ist, benenn es gleich richtig, da sparst du dir nachher viel arbeit beim umbennen und kommst nicht in verlegenheit, ungünstige namen zu wählen
Das heisst nun, dass es _nicht_ moeglich ist(*), die Labels auf eine
gemeinsame Laenge zu bekommen?
das habe ich nicht gesagt - aber labels haben keinen bezug zueinander (sollen sie auch nicht) - du kannst aber ohne probleme jedem label eine fixe breite zuweisen die allen gerecht wird - nur dynamisch am längsten eintrag orientieren geht halt nicht, aber das muss es ja nicht?
Dann muss ich an dieser Stelle aber mal in den Raum werfen, dass Tabellen
dann doch durchaus Sinn machen oder nicht?
wenn die daten einen bezug zueinander haben - bei tabellen ist es erforderlich, dass die spalten in jeder zeile gleich breit sind, sonst siehts blöd aus, weil die daten ja beziehungen haben - in diesem fall ist es aber keine tabelle ;)
<fieldset>
<legend>Ihre Daten</legend>
<p class="odd"><label>Vorname</label> <input /></p>
<p class="even"><label>Nachname</label> <input /></p>
<p class="odd"><label>Straße</label> <input /></p>
<p class="even"><label>PLZ</label> <input /> <strong class="error">Dieses Feld darf nur Ziffern beinhalten</strong></p>
</fieldset>
es spricht nichts dagegen, dann allen <label />-elemente eine fixe breite zu geben, damits gut aussieht
das <strong />-element wird natürlich nur erzeugt/eingeblendet, wenn tatsächlich ein fehler auftritt
Hallo,
danke fuer dein ausfuehrliches Beispiel.
[..] nur dynamisch am längsten eintrag orientieren geht halt nicht,
aber das muss es ja nicht?
Das ist der einzige Punkt, der mich allerdings noch stoert.
Denn im Falle von dynamisch erzeugten Formularen kann man ja einfach
nicht wissen wie lang die maximale Laenge sein wird.
MfG,
Sympatisant
Hallo,
wenn das Formular mit einer serverseitigen Skriptsprache erzeugt wird, könntest Du z.B. die längste Labelbeschriftung (z.B. php strlen(string)) auslesen und diese dann multipliziert mit einem fixen Wert, der ungefähr der Breite eines Zeichens enspricht als inline-Style jedem label-Element zuweisen.
Grüße Basti
Hallo Basti,
ich habe mich jetzt an den Ergebnissen unserer Postings orientiert
und folgendes umgesetzt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.form_container input { width:160px; }
.form_container select { width:164px; }
.form_container textarea { width:300px; height:150px; }
.form_container .form_checkbox { height:16px; width:22px; margin-left:-4px; }
.form_container p { padding:0px; margin:2px 0px 2px 0px; }
.form_container strong { color:red; }
.form_container em { font-style:normal; }
.form_container h1 { font-style:bold; background-color:#FFBA10; border:1px solid black; font-size:15px; padding:2px 2px 2px 5px; }
.button_save { font-weight:bold; width:160px; background-color:white; border:1px solid red; margin:5px 0px 0px 160px; }
.form_container label { height:15px; margin:0pt 10px 0pt 0pt; padding:0pt; text-align:left; width:150px; white-space:nowrap; float:left; }
</style>
</head>
<body>
<div class="form_container">
<h1> Persönliche Daten </h1>
<p>
<label>Vorname</label>
<select><option>eins</option><option>zwei</option></select>
<!-- Auf diese explizite Angabe moechte ich gerne verzichten -->
<label style="float:none;">Vorname2</label>
<select><option>eins</option><option>zwei</option></select>
</p>
<p><label>Nachname</label> <input /></p>
<p><label>Straße</label> <input type="checkbox" class="form_checkbox"></p>
<p><em>Dies ist ein Beschreibungstext Lorem Ipsu Dolerem Ipsu Lorem PibumLorem Ipsu Dolerem Ipsu Lorem Pibum</em></p>
<p><label>PLZ</label> <input /> <strong>Dieses Feld darf nur Ziffern beinhalten</strong></p>
<p><label>Bemerkung</label> <textarea/></textarea></p>
<p><input type="submit" class="button_save"></p>
</div>
</body>
</html>
Nun habe ich jedoch Probleme, wenn ich zwei Formularelemente nebeneinander
aufreihen moechte. Die Stelle habe ich in dem Code oben mit einem Kommentar
versehen. Gibt es da eine einfache Moeglichkeit dass mittels CSS zu realisieren,
ohne dabei die Styles direkt angeben zu muessen?
Nochmal besten Dank.
MfG,
Sympatisant
Hallo,
meine derzeitige Loesung ist nun, dass ich fuer die Elemente, die
in der selben Reihe stehen sollen, eine Klasse mitangebe:
CSS
.form_container .second_column {
float:none;
margin-left:20px;
}
HTML
<p>
<label>Vorname</label>
<select><option>eins</option><option>zwei</option></select>
<!-- hier wird die Klasse explizit angegeben -->
<label class="second_column">Vorname2</label>
<select><option>eins</option><option>zwei</option></select>
</p>
Naja, eine Loesung mit der ich wohl Leben kann.
Wenn einer noch eine bessere Loesung weiss, so habe ich nichts
dagegen mich daran teilhaben zu lassen ;-)
MfG,
Sympatisant
ohne dabei die Styles direkt angeben zu muessen?
klassen sind das stichwort
allerdings solltest du
<div class="form_container"> </div>
gegen
<form> </form>
ersetzen und
<h1> Persönliche Daten </h1>
gegen
<fieldset>
<legend>Persönliche Daten</legend>
[...]
</fieldset>
bei richtiger zeichencodierung sind html-entities für umlaute übrigens überflüssig
Hallo,
ah, OK, danke.
Allerdings bin ich mitterweile ganz schoen frustriert!
Mein Code funktionierte nun fuer einspaltige Formulare recht gut.
Wenn ich jedoch zwei Spalten haben moechte, oder unterschiedlich
breite Formularelemente, dann klappt das nicht mehr - soll heissen,
die Elemente werden nicht mehr gleichmaessig ausgerichtet. (*)
Dann gibt es da ja auch noch den Moloch von selfhtml:
http://aktuell.de.selfhtml.org/weblog/ansatz-fuer-flexible-mehrspaltige-formulare
Doch in dem Beispiel werden die Labels jeweils _ueber_ die Inputfelder
gestellt, und zum anderen finde ich das dermassen uebertrieben und aufgeblaeht,
dass einem der Spass vergeht.
Ich meine, hunderte Zeilen an CSS nur fuer ein Formular. Das kann es
doch echt nicht sein.
Resuemiere ich nun mal, dann komme ich leider zu dem Entschluss, dass
Formulare ohne Tabellen der reinste Horror sind - zumindest mehrspaltige
Formulare ;-(
(*) Mit Copy&Paste sollte es direkt funktionieren..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.form_container input {
width:160px;
}
.form_container select {
width:164px;
}
.form_container textarea {
width:300px;
height:150px;
}
.form_container .form_checkbox {
height:16px;
width:22px;
margin-left:-4px;
}
.form_container p {
padding:0px;
margin:2px 0px 2px 0px;
}
.form_container strong {
color:red;
}
.form_container em {
font-style:normal;
}
.form_container h1 {
font-style:bold;
background-color:#FFBA10;
border:1px solid black;
font-size:15px;
padding:2px 2px 2px 5px;
}
.button_save {
font-weight:bold;
width:160px;
background-color:white;
border:1px solid red;
margin:5px 0px 0px 160px;
}
.form_container label {
height:15px;
margin:0pt 10px 0pt 0pt;
padding:0pt;
text-align:left;
width:150px;
white-space:nowrap;
float:left;
}
.form_container .second_column {
float:none;
}
.form_container .long_element {
width:600px;
}
</style>
</head>
<body>
<div class="form_container">
<h1> Persönliche Daten </h1>
<p>
<label>Vorname</label>
<select class="long_element" ><option>eins</option><option>zwei</option></select>
</p>
<p>
<label>Hausnummer</label> <input />
<label class="second_column">Manchmal</label> <input />
</p>
<p>
<label>Nachname</label> <input />
<label class="second_column">Nachname des Angehoerigen</label> <input />
</p>
<p>
<label>Straße</label>
<input type="checkbox" class="form_checkbox">
</p>
<!--<p>
<em>Dies ist ein Beschreibungstext Lorem Ipsu Dolerem Ipsu Lorem PibumLorem Ipsu Dolerem Ipsu Lorem Pibum</em>
</p>-->
<p>
<label>PLZ</label>
<input />
<!-- <strong>Dieses Feld darf nur Ziffern beinhalten</strong> -->
</p>
<p>
<label>Bemerkung</label> <textarea /></textarea>
</p>
<p>
<input type="submit" class="button_save">
</p>
</div>
</body>
</html>
Waere fuer jede Hilfe dankbar.
MfG,
Sympatisant
Mein Code funktionierte nun fuer einspaltige Formulare recht gut.
Wenn ich jedoch zwei Spalten haben moechte, oder unterschiedlich
breite Formularelemente, dann klappt das nicht mehr - soll heissen,
die Elemente werden nicht mehr gleichmaessig ausgerichtet. (*)
was verstehst du unter mehrspalting?
label input label input zb?
unterschiedlich breite formulare
fieldset (100%)
label (30%) input (70%)
ich verstehe das problem nicht - mit relativen angaben hatte ich bis dahin nie probleme
Dann gibt es da ja auch noch den Moloch von selfhtml:
Ich meine, hunderte Zeilen an CSS nur fuer ein Formular. Das kann es
doch echt nicht sein.
mit einem ordentlichen konzept dahinter, wenn man weiss, was man will, gehts mit weit weniger
Resuemiere ich nun mal, dann komme ich leider zu dem Entschluss, dass
Formulare ohne Tabellen der reinste Horror sind - zumindest mehrspaltige
Formulare ;-(
nein, wenn du darüber nachdenkst, wie man es ordentlich macht, hast du keine probleme ;)
angenommen du hast vier felder, mit diesem codeschnipsel als ausgangsbasis
<from>
<fieldset class="odd">
<p class="odd">
<label>Feld1</label>
<input />
</p>
<p class="even">
<label>Feld2</label>
<input />
</p>
</fieldset>
<fieldset class="even">
<p class="odd">
<label>Feld3</label>
<input />
</p>
<p class="even">
<label>Feld4</label>
<input />
</p>
</fieldset>
damit kannst du ohne probleme in folgenden reihenfolgen ausrichten ohne das html zu ändern
form ist immer 100% breit, in allen beispielen
1
2
3
4
fieldset und p sind jeweils 100% breit
1 2
3 4
fieldset ist 100% breit, p jeweils 50%
1 3
2 4
fieldset ist 50% breit, p jeweils 100%
1 2 3 4
fieldset ist 50% breit, p jeweils 50%
1
2
3 4
fieldset ist 100% breit, alle p auch 100% - alle p in fieldset.even sind 50% breit
1 2
3
4
fieldset ist 100% breit, alle p auch 100% - alle p in fieldset.odd sind 50% breit
usw.
du musst dir nur überlegen, welche stile es gibt - nicht einfach freiform-papiervorlagen umbauen, das kann im web keiner mehr ausfüllen
zb so
es gibt inputs in den längen small, medium und large die sich nur in deren width unterscheiden
labels von radiobuttons (in einem p mit der klasse .radio) haben keine fixe breite, radiobuttons können nebeneinander und untereinander sein
usw
du schreibst dir "regel" für bausteine auf, aus denen dein formular bestehen können soll, aus dem baust du das dann zusammen
somit sogst du einerseits für ein einheitliches bild, andererseits kannst musst du dann nicht verzweifeln ;)
wenn du von vorne herrein dein formular mit einer tabelle layoutest, ist es für immer so gegossen und du musst ein kompliziertes tabellenlayout anpassen
in einer css-block-bauweise sparst du auf langesicht beim umbauen vor allem komplexer formulare viel zeit zudem kannst du durch das umdefinieren deiner regeln schnell alles ändern oder wenn du immer den selben code verwendest mehrere css vorlagen erstellen und so alle formulare auf einer website binnen minuten durch ersetzen eines einzigen css files umgestalten
alle kurzen input-felder in graden zeilen (postleitzahl, hausnummer usw) sollen statt 25% jetzt 30% lang sein? kein problem, nur p.even input.small abändern und die sache hat sich
alle radiobutton-labels sollen einen absatz erzeugen und das label soll rot sein?
p.radio label auf rot und block umstellen, fertig
Das ist der einzige Punkt, der mich allerdings noch stoert.
Denn im Falle von dynamisch erzeugten Formularen kann man ja einfach
nicht wissen wie lang die maximale Laenge sein wird.
was hälst du von dem magischen wort "zeilenumbruch"?
die einzelbeschriftungen werden wohl in halbwegs praktikabler länge bleiben, wenn man eine maximalbreite definiert, kommt man damit gut klar
für länger textpassagen (datenschutz/fragen usw) kommst du um einen zeilenumbruch ohnehin nicht rum
zudem auch wenn dein layout in einer tabelle mit dynamischen spaltenbreiten perfekt aussieht, du kannst nie wissen, wie gross der viewport des benutzers ist, wie gross die schrift usw - im schlimmsten fall ist die label-spalte so breit, dass der benutzer horizontal scrollen muss, um zu den eingabefeldern zu gelangen
Salvete,
was hälst du von dem magischen wort "zeilenumbruch"?
Hehe.. da kam ich gerade auch drauf ;-)
MfG,
Sympatisant
Hallo,
so, ich habe jetzt eine fuer mich zufriedenstellende Version..
..mit relativ wenig CSS und der Moeglichkeit mehrere Spalten anzuzeigen.
Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Multicolumn Formular based on CSS</title>
<style type="text/css">
/* -- Styles for the Input-Fields */
.form_container input { width:160px; float:left; margin-right:10px; }
.form_container select { width:164px; margin-right:10px; }
.form_container textarea { width:465px; height:150px; margin-right:10px; }
.form_container .form_checkbox { height:16px; width:22px; margin-left:-3px; margin-right:155px; }
.form_container .long_element { width:469px; }
.form_container .short_element { width:50px; margin-right:120px; }
/* -- Styles for Text */
.form_container strong { color:red; }
.form_container em { font-style:normal; }
.form_container h1 { font-style:bold; background-color:#FFBA10; border:1px solid black; font-size:15px; padding:2px 2px 2px 5px; }
.form_container label { height:15px; margin:0pt 10px 0pt 0pt; padding:0pt; text-align:left; width:120px; white-space:nowrap; float:left; }
/* -- Styles for Buttons */
.button_save { font-weight:bold; width:160px; background-color:white; border:1px solid #FFBA10; margin:5px 0px 0px 130px; }
/* -- Container Styles */
.form_container { border-width:0px; }
.form_container p { padding:0px; margin:2px 0px 2px 0px; clear:both; }
.form_container div { clear:both; }
</style>
</head>
<body>
<fieldset class="form_container">
<h1> Persönliche Daten </h1>
<p>
<label>Vorname</label>
<select class="long_element" ><option>eins</option><option>zwei</option></select>
</p>
<p>
<label>Hausnummer</label>
<input class="short_element"/>
<label>Manchmal</label>
<input />
<!-- auch drei Spalten moeglich
<label>Manchmal3</label>
<input /> -->
</p>
<p>
<label>Nachname</label> <input />
<label>Angehoeriger</label> <input />
</p>
<p>
<label>Kunde</label>
<input type="checkbox" class="form_checkbox">
<label>Kundennummer</label>
<input class="short_element"/>
</p>
<p>
<label>PLZ</label>
<input class="short_element" />
</p>
<p>
<label>Bemerkung</label>
<textarea /></textarea>
</p>
<p>
<input type="submit" class="button_save">
</p>
</fieldset>
</body>
</html>
MfG,
Sympatisant