Wie kann ich in html bei einem Formular die Eingabefelder genau untereinander anzeigen lassen?
Die Eingabefelder sollen genau gleich lang und untereinander angezeigt werden.
3 Antworten
Nutze ein Grid-System, eventuell ein fertiges Toolkit, zum Beispiel Bootstrap.
HTML
<div class="row">
<div class="col">
<label>Username</label>
</div>
<div class="col">
<input type="text" name="username">
</div>
</div>
<div class="row">
<div class="col">
<label>Passwort</label>
</div>
<div class="col">
<input type="text" name="username">
</div>
</div>
<div class="row">
<div class="col">
<label>Password wiederholen</label>
</div>
<div class="col">
<input type="text" name="username">
</div>
</div>
CSS
.row {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.col {
width: 10rem;
}
Indem du flex-direction entweder auf column oder row setzt, werden die Elemente untereinander bzw. nebeneinander angezeigt.
Das ist nur ein rudimentäres Beispiel, anpassen musst du selbst. :)
Also bei mir scheint das automatisch der Fall zu sein. Siehe:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="POST" class="form">
<input type="text" class="input"/><br>
<input type="text" class="input"/>
</form>
</body>
</html>
Ich nutze Firefox.
Das dürfte etwas komplizierter sein. Da muss ich kurz schauen, wie man das am Besten macht.
Ok.
Das geht nicht ohne weiteres.
Da musst du dir selbst etwas basteln.
Ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.table_form{
font-family: sans-serif;
}
.table_entry{
display: flex;
width: 100%;
min-height: 1em;
overflow: hidden;
}
.table_entry_label{
text-align: right;
flex: 0 0 20%;
padding: 0.3em;
min-width: 9em;
}
.table_entry_input{
flex: 0 1 80%;
}
.table_form_input_field{
width: 100%;
height: 100%;
font-size: 1em;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance:textfield;
}
</style>
</head>
<body>
<form id="form1" method="POST" class="table_form">
<div class="table_entry">
<span class="table_entry_label">Test:</span>
<span class="table_entry_input">
<input type="text" class="table_form_input_field"/>
</span>
</div>
<div class="table_entry">
<span class="table_entry_label">HalloWelt:</span>
<span class="table_entry_input">
<input type="text" class="table_form_input_field"/>
</span>
</div>
</form>
</body>
</html>
Das CSS Gridsystem solltest du ja inzwischen kennen. Das lässt sich auch gut für Formulare verwenden.
https://webdesign.tutsplus.com/tutorials/how-to-build-web-form-layouts-with-css-grid--cms-28776
und wenn ich vorher z.B. noch Vorname und Nachname schreibe dann sind die Eingabefelder nicht mehr untereinander, wie bekomme ich das hin?