Wie kann ich in html bei einem Formular die Eingabefelder genau untereinander anzeigen lassen?

3 Antworten

Niklas
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
25.04.2020, 12:36

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. :)
Woher ich das weiß:Studium / Ausbildung
Destranix
25.04.2020, 12:08

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.
Hendiplayer 
Beitragsersteller
 25.04.2020, 12:21

und wenn ich vorher z.B. noch Vorname und Nachname schreibe dann sind die Eingabefelder nicht mehr untereinander, wie bekomme ich das hin?

Destranix  25.04.2020, 12:22
@Hendiplayer

Das dürfte etwas komplizierter sein. Da muss ich kurz schauen, wie man das am Besten macht.

Destranix  25.04.2020, 12:36
@Hendiplayer

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>