wake-up-neo.com

Wie lassen sich <label> und <input> in derselben Zeile in einem HTML-Formular anzeigen?

Ich erstelle ein Anmeldeformular für eine Website. Ich möchte, dass jedes Label und das entsprechende Eingabeelement in derselben Zeile angezeigt werden. 

Hier ist mein Code:

HTML

<div id="form">

 <form action="" method="post" name="registration" class="register">

  <fieldset>

   <label for="Student"> Name: </label>
   <input name="Student" />
   <label for="Matric_no"> Matric number: </label>
   <input name="Matric_no" />
   <label for="Email"> Email: </label>
   <input name="Email" />
   <label for="Username"> Username: </label>
   <input name="Username" />
   <label for="Password"> Password: </label>
   <input name="Password" type="password" />

   <input name="regbutton" type="button" class="button" value="Register" />
  </fieldset>

 </form>
</div> 

CSS

#form {
 background-color: #FFF;
 height: 600px;
 width: 600px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 padding: 0px;
}

label {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 18px;
 color: #333;
 height: 20px;
 width: 200px;
 margin-top: 10px;
 margin-left: 10px;
 text-align: right;
 clear: both;
}

input {
 height: 20px;
 width: 300px;
 border: 1px solid #000;
 margin-top: 10px;
 float: left;
}
61
luchxo

Vorausgesetzt, Sie möchten die Elemente schweben, müssen Sie auch die label-Elemente schweben.

So etwas würde funktionieren:

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
    float: left;
}
input[type=button] {
    float:none;
}
<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <label for="Student">Name:</label>
            <input name="Student" id="Student" />
            <label for="Matric_no">Matric number:</label>
            <input name="Matric_no" id="Matric_no" />
            <label for="Email">Email:</label>
            <input name="Email" id="Email" />
            <label for="Username">Username:</label>
            <input name="Username" id="Username" />
            <label for="Password">Password:</label>
            <input name="Password" id="Password" type="password" />
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

Alternativ wäre es ein üblicherer Ansatz, die input/label Elemente in Gruppen einzuhüllen:

<div class="form-group">
    <label for="Student">Name:</label>
    <input name="Student" id="Student" />
</div>

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    margin-right:15px;
    float:left;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
}
<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <div class="form-group">
                <label for="Student">Name:</label>
                <input name="Student" id="Student" />
            </div>
            <div class="form-group">
                <label for="Matric_no">Matric number:</label>
                <input name="Matric_no" id="Matric_no" />
            </div>
            <div class="form-group">
                <label for="Email">Email:</label>
                <input name="Email" id="Email" />
            </div>
            <div class="form-group">
                <label for="Username">Username:</label>
                <input name="Username" id="Username" />
            </div>
            <div class="form-group">
                <label for="Password">Password:</label>
                <input name="Password" id="Password" type="password" />
            </div>
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

Beachten Sie, dass das Attribut for der id eines beschriftbaren Elements entsprechen sollte, nicht dessen name. Dadurch können Benutzer auf die Variable label klicken, um den Fokus auf das entsprechende Formularelement zu legen.

52
Josh Crozier

aaa ## HTML Ich würde vorschlagen, dass Sie sie in ein div einpacken, da Sie sie wahrscheinlich in bestimmten Zusammenhängen schweben lassen. 

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</div>


CSS

Innerhalb dieses Div können Sie jedes Stück inline-block so erstellen, dass Sie es mit vertical-align zentrieren können - oder eine Grundlinie festlegen usw. (Ihre Beschriftungen und Eingaben ändern möglicherweise die Größe in der Zukunft ...

.input-w label, .input-w input {
    float: none; /* if you had floats before? otherwise inline-block will behave differently */
    display: inline-block;
    vertical-align: middle;    
}

jsFiddle

UPDATE: Mitte 2016 + mit Mobile-First-Medienanfragen und Flex-Box

So mache ich heutzutage Dinge.

HTML

<label class='input-w' for='this-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>

<label class='input-w' for='this-other-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>


SCSS

html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
  box-sizing: border-box;
  *, *:before, *:after {
    box-sizing: inherit;
  }
} // if you don't already reset your box-model, read about it

.input-w {
  display: block;
  width: 100%; // should be contained by a form or something
  margin-bottom: 1rem;
  @media (min-width: 500px) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .label, .input {
    display: block;
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    @media (min-width: 500px) {
      width: auto;
      display: flex;
    }
  }
  .label {
    font-size: 13px;
    @media (min-width: 500px) {
      /* margin-right: 1rem; */
      min-width: 100px; // maybe to match many?
    }
  }
  .input {
    padding: .5rem;
    font-size: 16px;
    @media (min-width: 500px) {
      flex-grow: 1;
      max-width: 450px; // arbitrary
    }
  }
}

jsFiddle

14
sheriffderek

Ich fand, dass "display:flex" style eine gute Möglichkeit ist, diese Elemente in derselben Zeile zu machen. Egal welches Element im div. Insbesondere wenn die Eingabeklasse form-control ist, funktionieren andere Lösungen wie bootstrap und inline-block nicht gut.

Beispiel:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
    <label for="Student">Name:</label>
    <input name="Student" />
</div>

Weitere Details zum Display: flex:

Flexrichtung: Reihe, Spalte

Inhalt rechtfertigen: Flex-End, Mitte, Zwischenraum, Zwischenraum

Ausrichtungsartikel: Stretch, Flex-Start, Flex-End, Mitte

Was Sie vermisst haben, war der Schwimmer: links; Hier ist ein Beispiel, das gerade in HTML gemacht wurde

<div id="form">
<form action="" method="post" name="registration" class="register">
    <fieldset>
        <label for="Student" style="float: left">Name:</label>
        <input name="Student" />
        <label for="Matric_no" style="float: left">Matric number:</label>
        <input name="Matric_no" />
        <label for="Email" style="float: left">Email:</label>
        <input name="Email" />
        <label for="Username" style="float: left">Username:</label>
        <input name="Username" />
        <label for="Password" style="float: left">Password:</label>
        <input name="Password" type="password" />
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
</form>

Der effizientere Weg, dies zu tun, besteht darin, den Labels eine Klasse hinzuzufügen und den Float-Wert festzulegen: left; zur Klasse in CSS

4
Provision

Abgesehen von der Verwendung von Floats können Sie, wie von anderen vorgeschlagen, auch auf ein Framework wie Bootstrap setzen, in dem Sie die Klasse "horizontal-form" verwenden können, um das Label und die Eingabe in derselben Zeile anzuzeigen. 

Wenn Sie mit Bootstrap nicht vertraut sind, müssen Sie Folgendes hinzufügen:

  • der Link zum Bootstrap CSS(der oberste Link, wo es <- Zuletzt kompiliertes und vermindertes CSS ->), im Kopf, sowie einige divs gibt: 
  • div class = "form-group"
  • div class = "col -..." 
  • zusammen mit class = "col-sm-2 control-label" in jedem Label, wie Bootstrap zeigt, das ich unten aufgeführt habe.
  • Ich habe auch Ihren Button neu formatiert, damit er Bootstrap-kompatibel ist.
  • und fügte eine Legende zu Ihrem Formularfeld hinzu, da Sie ein Feldset verwendet haben.

Es ist sehr einfach und Sie müssen sich nicht mit Floats oder einer Menge CSS für die Formatierung herumschlagen, wie Sie oben aufgeführt haben.

  <div id="form">
    <div class="row">
      <form action="" method="post" name="registration" class="register form-horizontal">
        <fieldset>
        <legend>Address Form</legend>

      <div class="form-group">
        <label for="Student" class="col-sm-2 control-label">Name:</label>
          <div class="col-sm-6">
            <input name="Student" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
          <div class="col-sm-6">
            <input name="Matric_no" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">Email: </label>
          <div class="col-sm-6">
            <input name="Email" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Username" class="col-sm-2 control-label">Username: </label>
          <div class="col-sm-6">
            <input name="Username" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">Password: </label>
          <div class="col-sm-6">
            <input name="Password" type="password" class="form-control">
          </div>
      </div>

      <div>
        <button class="btn btn-info" name="regbutton" value="Register">Submit</button>
      </div>

      </fieldset>
    </form>
    </div>
  </div>
</div>

3
Padawan

Wickeln Sie das Label und die Eingabe in ein Bootstraps-div 

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>
1
Jay Wright

Für Bootstrap 4 kann dies mit class="form-group" style="display: flex" erfolgen. 

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>
1
GKislin

Ich habe dies auf verschiedene Arten getan, aber die einzige Möglichkeit, die gefunden wurde, die Beschriftungen und die entsprechenden Text-/Eingabedaten in derselben Zeile zu halten und immer perfekt auf die Breite des übergeordneten Elements zu wickeln, ist die Verwendung von display: Inline-Tabelle.

CSS

.container {
  display: inline-table;
  padding-right: 14px;
  margin-top:5px;
  margin-bottom:5px;
}
.fieldName {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4px;
}
.data {
  display: table-cell;
}

HTML

<div class='container'>
    <div class='fieldName'>
        <label>Student</label>
    </div>
    <div class='data'>
        <input name="Student" />
    </div>
</div>
<div class='container'>
    <div class='fieldName'>
        <label>Email</label>
    </div>
    <div class='data'>
      <input name="Email" />
    </div>
</div>
0
Tom Berthold

Ich verwende Angular 6 mit Bootstrap 4 und finde, dass dieser Weg funktioniert:

<div class="form-group row">
    <div class="col-md-2">
        <label for="currentPassword">Current Password:</label>
    </div>
    <div class="col-md-6">
        <input type="password" id="currentPassword">
    </div>
</div>
0
W Kenny

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    margin-right:15px;
    float:left;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
}
<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <div class="form-group">
                <label for="Student">Name:</label>
                <input name="Student" />
            </div>
            <div class="form-group">
                <label for="Matric_no">Matric number:</label>
                <input name="Matric_no" />
            </div>
            <div class="form-group">
                <label for="Email">Email:</label>
                <input name="Email" />
            </div>
            <div class="form-group">
                <label for="Username">Username:</label>
                <input name="Username" />
            </div>
            <div class="form-group">
                <label for="Password">Password:</label>
                <input name="Password" type="password" />
            </div>
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

0
user7119463