Wie können <label> und <input> in einem HTML-Formular in derselben Zeile angezeigt werden?

89

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

Hier ist mein Code:

#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;
}
<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>
Erweitern Sie das Snippet

html css forms Luchxo
quelle
Ich mag es am meisten, dass diese Antwort nicht abgelehnt wurde, weil Sie sagten, Sie wollen nicht versuchen, Fehler zu machen;)
MichaelB

Antworten:

70

Vorausgesetzt , dass Sie die Elemente schweben wollen, würden Sie auch die Schwimmer müssen labelElemente zu.

So etwas würde funktionieren:

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

Code-Snippet anzeigen

Alternativ wäre ein üblicherer Ansatz, die input/ labelElemente in Gruppen zu verpacken :

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

Code-Snippet anzeigen

Beachten Sie, dass das forAttribut dem ideines beschriftbaren Elements entsprechen sollte, nicht seinem name. Auf diese Weise können Benutzer auf klicken label, um das entsprechende Formularelement zu fokussieren.

Josh Crozier
quelle
1
Vielen Dank! Genau das wollte ich erreichen. Beide Methoden funktionieren gut für mich. 1 Frage, die ich in der CSS habe, warum richte ich den Text des Formulars div auf Mitte und dann rechts auf die Beschriftungen aus? Wenn ich das Formular div nicht zentriere, bringt es meinen Code durcheinander?
Luchxo
Gute Antwort, besonders die Erwähnung, clear: both;die meinem Fall geholfen hat.
Sirar Salih
31

Ich fand, dass "display:flex"Stil ein guter Weg ist, um diese Elemente in derselben Linie zu machen. Egal was für ein Element in der Div. Insbesondere wenn die Eingabeklasse Formularkontrolle 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 zur Anzeige: flex:

Flex-Richtung: Zeile, Spalte

Inhalt rechtfertigen: Flex-End, Center, Space-Between, Space-Around

Ausrichtungselemente: Dehnen, Flex-Start, Flex-Ende, Mitte

facebook-100006652272506
quelle
wusste nicht, dass es Flex gibt
Espoir Murhabazi
17

aaa ## HTML Ich würde vorschlagen, dass Sie sie in ein div einschließen, da Sie sie wahrscheinlich in bestimmten Kontexten schweben lassen werden.

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

CSS

Dann können Sie innerhalb dieses Divs jedes Stück inline-blockso gestalten, dass Sie vertical-alignes zentrieren können - oder die Grundlinie usw. festlegen (Ihre Beschriftungen und Eingaben können in Zukunft die Größe ändern ...

.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-Medienabfragen und Flex-Box

So mache ich es heutzutage.

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

Sheriffderek
quelle
Muss ich jedes Etikett und sein entsprechendes Element in ein anderes Div einwickeln? oder ich schließe einfach alle Etiketten in diese ein div
luchxo
Ich wickle eine Spanne für das 'Label' und eine Eingabe ein - in das <label>Element jetzt ein paar Tage.
Sheriffderek
5

Was Sie vermisst haben, war der Schwimmer: links; Hier ist ein Beispiel, das gerade im HTML erstellt 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 Beschriftungen eine Klasse hinzuzufügen und den Float festzulegen: left; zur Klasse in CSS

Bereitstellung
quelle
4

Abgesehen von der Verwendung von Floats, wie andere vorgeschlagen haben, können Sie sich auch auf ein Framework wie Bootstrap verlassen, in dem Sie die Klasse "Horizontalform" verwenden können, um die Bezeichnung und die Eingabe in derselben Zeile zu haben.

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

  • der Link zum Bootstrap-CSS (der oberste Link, auf dem <- Neueste kompilierte und minimierte CSS -> steht) im Kopf sowie einige Divs:
  • div class = "Formulargruppe"
  • div class = "col -..."
  • zusammen mit class = "col-sm-2 control-label" in jedem Label, wie Bootstrap zeigt, was ich unten aufgenommen habe.
  • Ich habe Ihre Schaltfläche auch neu formatiert, damit sie Bootstrap-kompatibel ist.
  • und fügte Ihrem Formularfeld eine Legende hinzu, da Sie ein Feldset verwendet haben.

Es ist sehr einfach und Sie müssten 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>

Padawan
quelle
3

Für Bootstrap 4 könnte dies getan werden class="form-group" style="display: flex" 

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>
Grigory Kislin
quelle
3

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>
W Kenny
quelle
Einfach und effektiv.
Karam
2

Ich habe dies auf verschiedene Arten getan, aber die einzige Möglichkeit, die ich gefunden habe, um die Beschriftungen und die entsprechenden Text- / Eingabedaten in derselben Zeile zu halten und immer perfekt auf die Breite des übergeordneten Elements umzureißen, ist die Verwendung der Tabelle display: inline.

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>
Tom Berthold
quelle
Von allen obigen Antworten hat die Verwendung von display: inline-table, wie Sie vorgeschlagen haben, für mich funktioniert, ohne dass ich meine Beschriftung und mein Eingabefeld in ein div einschließen muss.
coder101
2

Wickeln Sie das Etikett 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>
Jay Wright
quelle
2

Dieses Ding funktioniert gut. Es setzt Optionsfeld oder Kontrollkästchen mit Beschriftung in derselben Zeile ohne CSS. <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

Karan Goyal
quelle
1

Code-Snippet anzeigen

user7119463
quelle
-3

Eine andere Möglichkeit besteht darin, eine Tabelle in das Formular einzufügen. (siehe unten) Ich weiß, dass Tabellen von einigen Leuten missbilligt werden, aber ich denke, dass sie gut funktionieren, wenn es um reaktionsschnelle Formularlayouts geht.

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
  <TR>
    <TD>Your name</TD>
    <TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    </TD>
  </TR>
  <TR>
    <TD>Your E-mail address</TD>
    <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>
Schachmatt711
quelle
2
Tabellen sollten nicht für das Layout verwendet werden.
Michał Perłakowski
2
1) Alle Kappen tun mir weh. 2) Tabellen sollten, wie @Gothdo sagte, nicht im Layout verwendet werden, sondern nur in Tabellendaten goo.gl/V9dRtp
Padawan