Jetzt abonnieren!
Schöne Formulare in XHTML+CSS
Vorgestern wurde ich gefragt wie ich es in XHTML-Dokumenten handhabe Formulare zu gestalten. Ob ich dafür immer noch auf Tabellen zurückgreife, oder ob ich dies anders löse. Diese Frage möchte ich zum Anlass nehmen endlich einen kleinen Artikel zum Thema „Formulare“ zu verfassen, welcher ohnehin schon lange geplant war. Vorab eine Antwort auf die Tabellenfrage mit kleiner Erläuterung: Tabellen sind laut w3c lediglich dazu gedacht (und nur dazu gedacht!) um tabellarische Daten darzustellen. Daher ja -> table. Nicht zum layouten, und eben auch nicht um Formulare zu strukturieren. Da ich mich, seit ich XHTML einsetze, mit Semantik mehr und mehr beschäftige, achte ich natürlich auch darauf die korrekten Tags zu benutzen. Anders würd Semantik logischerweise keinen Sinn machen.
Daher möchte ich mit diesem Artikel denjenigen die bisher auf Tabellen zurückgegriffen haben, oder gerade erst anfangen Webseiten mittels CSS zu gestalten, ein wenig auf die Sprünge helfen wie man auch ohne Tabellen (oder vielleicht sogar gerade ohne Tabellen) wunderschöne Formulare zaubert. Sicherlich wird es schon einige Artikel zum Thema XHTML/Formulare geben. Da jedoch immer mehrere Wege nach Rom führen, und ich in den letzten Monaten für mich ein recht eigenes System entwickelt habe mit dem ich Formulare style, werde ich zur Recherche nicht auf andere Artikel zurückgreifen, sondern lediglich meine Art und Weise zeigen und erläutern. Sollten sich Fehler einschleichen, inhaltlich oder auch einfach vom sprachlichen, so bitte ich euch wie immer nicht davor zurückzuschrecken mich darauf hinzuweisen.
Jeder kennt DIE Standardtags auf die beim Formular erstellen zurückgegriffen wird:
form, input, textarea, option/select
Die Tags die jedoch dazu vorgesehen sind um Formulareingabefelder sinnvoll und schön zu beschriften benutzen jedoch leider nur wenige, noch weniger dürften überhaupt bereits etwas davon gehört haben:
fieldset, legend, label
Na, bisher davon schon einmal jemand etwas gehört? Wenn nein, nicht weiter schlimm, einfach weiterlesen. Ein ungestaltetes Formular in dem alle diese Elemente vorkommen, habe ich hier zur Demonstration erstellt, ein solches, jedoch bereits per CSS formatiertes Formular, gibt es zum Beispiel hier auf der Seite unter Kontakt zu sehen. Wer bisher seine Formulare in Tabellen gepackt hat, dem werden vielleicht die Kästen um inhaltsähnliche Felder aufgefallen sein.
Die Elemente welche hier sichtbar zum Zug kamen, sind die bereits erwähnten fieldset, sowie in Verbindung damit legend. Jemand der ein wenig rumgeklickt hat, dem wird evtl aufgefallen sein, das ein Eingabefeld oder eine Radiobox/Checkbox angewählt wurde, wenn man nur auf den Beschreibungstext geklickt hat. Dazu sorgt das, für das menschliche Auge im Browser, nicht auf den ersten Blick wahrnehmbare Tag label in Verbindung mit dem dazu benötigten Attribut for. Diese Technik benutzt zum Beispiel auch google auf seiner Suchseite, wenn man auf den Text „Das Web“, „Seiten auf Deutsch“ oder „Seiten aus Deutschland“ klickt. All dies passiert gänzlich ohne JavaScript. Der Wert vom for-Attribut beruft sich dabei auf einen Identifikationsbezeichner (id), welches dem entsprechenden Inputfeld, für welches das Label gelten soll, zugewiesen wird. Ein <label for="name"> beschreibt also ein Inputfeld welches die id „name“ besitzt. Ein Blick in den Quelltext von meinem Beispiel dürfte einiges aufschlussreicher sein.
Wer einen Blick in den Quelltext geworfen hat, dem wird vielleicht auch im label noch das Attribut accesskey aufgefallen sein. Dazu jedoch später.
Das grundlegendste wäre hiermit also schon erklärt:
fieldset gruppiert inhaltsähnliche Felder eines Formulares,
legend definiert eine Überschrift für die entsprechende Gruppe,
label weist einen Text einem bestimmten Eingabefeld zu.
Hier draus sollte ersichtlich werden das für ein label-Element das for-Attribut auf jeden Fall angegeben werden sollte, auch wenn dies laut XHTML-Spezifikationen nicht zwingend notwendig ist. Der User braucht so, ganz komfortabel, nur auf dem Text zu klicken, und gerade behinderte Menschen haben es um einiges leichter einen winzig kleinen Radiobutton oder eine Checkbox mit der Maus zu treffen.
for ist jedoch nicht das einzige Attribut welches ein label annehmen kann. Wie oben erwähnt ist auch das Attribut accesskey auf Labels anwendbar. Ist ein Accesskey, also eine „Zugriffstaste“ definiert, so kann der User sehr einfach mittels ALT-Taste + Accesskey ein entsprechendes Feld anwählen. In meinem obigen ersten Beispiel habe ich für die Felder unter „Kontaktdaten“ die Accesskeys 1-8 vergeben. Ein User kann also z.B. mittels [ALT]+[1] (im Opera [Shift]+[Esc]+[1]) das Feld „Name“ auswählen. Dabei ist jedoch darauf zu achten, dass man diese Accesskeys in irgendeiner Art kenntlich macht. Ein Artikel wie dies lösen kann findet sich bei AListApart
http://www.alistapart.com/articles/accesskeys/
Da die Möglichkeiten was das Markup angeht jetzt geklärt sind, kommen wir zum eigentlichen Styling des Formulars durch CSS. Weil jedoch nicht jedes Formular gleich aussehen sollte im www, beschränke ich mich auf Einzelheiten. Die Details kann am Ende jeder für sich abändern, oder auch auf dieser Grundlage ein komplett eigenes Formular stylen und dem Design seiner Seite anpassen. Das Formular welches ich hier beschreiben werde findet sich im Übrigen hier: www.manuelbieh.de/artikel/formulare/formular02.htm
Zuerst weisen wir dem Fieldset eine länge zu. 100% Länge macht bei einer hohen Auflösung wenig sinn, da die Begrenzung kaum noch ersichtlich wird. Außerdem ist der Standardrahmen hässlich, weswegen wir ihm einen eigenen Rahmen geben: border: 1px solid #4b408c. Als letztes ändern wir noch den Abstand der einzelnen Fieldsets, da diese mir zu eng beieinander liegen: margin: 1.5em auto 1.5em auto;. Die auto-Werte stehen in diesem Fall dafür, die Fieldsets horizontal zu zentrieren.
Damit sich die per legend definierten Feldüberschriften vom Text innerhalb der Felder abhebt, verpassen wir ihnen eine Hintergrundfarbe, etwas mehr Luft, einen eigenen Rahmen, sowie eine fette Schrift:
legend { background: #b7b1d5; border: 1px solid #4b408c; border-right-width: 2px; border-bottom-width: 2px; font-weight: bold; margin-bottom: 4px; padding: 4px; } |
Und weil es ziemlich bescheiden aussieht das die Eingabefelder aufgrund der unterschiedlichen Länge der jeweiligen Beschreibungen Treppen bilden, bringen wir diese auf eine Größe:
.kontaktdaten label { display: block; float: left; width: 5em; } |
Da label ein Inline Element ist, können wir ihm nicht direkt eine Breite zuweisen. Ergo: display: block. Da die Eingabefelder dadurch in die nächste Zeile rutschen würden, bekommen die labels ein float: left. Die Angabe für die Breite entspricht ca. die des längsten Wortes, also „Vorname:“.
Zu guter Letzt möchten wir natürlich nicht das die (noch hässlichen) Eingabefelder eng an eng übereinander stehen. Von daher geben wir auch ihnen etwas Luft, einen schöneren Rahmen, und einen hover- und active-Status:
input,textarea { background: white; border: 1px solid #4b408c; margin: 3px 0; padding: 3px 3px; } input:active, input:focus, input:hover { background: #E8EBDF; } label { margin: 5px 0; } |
Warum label {margin: 5px 0;}? Ich möchte das das Label vertikal zentriert mit der Eingabebox bündig ist. Da ich den Eingabefeldern hier einen Margin von 3px gebe, rutscht der Text im Label nach oben. Durch das margin im Label wird dies jedoch wieder ausgeglichen.
Wenn man einen Blick auf das Ergebnis wirft, sieht man, dass jetzt bereits mit wenigen Zeilen CSS, ein übersichtliches, nett aussehendes Formular gestaltet wurde. Auf dieser Grundlage dürfte es problemlos möglich sein das Formular seinen Wünschen hin anzupassen, zu verbessern, oder auch einfach so zu übernehmen. Einige Schritte die ich vorgenommen habe, habe ich in diesem Artikel nicht weiter kommentiert. Dies war der Fall wenn etwas zur Verständnis nicht nötig war.
Einige Unterschiede gibt es jedoch zwischen Formularen in HTML und in XHTML welche ich nicht angesprochen habe: Sogenannte „Shorttags“. Shorttags werden zum Beispiel benutzt um in Optionsfeldern eine Vorauswahl zu treffen, oder um Checkboxen oder Radiobuttons beim Aufruf der Seite bereits zu aktivieren.
<option selected> bzw. <input type="radio" checked>. Dies ist seit XHTML nicht mehr erlaubt. Stattdessen muss es in dieser Form geschrieben werden: <option selected="selected"> und <input type="radio" checked="checked">
Das sollte für heute reichen, und ich denke, dass mit diesem Artikel auch XHTML/CSS-Anfänger leicht ein schönes und benutzerfreundliches Formular zustande bekommen.
Solltet Ihr wie gesagt Fehler finden, der Meinung sein das ich etwas vergessen habe, oder sonstige Anmerkungen loswerden wollt, dann scheut euch nicht die Kommentarfunktion hier unten zu benutzen, oder schickt es mir einfach über mein Kontaktformular welches sich unter der Kommentarfunktion wiederfindet ;)
Links zum Thema
Veröffentlicht: 20.02.2005, 20:12 Uhr
Rubrik:
Tags:
Diskussion: 40 Kommentare
Social Media:
40 Kommentare zu “Schöne Formulare in XHTML+CSS”
Die Trackback-URL lautet
Februar 20th, 2005 at 21:17
Richtige Formulare mit XHTML
So erstellt man richtige Formulare mit XHTML und CSS….
Februar 21st, 2005 at 20:35
Sehr cooler Artikel, einiges davon wusste ich schon, aber das mit den Accesskeys hat mich jetzt doch ein wenig gefangen. Bisher hatte ich das noch nie benutzt. Ich kriege die Dinger aber irgendwie mit Opera nicht angesprungen, woran liegt das, bzw. wie macht man das?
Februar 21st, 2005 at 21:26
Hi.
Das das im Opera nicht wie im Firefox oder Internet Explorer funktioniert hatte ich nicht gewusst. Im Opera muss stattdessen wie ich finde ziemlich umständlich shift+esc+accesskey gedrückt werden. Werde es dem Artikel aber hinzufügen. Danke für den Hinweis ;)
März 17th, 2005 at 14:38
Sehr nett, und wirklich einfacher, als ich erwartet habe. Doch wie immer, wenn ich als <table>-Opfer etwas richtig positionieren will, gibt es auch hier ein Problem, das ich nicht lösen kann:
Dem <label> habe ich eine Breite von 20em zugewiesen und per display:block; und float:left; links ausgerichtet. Das funktioniert zusammen mit einem <input> rechts wunderbar, aber nun will ich einen radio-button links stehen haben, und das <label> rechts davon (wie in deinem Beispiel). Nun funktioniert das natürlich nicht, da das label mit float:left; definiert ist. Was tun? Durch deine CSS komm ich zu keiner Lösung, bzw. kann nicht erkennen, wie du es gemacht hast, aber anscheinend nicht mit verschiedenen Klassen.
Noch komplizierter wird es, wenn ich erst eine checkbox, dann einen Text (in diesem Fall das label dafür), und dann noch ein Eingabefeld habe. Als Beispiel führ‘ ich hier einfach mal an:
o Ja, ich bin Mitglied bei _________
Wäre nett, wenn du mich aufklären könntest.
PS: Noch während dem Schreiben hab ich es nochmal versucht und einen (wahrscheinlich eher komplizierten) Weg um das erste Problem gefunden. Was bleibt, ist die Anordnung oben. Man kann ja schlecht mehr als 2 Objekte mit float anordnen.
März 17th, 2005 at 14:56
Hi Jannis,
wenn ich dein Problem richtig verstanden habe dann ist die Lösung ganz einfach:
Den Label die links stehen sollen kannst du wie jedem anderen Element in HTML auch, eine Klasse zu:
<label class="label-links">Nun kannst Du im Stylesheet mittels
.label-links {float: left;}nur dielabelsmit der Angabe für die jeweilige Klasse links ausrichten.April 12th, 2005 at 17:56
Hi Manuel, zunächst ein dickes Lob für Deine Site und die Artikel!
Ich muss mich derzeit durch HTML, XHTML, CSS und Co kämpfen… Speziell arbeite ich an den Formularen, die Du super erklärst.
Könntest Du mir vielleicht kurz beschreiben, was es im Stylesheet mit » * html fieldset {padding: 5px;} « auf sich hat? Besonders das Sternchen macht mir Kopfzerbrechen.
Leider habe ich nichts dazu in meinen Büchern gefunden.
Ganz herzlichen Dank für die Hilfe!
Susanne
April 12th, 2005 at 18:07
* htmlist ein hack, der es erlaubt nur den Internet Explorer anzusprechen. Das Sternchen ist ein Universalselektor ( http://www.css4you.de/wscss/css03.html#universal ) der es erlaubt Formatierungen für jedes im Dokument vorkommende Element zu deklarieren. In Verbindung mit der Verschachtelung durch das Leerzeichen, werden theoretisch alle HTML-Elemente, welche innerhalb des Universalselektors vorkommen, formatiert. ( http://www.css4you.de/wscss/css04.html#descendantselector ) Da HTML das oberste Element ist, wird diese Angabe von standardkonformen Browsern wie Firefox oder Opera schlicht ignoriert, und nur der IE führt die Angaben aus. In meinem Fall also gibt es nur im Internet Explorer einen Abstand von 5 Pixeln. Wichtig dabei ist, das die Angabe mit * html hinter der eigentlichen deklaration steht, da diese sonst wieder überschrieben würde.Juli 18th, 2005 at 16:13
Hallo Manuel,
ich bin durch die Suche nach html-Formularen die sich an GUI Style Guides orientieren auf Deine Seite gestoßen.
Zu dem Input dazu schon mal vielen Dank!
Was mir noch fehlt sind Beispiele wie man eine durchgehende Spaltenorientierung von Textfeldern, Checkboxen/Radiobuttons und Comboboxen hinbekommt.
Also so, dass eine Checkbox sich an dem Eingabefeld darüber bündig ausrichtet und der Label zur Checkbox dann rechts steht.
Ich hoffe das läßt sich mit CSS leicht realisieren damit ich endlich von diesen Tabellen weg komme.
Danke
– Markus
Juli 18th, 2005 at 18:20
So auf Anhieb fällt mir jetzt leider auch nur Trickserei mit
spanein. Dazu nimmst Du Links-gefloatetespanTags mit deninput-Feldern drin, gibst denen mittelsdisplay: block;undwidth:eine feste Breite, und richtest die input-Felder darin mittelstext-align: right;nach rechts aus.Ein zweiter Teil zum Thema Formulare ist in Planung, mangels Zeit aber im Moment leider nicht möglich umzusetzen.
Hoffe ich habe dein Anliegen jetzt richtig verstanden und nen Lösungsansatz bieten können.
September 13th, 2005 at 10:53
Moin,
zunächst vielen Dank für den wirklich aufschlussreichen Artikel.
Allerdings habe ich ein kleines Problem mit dem Internet Explorer (5.01, 5.5, 6 und 5/Mac)
Hier läuft der Hintergrund des Fieldsets oben über den Rahmen hinaus. Legend wird mit eingeschlossen.
Kann der Explorer das nicht anders, oder gibt es dafür evtl einen Hack?
Grüße
Günther
November 8th, 2005 at 17:17
HTML Formulare per CSS Layouten
Kleine Linksammlung für das barrierefreie Layouten von HTML Formularen per CSS.
http://www.manuelbieh.de/www/blog/2005/02/20/schone-formulare-in-xhtmlcss
http://www.style-sheets.de/guide/formulare/formulare_per_css_layouten
http://www.einfachfuer…
Januar 17th, 2006 at 17:11
Hallo
Schöner, ideengebender Artikel. Bisher habe ich <label> zwar schon zum Ansprechen der Eingabefelder benutzt, aber nicht in Verbindung mit den von dir beschriebenen Formatierungsmöglichkeiten mittels CSS.
Da du regelrecht nach der Benennung von Fehlern schriest:
Mal von den diversen fehlenden Kommata zur Abgrenzung der einzelnen Haupt- und Nebensätze (im ganzen Dokument):
Wie kann es sein, dass weniger Leute (Gruppe 1) davon gehört haben sollen, als es Leute gibt (Gruppe 2), die es benutzen? Schließlich sollte die letztere Gruppe (2), so sie dies anwendet, zumindest schon etwas davon gehört haben, oder?
Ergo: Gruppe 1 (die gehört haben) > Gruppe 2 (die anwenden), da Gruppe 2 Teil von Gruppe 1 ist. ;-)
Tschö, Auge
Januar 18th, 2006 at 08:54
Hallo Manuel,
dass die Accesskeys im Opera eine andere Tastenkombination haben finde ich gut, denn dann können sich Zeichen, die für Accesskeys verwendet werden nicht mit Menüshortcuts in die Quere kommen. Nicht umsonst kann man sinnvollerweise nur Ziffern für Accesskeys verwenden, da alle Buchstaben von irgendwelchen Browsern / Screenreadern bereits verwendet werden.
Viele Grüße
Marcus
März 21st, 2006 at 13:12
Hallo,
habe hier mal nachgelesen, aber nicht den Richtigen Tipp gefunden. Habe ein Formular mit Berechnung. Leider funkt. dies zwar im IE und Opera aber nicht im Mozilla & Firefox.
Soweit ich ekannt habe liegt es daran, dass ich keine angegeben habe. Wenn ich aber diesen Tag setze muss ich auch den Tag name benutzen und dieser ist in XHTML Strict nicht erlaubt. Hat evtl. jemand einen Tipp?
Liebe Grüße
Toralf
April 12th, 2006 at 14:50
Ich habe hier eine Frage. Ist es möglich die einzelnen Options eines Select Tags
jeweils mit Hintergrundbildern (kleine Icons) anzeigen lassen?
Mai 10th, 2006 at 11:12
Schade, dass das Kontaktformular als Beispiel angegeben, aber leider nicht vorhanden ist. :-|
Mai 24th, 2006 at 23:34
Hallo,
danke erst einmal für die tolle Vorlage … ich hab nun das Problem, dass ich die mit id=““ gekennzeichneten Formularfelder nicht mit den üblichen PHP-GET-Variablen abfangen kann …
Wie hast du dies gelöst? Ich habe die id=““ in name=““ umbenannt – so ging es, ist aber sicherlich nicht von dir so gedacht …
Danke,
Christian
Mai 24th, 2006 at 23:39
habe ich in meinen beispieldateien leider ein wenig unglücklichgemacht. das name attribut ist natürlich weiterhin erlaubt bei <input>
von daher ist es überhaupt kein problem einem formularelement einen namen, und gleichzeitig eine ID zu geben:
<input type=“text“ name=“email“ id=“email“ />
Juni 1st, 2006 at 21:03
[…] Schick, sehr schick: Formulare in XHTML & CSS. http://www.manuelbieh.de/www/blog/schone-formulare-in-xhtmlcss http://www.manuelbieh.de/www/artikel/formulare/formular02.htm […]
Juni 23rd, 2006 at 14:41
Das Formular ist wirklich sehr schön geworden!
Nur leider habe ich ein großes Problem, sobald ich den CSS-Teil in eine extra Datei auslagere, wird die Seite in einem von meinen Brwsern nicht mehr richtig dargestellt, in Abhängigkeit von meinem Doctype. Entweder der IE7 beta oder der Firefox 1.5.0.4 stellt die CSS nicht richtig oder gar nicht (Firefox) dar. Ich konnte keinen Doctype finden, in dem beide die Seite richtig darstellen :/ -> Einzige Lösung derzeit wäre die CSS nicht in eine Datei auszulagern, dann funktioniert es :(
Alternativ kann ich natürlich den Doctype mit PHP in Abhängigkeit zum Browser im Dokument ausgeben, aber dass kann es ja eigenltich nicht sein …
Ein kleines, aber nicht so entscheidenes Problem ergibt sich
auf dem neusten Internet Explorer 7 (allerdings Beta). Der Hintergrund des Formulars wird auch hinter der Legend (volle Formularbreite) angezeigt, so dass sich die leicht bläuliche Hintergrundfarbe über die Begrenzungslinie „hochzieht“. Hierzu fällt mir nur ein, den Dokumentenhintergrund komplett dem Formularhintergrund anzupassen.
Juni 23rd, 2006 at 14:48
Das Problem gabs im IE6 schon. Hab auch mal irgendwo einen Workaround dafür gesehen. Den weiß ich aber leider nicht auswendig gerade.
Ob das CSS ausgelagert wird oder nicht sollte für die darstellung eigentlich keinerlei Unterschiede bedeuten. Sind vielleicht Bilder im Formular verlinkt die dann nicht mehr stimmen?
Juni 26th, 2006 at 10:15
Danke für die schnelle Antwort!
Der Fehler lag eigentlich aud der Hand, aber ich habe ihn trotzdem übersehen. Der Webserver hat für die CSS-Datei einen falschen Mime Type ausgeliefert. Mehr dazu hier:
http://css-discuss.incutio.com/?page=MozillaCssMimeType
An dem Workaround für das IE-Formular wäre ich sehr interessiert. Trotz intensiver Suche konnte ich dazu leider nichts dazu finden.
Juli 22nd, 2006 at 11:41
Hi,
nettes kleines Tutorial, jedoch eine Anmerkung:
von Accesskeys lieber die Finger lassen, da diese inzwischen selbst nicht mehr garantiert barrierefrei eingesetzt werden könnnen..
siehe u.a. http://meiert.com/de/publications/articles/20041113/
und verschiedene Artikel von
http://www.wats.ca/orphans.php
Ferner hast Du im Beispiel Form02 noch einen Shorttag (‚checked‘ im Bereich „benachrichtigungsart“) angegeben anstatt des (auch von Dir selbst am Artikelende erwähnten) xhtml-validen checked=“checked“.. somit ist Dein Form momentan nicht xhtml-valide
Gruß aus Berlin,
Lars
November 17th, 2006 at 12:23
Hallo,
hätte da auch mal eine Frage bezüglich deines Formularlayouts
K̦nnte man zum Beispiel innerhalb des Labels Kontaktdaten 2 Р3 Felder und dazu geh̦rendem Text auch nebeneinander positionieren damit das dann eine Art Tabellen Effekt darstellt?
Gruß und Dank Markus
Januar 10th, 2007 at 13:06
[…] Formulardaten übermitteln Hallo, ichhabe mich nun etwas in CSS eingearbeitet, allerdings geht es jetzt um ein Formular. Da gibt es ja im Internet einige Beispiele, wie man dies mit CSS machen kann. Ein Beispiel z.B. hier: Manuel Bieh – xhtml, css, webdesign … » Schöne Formulare in XHTML+CSS bzw. das Formular hier: Manuel Bieh – xhtml, css, webdesign, … Was ich nun alerdings nicht verstehe ist: Wie werden die eingegebenen Daten an eine bestimmte e-mail Adresse übermittelt??? Keine Anleitung für Formulare in CSS beschreibt dies… Ich glaube man braucht z.B. php dazu, aber ich hab bei keiner Anleitung gefunden, wie ich da etwas einbinde, oder wie das genau funktioniert. Für mich als Anfänger etwas verwirrend – Vieleicht kann mir jemand behilflich sein. Danke! chris […]
Januar 24th, 2007 at 09:49
Hallo,
das ist dein Code:
Anfrage
Betreff
Nachricht:
in welcher Datei definierst du die Formatierungen zu der id „a-nachricht“ und „a-betreff“ zum Beispiel? Ich kann nichts finden? Darum sieht mein Formular mit obigen Code von dir bei mir aus anders aus!
Gruß,
Bernd
Januar 30th, 2007 at 16:16
Wunderschön!
Aber hat sich das Formular (sowie diese Seite) mal jemand im IE angeguckt?
Und was macht man, wenn man ein Formular mit mehreren Spalten haben möchte (die alle gleich lang sind), bei dem häufig Formularfelder dazu kommen und das auch noch in den gängigsten Browsern gut aussieht?
Da spar ich mir doch das Gefrickel und suche mir einen Mittelweg.
Februar 3rd, 2007 at 02:02
@Linda
Kann im IE keine großen optischen Unterschiede feststellen. Und wieso Gefrickel?
Zugegeben hast Du bei deinem Wunsch (gleich lange Spalten) mit einem Tabellenlayout evtl. Vorteile resp. kommst ohne workarounds aus.
Arbeitest Du hier mit versch. columns und Mindesthöhen evtl in Kombination mit BG-Images, so sehe ich hier keinen Grund großartig zu frickeln ;-) …
Februar 11th, 2007 at 15:42
Merci
… für dieses kleine (aber lehrreiche) Tutorial!
Februar 22nd, 2007 at 22:56
Phentermine without doctor approval….
Buy cheap phentermine without doctor….
März 10th, 2007 at 22:12
Hallo, nutze dein Formular jetzt auch … vielen Dank dafür!!
Gruss Knurri
März 10th, 2007 at 22:16
Hallo Manuel,
gibt es irgendwelche Einschränkungen in der Nutzung deines Formulars? Muß z.B. ein Backlink gesetzt werden?
Danke für deine Antwort!
Bikers Discount heisst günstige Motorradbekleidung!!
März 10th, 2007 at 22:19
Das ganze steht unter Creative Commons Attribution-Share Alike 2.0. Kann also recht uneingeschränkt genutzt werden, auch kommerziell!
März 25th, 2007 at 14:17
Das das im Opera nicht wie im Firefox oder Internet Explorer funktioniert hatte ich nicht gewusst. Im Opera muss stattdessen wie ich finde ziemlich umständlich shift+esc+accesskey gedrückt werden. Werde es dem Artikel aber hinzufügen. Danke für den Hinweis ;)
April 26th, 2007 at 16:03
absolut grauenvoll im IE 6
Kennt jemand eine Lösung für input, select-Felder nebeneinander ?
Juni 10th, 2007 at 12:36
Hab hierhergegooglet – jetzt weiß ich auch wie man die Tastenkürzel unter Opera nutzen kann :)
Mein eigentliches Problem ist aber weiterhin ungelöst (unter Windows): INPUTs werden von OPERA immer einige Pixel länger dargestellt als in anderen Browsern (Vergleich OPER9, FFOX15, MSIE6). Ist mir bisher nie aufgefallen, aber natürlich ärgerlich, wenn es um die Optik geht. Mit CSS kann ich auch rumgestalten wie ich will – es bleibt das Problem. Die Breitenangabe soll schon absolut per WIDTH funktionieren, also keine Prozentsachen.
Da bleibt mir wohl nur die Suche nach einem „Hack“ :-\ Oder kennst Du Dich zufällig damit aus?
Oktober 22nd, 2008 at 11:53
Sehr geehrter Herr Bieh,
Ihr fertiges Formular benuzt im Radiobutton checked nicht checked=“checked“, dies ist nicht mehr ganz aktuell. Ansonsten ein super Bericht.
Vielen Dank für Ihre Aufmerksamkeit :-D
März 2nd, 2009 at 20:24
Vielen vielen Dank für diesen äußerst hilfreichen Artikel!
Ich schreibe gerade ein MVC-Framework in PHP und habe vor lauter PHP mein HTML-Wissen bis auf die Grundlagen komplett verdrängt :D Aber jetzt habe ich wieder Durchblick.
Falls mein Framework interessant für euch sein sollte: http://www.net-developers.de/2009/02/28/formulare-verarbeiten-und-uberprufen-mit-meinem-framework/
MfG Simon
März 3rd, 2009 at 15:03
Hallo,
vielen Dank für das hilfreiche Tut :top:.
Ich habe nun meine Formulare mit dieser Hilfe endlich weg von Tabellen gebracht, eine Frage habe ich zu select-Feldern, wenn ich ein solches in mein Formular integriere, dann wird der „input“ darunter nach rechts versetzt – Warum ist dass so?
Danke und Gruss
Michael
Juli 12th, 2009 at 16:36
Hi
Danke für diesen Artikel, sieht echt super aus dein Formular. Ich kannte zwar die Tags fieldset, legend und label aber ich hab es trozdem nie geschafft die Formulare so schön zu gestalten.
Einen kleinen Tipp habe ich allerdings noch:
label {
cursor: pointer;
}
Dadurch ändert sich der Mauszeiger, wenn man über das Labelelement fährt. Es sieht dann aus wie bei einem Link, so merken die User auch, dass sie das anklicken können.