CSS: label und Formularfeld übereinander anordnen (HTML, CSS und Javascript)

[thread]13725[/thread]

CSS: label und Formularfeld übereinander anordnen

Leser: 14

Articles: hide open all | hide show old branches

+4 replies
pktm

2009-07-12 13:25
User since
2003-08-07
2921 Artikel
BenutzerIn
Hallo!

Ich habe ein Formular mit mehreren Formularelementen, die nebeneinander aufgestellt werden sollen. Über jedem Element soll dessen Label stehen.

Wenn ich sie so definiere:
Code (html): (dl )

1 2 3 4 5

<label for="a">Text</label> <input type="text" id="a" name="a" /> <label for="b">Text2</label> <textarea id="b" name="b"></textarea>
//MODEDIT: CODE-Tags repariert

dann stehen sie nebeneinander.

ich will aber, dass die Sache wie eine Tabelle aufgebaut wird: in der Titelzeile stehen die Labels, in der Zeile darunter die Formularelemente.

Wie mache ich das?

Ich habe da schon ein bißchen gegoogelt, aber die Lösung, die ich gefunden habe, verlangte, dass man jedes Element in ein span-Tag steckte, und dazu noch um diese herum ein <p>-Tag notierte. Da kann ich dann aber auch gleich eine Tabelle nehmen, das ist leichter zu durchblicken.

Grüße, pktm
Last edited: 2009-07-12 19:57:06 +0200 (CEST)
http://www.intergastro-service.de (mein erstes CMS :) )
- +3 replies
- Linuxer
  
  2009-07-12 14:43
  
  User since
  2006-01-27
  3870 Artikel
  HausmeisterIn
  
  Warum willst Du keine Tabelle dafür benutzen?
  Wie ordnest Du die Elemente denn nebeneinander an, ohne Tabelle?
  
  1. Gedanke: ein BR-Tag zwischen "label" und "input" setzen ;o)
  2. Gedanke: label mit CSS 'display: block;' formatieren; kann allerdings das Design verändern ;o)
  
  Kannst Du vielleicht mal ein Minimalbeispiel bringen (HTML/CSS), damit man mal das komplett sehen kann? Eine Lösung, die für ein einzelnes label/input-Paar hilft, muss nicht unbedingt in diesem Fall helfen...
  Last edited: 2009-07-12 14:45:34 +0200 (CEST)
  meine Beiträge: I.d.R. alle Angaben ohne Gewähr und auf Linux abgestimmt!
  Die Sprache heisst Perl, nicht PERL. - Bitte Crossposts als solche kenntlich machen!
  - jan10001
    
    2009-07-12 16:40
    User since
    2003-08-14
    962 Artikel
    BenutzerIn
    
    2009-07-12T12:43:11 Linuxer
    1. Gedanke: ein BR-Tag zwischen "label" und "input" setzen ;o)
    2. Gedanke: label mit CSS 'display: block;' formatieren; kann allerdings das Design verändern ;o)
    
    Den BR Tag wird er so oder so brauchen.
    
    Code: (dl )
    
    1 2
    
    <label>1</label><label>2</label><br/> <input type="text" id="a" name="a" /><textarea id="b" name="b"></textarea>
    
    Wenn er wirklich auf Tabellen verzichten möchte wird er die Label mit CSS formatieren müssen und ebenso das Text Feld wie die Textbox. Sofern er für alle Elemente feste Breiten definiert sollte es mit der Anordnung gehen. Für die input und textarea würde ich jeweils eine eigene Klasse anlegen.
  - pktm
    
    2009-07-12 18:32
    User since
    2003-08-07
    2921 Artikel
    BenutzerIn
    
    Das ist es, was ich haben wollte:
    
    Code: (dl )
    
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
    
    <html> <head> <title>vertical align</title> <meta name="author" content="Gernot"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <style type="text/css"> input { margin-left:3px; } label { display: block; background-color:yellow; } .inlineBlock { display: inline-block; width: 7em; } form#myForm div { display: inline-block; width: 7em; background-color: blue; } form#myForm div#counter { display: inline-block; width: 12em; background-color: blue; } </style> </head> <body> <form name="myForm" id="myForm" action="#" method="post" > <div id="counter"> <label for="counter">Zähler:</label> <input type="text" id="counter" name="counter" maxlength="8" size="8" /> </div> <div> <label for="counter2">Zähler2:</label> <input type="text" id="counter2" name="counter2" maxlength="8" size="8" /> </div> <div> <label for="counter3">Zähler3:</label> <input type="text" id="counter3" name="counter3" maxlength="8" size="8" /> </div> </form> </body> </html>
    
    So muss ich keine <br>s einfügen. Die müsste ich dann nämlich wieder rausnehmen, wenn ich die Labels anders ausrichten möchte.
    http://www.intergastro-service.de (mein erstes CMS :) )

View all threads created 2009-07-12 13:25.