it-swarm.com.de

Wie formatiere ich ein HTML-Formular ohne Verwendung von Tabellen?

Ich weiß, dass es schlecht ist, HTML-Tabellen für alles zu verwenden ... und dass Tabellen nur zur Darstellung tabellarischer Daten und nicht zur Erreichung eines bestimmten Stilziels verwendet werden sollten.

Meine Frage ist, wie man HTML-Formulare mit CSS erstellt, damit sie gut aussehen und wie bei der Verwendung von Tabellen ausgerichtet sind.

23
Pablo Fernandez

Nick Rigby schrieb einen ausgezeichneten Artikel für A List Apart mit dem Titel Prettier Accessible Forms

Verwendet Fieldset, Legende, Label. Hochsemantisch.

12
Shawn Miller

Schauen Sie sich den Code an, der in Wufoo-Formularen verwendet wird. Sie formatieren die Formulare mit uls und sehen wirklich gut aus.

http://wufoo.com/gallery/templates/

3
Todd

Sie können versuchen, das Formular so weit wie möglich zurückzuziehen und mit dem <label> und verschiedenen Formulareingabeelementen nach Bedarf auszukommen, indem Sie sich an das clear:left;-Attribut im CSS halten.

Dies würde sicherstellen, dass jede Zeile neu beginnt, ohne dass jede Zeile des Formulars mit einem zusätzlichen <div> oder <p> umbrochen oder sogar eine Liste daraus erstellt werden muss.

.formlabel{
    clear:left;
    display:block;
    float:left;
    margin:0 0 1em 0;
    padding:0 0.5em 0 0;
    text-align:right;
    width:8em;
}

.forminput{
    float:left;
    margin:0 0.5em 0.5em 0;
}

.formwarning{
    clear:left;
    float:left;
    margin:0 0.5em 1em 0;
}

Hier ist ein HTML-Beispielformular mit Beispielen für verschiedene Eingabetypen und einer zusätzlichen Validierungsnachricht, die Sie nach Bedarf ausblenden oder formatieren können:

<fieldset><legend>Details</legend>
    <label for="name" class="formlabel">Name</label>
      <input id="name" name="name" type="text" class="forminput" />
      <div class="formwarning">Validation error message</div>

    <label for="dob_year" class="formlabel">DOB</label>
      <div class="forminput">
        <input id="dob_year" name="dob_year" type="text" size="4" /> /
        <input id="dob_month" name="dob_month" type="text" size="2" /> /
        <input id="dob_day" name="dob_day" type="text" size="2" />
      </div>

    <label class="formlabel">Sex</label>
      <label for="female" class="forminput">Female</label>
        <input id="female" name="sex" type="radio" class="forminput" />
      <label for="male" class="forminput">Male</label>
        <input id="male" name="sex" type="radio" class="forminput" />

    <label for="state" class="formlabel">State</label>
      <select id="state" name="state" class="forminput">
        <option>ACT</option>
        <option>New South Wales</option>
        <option>Northern Territory</option>
        <option>Queensland</option>
        <option>South Australia</option>
        <option>Tasmania</option>
        <option>Victoria</option>
        <option>Western Australia</option>
      </select>

    <label for="deadseal" class="formlabel">Death certificate</label>
      <input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>

Im obigen Beispiel hat das DOB einen zusätzlichen <div>, der die Dinge überfüllt. Sie könnten es loswerden, wenn Sie die Schrägstriche als Teil des Pseudo-Elements :after formatieren, wo dies erforderlich ist.

In Opera 11.60, Firefox 11, Google Chrome 18 und Internet Explorer 8 ist alles in Ordnung.

3
random

HTML

<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>

CSS

form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}

Ich denke das ist genug.

0
Walkinraven

Ich würde mit dem div-Tag nachschlagen, um Daten auf einer Seite zu layouten.

Tabellen sind für tabellarische Daten immer noch sehr nützlich, aber für das Layout einer Seite ist sie verpönt.

Quelltext hier auf stackoverflow.com anzeigen, es gibt wahrscheinlich einige gute Beispiele.

0
Doug T.

Denken Sie darüber nach, Feldnamen über dem Feld zu platzieren, anstatt daneben. Ich finde das funktioniert am besten.

0
Cory Dee