Sympatisant: Formular mit Divs statt Tabellen

Beitrag lesen

SELF-Forum

Formular mit Divs statt Tabellen

Sympatisant
– Informationen zu den Bewertungsregeln

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&ouml;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

--
"Non dura iubeantur, non prohibeantur inpura."
Beitrag melden
–
Informationen zu den Bewertungsregeln