it-swarm.com.de

Beste Weg, um in HTML-Formularen zu layouten?

Ich möchte ein HTML-Formular mit beschrifteten Textfeldern wie folgt anzeigen:

      Vorname Nachname Geburtsdatum:  [________]

Mein offensichtlicher Ansatz besteht darin, einen <TABLE> zu verwenden und einfach die Beschriftungen und Textfelder in seinen Zellen zu platzieren. Gibt es jedoch einen besseren Weg, z. ein CSS-basierter Ansatz?

BEARBEITEN:

  1. Ich suche nach einer Möglichkeit, die die Ausführlichkeit in der HTML-Datei reduziert.
  2. Und ja, ich suche nach einer automatischen Größenanpassung der Etiketten. Siehe eine verwandte Frage zum Verpacken von Etiketten
32
Tony the Pony

Wenn Sie die Beschriftungen links neben den Feldern benötigen, verwenden Sie einfach eine Tabelle. Tabellen verschlechtern sich nicht nur in älteren Browsern, sondern sie passen die Etikettenspalte automatisch an den Text in ihnen an (vorausgesetzt, Sie verwenden white-space: no-wrap für die Zellen, die die Etiketten enthalten, und/oder - und das ist wahr - die vertrauenswürdige alte nowrap Attribut für das th-Tag) behandeln sie es, ziemlich eng gemacht zu werden, und sie sind einfach. Machen Sie jede Beschriftungszelle zu einer Überschrift und jede Feldzelle zu einer normalen Zelle. Und es ist eine Qual, aber stellen Sie sicher, dass die Bezeichnungen wirklich labels sind und mit ihren Feldern verknüpft sind, denn Barrierefreiheit ist wichtig, auch wenn Sie eine Tabelle nicht semantisch verwenden (vielleicht besonders, wenn Sie).

Ich würde gerne etwas über CSS-Lösungen erfahren, die die Beschriftungsspalten automatisch skalieren, dafür sorgen, dass sie eng sind und keine 18 Hacks beinhalten, um Inkonsistenzen zwischen Browsern zu beheben. Ich wäre begeistert, sie zu sehen. Aber jedes Mal, wenn ich nachgeschaut habe (und das sind mehrere), war es immer noch eine Lücke. Eine Lücke, die gefüllt werden muss, IMV, damit wir damit aufhören können, ohne Haarshirts zu tragen.

Für alle Leser, die nicht die Bezeichnungen auf der linken Seite benötigen, lesen Sie die Antwort von jball nach einer gut aussehenden, semantischen Alternative.

36
T.J. Crowder

In Bezug auf die Benutzerfreundlichkeit und wenn der vertikale Raum kein begrenzender Faktor ist, lässt sich eine Liste von Feldern mit der Bezeichnung über jedem Feld am schnellsten lesen und ausfüllen und kann ästhetisch gestaltet werden. Weitere Informationen finden Sie in vielen Usability-Studien im Internet, z. http://www.lukew.com/resources/articles/web_forms.html

19
jball

Ich möchte Definitionslisten (<dl>) verwenden, die in der Regel semantisch korrekt sind. Eine Bezeichnung wird durch eine Benutzereingabe definiert. Es hat Sinn für mich. <dl> drückt semantische Inhalte genauer aus als eine Tabelle.

<dl>
    <dt><label for="name>Name</label></dt>
    <dd><input type="text" id="name" /></dd>

    <dt><label for="email>Email</label></dt>
    <dd><input type="text" id="email" /></dd>
</dl>

Hier ist ein Beispiel

Übrigens verschlechtern sie sich in allen Browsern, sogar textbasiert.

14
Boris Guéry

Ich denke, so etwas ist das, was ich tue, aber ich werde nicht automatisch an die Länge des Textes anpassen, aber es ist meiner Meinung nach sauberer

<form>
  <label for="firstName">First Name</label>
  <input type="textfield" name="firstName" />

  <label for="lastName">Last Name</label>
  <input type="textfield" name="lastName" />
</form>

label {
  float:left;
  width:30px;
}

input {
  float:left;
  margin-left:30px;
}
5
Catfish

Der Artikel ist ein bisschen alt, aber ich habe immer den Rat einer Liste als solide empfunden: (wenn Sie Ihre Tabellen loswerden wollen)

http://www.alistapart.com/articles/prettyaccessibleforms/

4
quoo

CSS-Tabellenanzeige

Ab IE8 + können Sie dazu CSS Table Display verwenden:

enter image description here

<!DOCTYPE html>
<html>
<head>
<style>
form > div > label { text-align: right; vertical-align: top }
form { display: table; }
form > div { display: table-row; }
form > div > label,
form > div > textarea,
form > div > input { display: table-cell; }
</style>
</head>
<body>
<form method="post">

<div>
<label for="name">Name</label>
<input type="text" id="name" size="14"/>
</div>

<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>

<div>
<label for="ssn">Social Security Number</label>
<input type="text" id="ssn"/>
</div>

<div>
<label></label>
<input type="submit" value="Send"/>
</div>

</form>
</body>
</html>
3
Jonas

Verwenden Sie ein CSS-Framework wie Blueprint und formatieren Sie die Formulare damit.

Ein weiterer Trick wäre, mit CSS virtuelle "Spalten" zu erstellen und diese nebeneinander zu schweben. Beschriftungen in einer Spalte und Eingaben in einer anderen. Legen Sie das (beide Spalten) in ein div mit einer ausreichenden Breite und verschieben Sie die Spalten in die entgegengesetzte Richtung, in der Sie sie ausrichten möchten.

Hier ist ein Code (weil ich ein Formular erstelle), derfür einfache Formulare verwendet. Die einzige Einschränkung ist der große rechte Rand für Eingaben.

form input, form select
{
    float: right;
    margin-right: 650px;
}
form label
{
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}
form .nofloat
{
    float: none;
    margin: 0;
}
form br
{
    clear: both;
}

Und das Layout gefällt mir

<input type="text" id="name" />
<label for="name">Name</label>
<br />

Über diesem kleinen, eng geschriebenen Code befindet sich ein ganzer Artikel zum Erstellen tabellenloser Formulare in CSS.

2
Josh K

Normalerweise habe ich festgestellt, dass es zumindest einige Probleme gibt, wenn Tabellen nicht für Formulare verwendet werden. Die allgemeinen Dinge, die ich nicht lösen konnte:

  • Hintergrundfarbe für Felder/Eingaben ist ohne einen Fauxhintergrund nicht wirklich möglich
  • Spalten automatisch anpassen, aber ich denke, das ist in Ordnung
  • Wenn Sie mit CSS über das Feld fahren, können Sie JS verwenden, Tabellen können dies jedoch mit reinem CSS tun

Ich vermisse vielleicht ein paar Dinge, aber das flexibelste Mark-up, wenn Sie CSS verwenden, ist wie folgt:

<div class='form-field'>
   <label>Name</label>
   <input />
</div>

Sie haben Probleme, wenn Sie mehrere Felder pro Beschriftungsabschnitt haben möchten. Daher müssen Sie ein weiteres div einfügen, um die Eingaben zu speichern (damit die Beschriftung weiterhin nach links verschoben werden kann usw.):

<div class='form-field'>
   <label>Name</label>

   <div class='form-inputs'>
      <input />
      <input />
   </div>
</div>

Mit der obigen Markierung können Sie sehr flexible Formulare erstellen. Ich werde das CSS nicht veröffentlichen, da es einem 2-Spalten-Layout sehr ähnlich ist.

Ich muss mich immer noch hinsetzen und herausfinden, ob reine CSS-Formulare für alle Gelegenheiten geeignet sind, aber das ist sehr unwahrscheinlich!

Formulare lassen sich am schlechtesten mit CSS stylen. Die einzigen größeren Cross-Browser-Probleme, die ich hatte, waren beim Stylen der FieldSet- und Legend-Elemente. Keine wirklichen Hacks, aber sie brauchen etwas Arbeit, um gut auszusehen.

0
Mig

Ein Problem mit Tabellen ist der Space Bug . Wenn Sie keine Tabellen verwenden, können Sie Ihre Beschriftung und Eingabe folgendermaßen schreiben:

<label for="foo">Blah <input id="foo" type="text"/></label>

das kapselt die Eingabe und die Beschriftung richtig.

In einer Tabelle erhalten Sie andererseits die getrennten:

<td><label for="foo">Blah</label></td><td><input id="foo" type="text"/></td>

Dies bedeutet, dass der Bereich zwischen </ label> und <input /> nicht auf Mausklicks reagiert.

Bei einfachen Feldern ist es nicht so schlimm, aber bei Optionsfeldern und Kontrollkästchen ist es wirklich ärgerlich (oder ich bin einfach nur super wählerisch).

Um Ihre Frage zu beantworten: Ich glaube nicht, dass es eine gute Möglichkeit gibt, eine Spalte in CSS zu formatieren (es sei denn, die Spaltenbreite ist bekannt - Sie könnten dies mit JavaScript erreichen ...) Also T.J. Crowder hat sicherlich eine hervorragende Antwort.

Es gibt jedoch ein Argument für CSS (und erzwungene Breiten), da ich in einem Fall ein sehr großes Formular erstellt habe, das den gesamten Bildschirm abdeckte. Alle Felder werden auf einem Bildschirm angezeigt (wie vom Kunden gewünscht), und das CMS gibt keine Tabelle aus. Aber selbst wenn ein Tisch ein Albtraum gewesen wäre, weil alle Felder für viele in nicht ausgerichteten Spalten platziert waren. Das wäre mit einer Tabelle ziemlich schwierig (viele Zeilen, die die Tabelle als Raster verwenden, das eine Tabelle für das Layout wäre!).


Aktualisieren:

Laut Kommentar unten sagt singe31, dass <input/> nicht innerhalb des <label> Tags definiert werden kann. Das ist falsch. Die HTML 4.01 DTD ist einfach zu lesen und wir sehen, dass:

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Mit anderen Worten, ein <input/> kann in einem <label>-Tag erscheinen. Es ist vollkommen legal.

HTML 5 zeigt deutlich, dass dies in der Dokumentation zu w3c legal ist:

http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element

Scrolle ein bisschen nach oben zum "Code Example" und du siehst:

Code-Beispiel

Auf Plattformen, auf denen das Kontrollkästchen durch Klicken oder Drücken einer Kontrollkästchenbeschriftung aktiviert ist, kann das Klicken oder Drücken der Beschriftung im folgenden Snippet dazu führen, dass der Benutzeragent synthetische Klickaktivierungsschritte für das Eingabeelement ausführt, als ob das Element selbst ausgelöst worden wäre der Benutzer:

<label><input type=checkbox name=lost> Lost</label>

Auf anderen Plattformen besteht das Verhalten möglicherweise nur darin, das Steuerelement zu fokussieren oder nichts zu tun.

0
Alexis Wilke