Jak sprawić, by <label> i <input> pojawiały się w tym samym wierszu w formularzu HTML?

99

Tworzę formularz rejestracyjny na stronę internetową. Chcę, aby każda etykieta i odpowiadający jej element wejściowy pojawiały się w tym samym wierszu.

Oto mój kod:

#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>
Rozwiń fragment

html css forms luchxo
źródło
Najbardziej podoba mi się, że ta odpowiedź nie dostać downvoted bo mówiłeś, że nie chcą, aby spróbować i błędów;)
Anna Klein

Odpowiedzi:

72

Zakładając, że chcesz unosić elementy, musiałbyś także je unosić label.

Coś takiego zadziałałoby:

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

Pokaż fragment kodu

Alternatywnie, bardziej powszechnym podejściem byłoby zawinięcie elementów input/ labelw grupy:

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

Pokaż fragment kodu

Zauważ, że foratrybut powinien odpowiadać idelementowi z etykietą, a nie jego name. Pozwoli to użytkownikom kliknąć, labelaby zaznaczyć odpowiedni element formularza.

Josh Crozier
źródło
1
dzięki! to jest dokładnie to, co chciałem osiągnąć. Obie metody działają dobrze dla mnie. 1 pytanie, które mam, w css, dlaczego wyrównuję tekst div formularza do środka, a następnie wyrównuję etykiety do prawej? Jeśli nie wyśrodkowuję i nie wyrównaj formularza div, czy zepsuje to mój kod?
luchxo
Dobra odpowiedź, zwłaszcza wzmianka o tym, clear: both;co pomogło w mojej sprawie.
Sirar Salih
37

Uważam, że "display:flex"styl to dobry sposób na zrobienie tych elementów w tej samej linii. Bez względu na rodzaj elementu div. Zwłaszcza jeśli klasa wejściowa steruje formularzem, inne rozwiązania, takie jak bootstrap, inline-block, nie będą działać dobrze.

Przykład:

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

Więcej szczegółów na temat wyświetlacza: flex:

flex-direction: row, column

justify-content: flex-end, center, space-between, space-around

align-items: stretch, flex-start, flex-end, center

facebook-100006652272506
źródło
nie zdawał sobie sprawy z istnienia
flexu
20

aaa ## HTML Sugerowałbym, abyś zawinął je w div, ponieważ prawdopodobnie skończysz je unoszeniem w pewnych kontekstach.

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

CSS

Następnie w ramach tego elementu div możesz utworzyć każdy element inline-block, aby można go było użyć vertical-aligndo wyśrodkowania go - lub ustawienia linii bazowej itp. (Twoje etykiety i dane wejściowe mogą zmienić rozmiary w przyszłości ...

.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

AKTUALIZACJA: połowa 2016 r. + Z zapytaniami o media skierowanymi przede wszystkim do urządzeń mobilnych i modułem elastycznym

Tak właśnie teraz robię rzeczy.

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

szeryfderek
źródło
czy muszę owinąć każdą etykietę i odpowiadający jej element innym div? lub po prostu
dołączam
Zawijam rozpiętość dla „etykiety” i danych wejściowych - w <label>elemencie teraz dni.
szeryfderek
5

Brakowało Ci pływaka: w lewo; oto przykład zrobiony właśnie w HTML

<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>

Bardziej efektywnym sposobem jest dodanie klasy do etykiet i ustawienie zmiennej zmiennoprzecinkowej: left; do klasy w CSS

Zaopatrzenie
źródło
4

Oprócz używania elementów zmiennoprzecinkowych, jak sugerowali inni, możesz również polegać na frameworku takim jak Bootstrap, w którym możesz użyć klasy „horizontal-form”, aby etykieta i wejście znajdowały się w tej samej linii.

Jeśli nie znasz Bootstrap, musisz dołączyć:

  • link do Bootstrap CSS (górny link, gdzie jest napisane <- Najnowszy skompilowany i zminimalizowany CSS ->) , w nagłówku, a także dodaj kilka elementów div:
  • div class = "form-group"
  • div class = "col -..."
  • wraz z class = "col-sm-2 control-label" w każdej etykiecie, jak pokazuje Bootstrap, które umieściłem poniżej.
  • Sformatowałem też Twój przycisk, aby był zgodny z Bootstrap.
  • i dodałem legendę do twojego pola formularza, ponieważ używałeś zestawu pól.

Jest to bardzo proste i nie musisz bawić się pływakami ani mnóstwem CSS do formatowania, jak wymieniono powyżej.

  <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
źródło
3

W przypadku Bootstrap 4 można to zrobić class="form-group" style="display: flex" 

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>
Grigorij Kislin
źródło
3

Używam Angular 6 z Bootstrap 4 i stwierdziłem, że działa:

<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
źródło
1
Proste i skuteczne.
caram
2

Zrobiłem to na kilka różnych sposobów, ale jedynym sposobem, jaki znalazłem, który utrzymuje etykiety i odpowiadające im dane tekstowe / wejściowe w tej samej linii i zawsze idealnie dopasowuje się do szerokości rodzica, jest użycie tabeli 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
źródło
Ze wszystkich powyższych odpowiedzi, użycie display: inline-table, jak sugerowałeś, działało dla mnie, bez konieczności zawijania mojej etykiety i pola wprowadzania w div.
coder101
2

Owiń etykietę i dane wejściowe w module div bootstraps 

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>
Jay Wright
źródło
2

To działa dobrze, umieszcza przycisk radiowy lub pole wyboru z etykietą w tej samej linii bez żadnego css. <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

Karan Goyal
źródło
1

Pokaż fragment kodu

user7119463
źródło
-2

Inną opcją jest umieszczenie tabeli wewnątrz formularza. (patrz poniżej) Wiem, że niektórzy ludzie źle patrzą na tabele, ale myślę, że działają dobrze, jeśli chodzi o responsywne układy formularzy.

<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>
mat711
źródło
2
Tabel nie należy używać do tworzenia układu.
Michał Perłakowski
2
1) Wszystkie czapki mnie boli. 2) Tabele, jak powiedział @Gothdo, nie powinny być używane w układzie, powinny być używane tylko w danych tabelarycznych goo.gl/V9dRtp
Padawan