Wie kann ich in HTML ein Formular in 2 Spalten Teilen?
Ich habe gerade ein etwas größeres Formular mit HTML erstellt und will dieses nun in 2 hälften/Spalten teilen. Eine hälfte auf der rechte Seite die andere links daneben. Danke im Voraus!
2 Antworten
Falls du das Formular auch responsiv brauchst, lass die Finger von Tabellen...
Du kannst einfach zwei DIVs mit jeweils 50% Breite und nach links gefloated benutzen. Fuer Smartphones setzt du ein @media query ins CSS wo die DIVs unter 768px 100% breit werden.
Du kannst das Formular auch in <UL> und Listenpunkte unterteilen und diese mit webkit column count: 2 automatisch ab einer gewissen Displaybreite mit @media query in zwei Spalten teilen. Das ist praktisch wenn das Formular oefters geaendert wird und du nicht genau weisst wo de Mitte gerade ist.
Stichwort mehrspaltiges Layout. Dafür verwendest du entweder Flexbox oder einfach float. Letzteres ist für gewöhnlich nicht mehr im Einsatz. Könnte in etwa so aussehen:
HTML
<form>
<div class="row">
<div class="left">
<label>Label</label> <input type="text" name="inputOne"> </div>
</div>
<div class="row">
<div class="left">
<label>Label</label>
<input type="text" name="inputTwo"> </div>
</div>
<div class="row">
<div class="left">
<label>Label</label>
<input type="text" name="inputThree">
</div>
</div>
<div class="row">
<div class="left">
<label>Label</label>
<input type="text" name="inputFour">
</div>
</div>
</form>
CSS
.row {
display: block; max-width: 1000px; //beliebiger Wert
overflow: hidden;
}
.left {
display: inline-block;
max-width: 50%; //ergibt 500px (1/2 von 1000
float: left;
}
Tabellen würde ich dafür nicht nutzen.
LG
Savix