Formular mit CSS formatieren

[Peter]

Hallo zusammen,

ich möchte ein Formular ohne Tabellen, nur mit CSS formatieren, damit es später wie

aussieht. Natürlich ohne Rand, der dient hier nur dem Verständnis des Tabellenaufbaus. Wie müsste mit CSS der Code dazu aussehen?

Besten Dank,
Peter

[Christoph Schnauß]

hi,

ich möchte ein Formular ohne Tabellen, nur mit CSS formatieren, damit es später wie

aussieht.

Klasse. Das ist exakt das, wozu immer wieder Tabellen eingesetzt werden  -  und meines Erachtens auch nützlich und mindestens duldbar sind.

Wie müsste mit CSS der Code dazu aussehen?

Was erwartest du jetzt als Antwort? Du kannst natürlich jedes <input> mit CSS positionieren. Tatsächlich ist eine Tabelle hier nicht zwingend nötig  -  allerdings bin ich der Ansicht, daß bei Formularen dieser Art eine Tabelle höcht nützliche Dienste leisten kann.

Zum Prinzip: du hast möglicherweise mitbekommen, daß das Forum immer sehr eifrig darauf bedacht ist, anzumerken, daß Tabellen doch bitte für tabellarische Aufgaben und sonst nichts vorzusehen sind. Ich vertrete diese Ansicht gelegentlich auch  -  aber in _deinem_ Fall gibts vielleicht die berühmte Ausnahme. Es wäre darüber zu streiten, ob nicht eventuell genau das, was du angibst, zu den genuinen Aufgaben einer Tabelle gezählt werden könnte. Formulare lassen sich nun einmal immer noch am leichtesten mit einer Tabellenkonstruktion darstellen (wir stimmen allerdings hoffentlich darin überein, daß dies in gewisser Weise eine "Prinzipverletzung" darstellt  -  aber schon Bert Brecht hat in seiner lapidaren Art einmal festgestellt: "Prinzipien halten sich am Leben _durch_ ihre Verletzung").

Grüße aus Berlin

Christoph S.

[Steffen Weber]

Tag,

hi,

ich möchte ein Formular ohne Tabellen, nur mit CSS formatieren, damit es später wie

aussieht.

Klasse. Das ist exakt das, wozu immer wieder Tabellen eingesetzt werden  -  und meines Erachtens auch nützlich und mindestens duldbar sind.

[...]

Zum Prinzip: du hast möglicherweise mitbekommen, daß das Forum immer sehr eifrig darauf bedacht ist, anzumerken, daß Tabellen doch bitte für tabellarische Aufgaben und sonst nichts vorzusehen sind.

Es handelt sich ja hier sogar um Eingaben in tabellarischer Form; theoretisch kann man diese Tabelle sogar mit einem logischen Kopf versehen. (Spalte 1 - Was ist einzugeben. Spalte 2 - Ihre Angabe.)

Grüße,
Steffen.

[Uschi Renziehausen]

Moin,

es geht auch so:

/* Standard-Labelformat erhält float: left und eine fixe Breite in em */
label { float: left; width: 10em; font-size: 0.88em; font-weight: bold;}
/* Das Pendant zum Labelformat erhält einen entsprechenden margin-left */
div.floatedByLabel {  margin-left: 10em;}

Der HTML-Code dazu:
<div>
 <label  for="title">Title:<span>*</span></label>
 <div class="floatedByLabel">
 <input name="title" type="text" id="title" ... />
 </div>
</div>

Liebe Grüße, Uschi

[Peter]

Hi,

es geht auch so:

[...]

So kann man aber die input-Felder nicht 100%ig untereinander senkrecht ausrichten, oder?

[wahsaga]

hi,

So kann man aber die input-Felder nicht 100%ig untereinander senkrecht ausrichten, oder?

du hast es nicht mal ausprobiert, sondern fragst lieber einfach, oder?

gruß,
wahsaga

[Peter]

Hi,

du hast es nicht mal ausprobiert, sondern fragst lieber einfach, oder?

ja, weil ich absolut keine Ahung habe wie ich das mit CSS machen soll.

Peter

[wahsaga]

hi,

ja, weil ich absolut keine Ahung habe wie ich das mit CSS machen soll.

dann beschäftige dich mit CSS - oder lass' es.

darüber hinaus hat Uschi doch schon einen ansatz gepostet.

gruß,
wahsaga

[Peter]

Hallo,

dann beschäftige dich mit CSS - oder lass' es.

hab ich schon etwas. Aber ich möchte gerne eine vorgefertigte Lösung. Danke!

Peter

[wahsaga]

hi,

aber schon Bert Brecht hat in seiner lapidaren Art einmal festgestellt: "Prinzipien halten sich am Leben _durch_ ihre Verletzung").

Gilt das auch für deren Reiter?

gruß,
wahsaga

[Peter]

Hi,

Klasse. Das ist exakt das, wozu immer wieder Tabellen eingesetzt werden  -  und meines Erachtens auch nützlich und mindestens duldbar sind.

Sehe ich eigentlich genauso, aber hier wird (wie du ja schon sagtest) ja immer dazu angehalten CSS statt Tabellen für das Layout zu benutzen.

Dann bleibe ich bei Formularen bei Tabellen.

Folgendes Formular würde ich gerne auf meiner HP benutzen:

Der Code dazu:

<html><head><title></title><style type="text/css">  
p { font-family:Arial; font-size:9pt; padding:0; margin:0; }  
input, textarea { padding:0; border:1 solid #000; }  
</style></head><body>  
<table border="1" cellspacing="0" cellpadding="4">  
<tr>  
 <td><p>Vorname:</p></td>  
 <td><input name="vorname" type="text" size="20"></td>  
</tr>  
<tr>  
 <td><p>Nachname:</p></td>  
 <td><input name="nachname" type="text" size="20"></td>  
</tr>  
<tr>  
 <td><p>eMail:</p></td>  
 <td><input name="email" type="text" size="30"></td>  
</tr>  
<tr>  
 <td><p>Text:</p></td>  
 <td><textarea name="text" cols="30" rows="5"></textarea></td>  
</tr>  
<tr>  
 <td colspan="2">  
  <p>Wie alt sind Sie?</p>  
  <p>  
  <select name="alter" size="1">  
  <option selected>11-20</option>  
  <option>21-49</option>  
  <option>ab 49</option>  
  </select>  
  </p>  
 </td>  
</tr>  
<tr>  
 <td colspan="2">  
  <p>Sie sind?</p>  
  <p>  
  <input type="checkbox" name="sport" value="sportlich"> sportlich  
  <input type="checkbox" name="sport" value="unsportlich"> unsportlich  
  </p>  
 </td>  
</tr>  
</table>  
</body></html>

Ist es hier sinnvoll die Checkboxen und Auswahlliste auch mit in die Tabelle zu integrieren?

Danke im Voraus,
Peter