Bagaimana cara membuat <label> dan <input> muncul di baris yang sama pada formulir HTML?

94

Saya membuat formulir pendaftaran untuk situs web. Saya ingin setiap label dan elemen input yang sesuai muncul di baris yang sama.

Ini kode saya:

#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>
Luaskan cuplikan

html css forms luchxo
sumber
Saya paling suka bahwa jawaban ini tidak diturunkan suara karena Anda mengatakan Anda tidak ingin mencoba dan salah;)
Anna Klein

Jawaban:

72

Dengan asumsi Anda ingin mengapung elemen, Anda juga harus mengapung labelelemen juga.

Sesuatu seperti ini akan berhasil:

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

Tampilkan cuplikan kode

Alternatifnya, pendekatan yang lebih umum adalah membungkus input/ labelelemen dalam kelompok:

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

Tampilkan cuplikan kode

Perhatikan bahwa foratribut harus sesuai dengan idelemen yang dapat diberi label, bukan miliknya name. Ini akan memungkinkan pengguna untuk mengklik labeluntuk memberikan fokus ke elemen formulir yang sesuai.

Josh Crozier
sumber
1
Terima kasih! inilah yang ingin saya capai. Kedua metode bekerja dengan baik untuk saya. 1 pertanyaan yang saya miliki, di css, mengapa saya meratakan teks dari div formulir ke tengah dan kemudian meratakan label ke kanan? jika saya tidak mensejajarkan bagian tengah div formulir, apakah itu mengacaukan kode saya?
luchxo
Jawaban yang bagus, terutama penyebutan clear: both;yang membantu kasus saya.
Sirar Salih
33

Saya menemukan "display:flex"gaya adalah cara yang baik untuk membuat elemen ini dalam garis yang sama. Tidak peduli jenis elemen apa di div. Terutama jika kelas masukan adalah kontrol-formulir, solusi lain seperti bootstrap, blok-sebaris tidak akan berfungsi dengan baik.

Contoh:

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

Lebih detail tentang tampilan: flex:

flex-direction: baris, kolom

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

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

facebook-100006652272506
sumber
tidak mengetahui adanya flex
Espoir Murhabazi
18

aaa ## HTML Saya sarankan Anda membungkusnya dalam sebuah div, karena Anda kemungkinan besar akan mengapungkannya dalam konteks tertentu.

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

CSS

Kemudian di dalam div itu, Anda dapat membuat setiap bagian inline-blocksehingga Anda dapat menggunakannya vertical-alignuntuk menengahkannya - atau menetapkan garis dasar, dll. (Label dan masukan Anda mungkin berubah ukuran di masa mendatang ...

.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: pertengahan 2016 + dengan kueri media yang memprioritaskan seluler dan flex-box

Inilah cara saya melakukan sesuatu hari ini.

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
sumber
apakah saya harus membungkus setiap label dan elemen yang sesuai dalam div yang berbeda? atau saya hanya menyertakan semua label dalam div ini
luchxo
Saya membungkus rentang untuk 'label' dan masukan - dalam <label>elemen sekarang menjadi hari.
sheriffderek
5

Apa yang Anda lewatkan adalah pelampung: kiri; berikut adalah contoh yang baru saja dilakukan di 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>

Cara yang lebih efisien untuk melakukan ini adalah menambahkan kelas ke label dan menyetel float: left; ke kelas di CSS

Ketentuan
sumber
4

Selain menggunakan float, seperti yang disarankan orang lain, Anda juga dapat mengandalkan kerangka kerja seperti Bootstrap di mana Anda dapat menggunakan kelas "bentuk horizontal" untuk memiliki label dan masukan pada baris yang sama.

Jika Anda tidak terbiasa dengan Bootstrap, Anda perlu memasukkan:

  • tautan ke Bootstrap CSS (tautan teratas yang bertuliskan <- CSS terbaru yang dikompilasi dan dikecilkan ->) , di bagian kepala, serta tambahkan beberapa div:
  • div class = "form-group"
  • div class = "col -..."
  • bersama dengan class = "col-sm-2 control-label" di setiap label, seperti yang ditunjukkan Bootstrap, yang saya sertakan di bawah ini.
  • Saya juga memformat ulang tombol Anda sehingga sesuai dengan Bootstrap.
  • dan menambahkan legenda, ke kotak formulir Anda, karena Anda menggunakan kumpulan bidang.

Ini sangat mudah dan Anda tidak perlu mengacaukan float atau banyak CSS untuk pemformatan, seperti yang Anda sebutkan di atas.

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

Untuk Bootstrap 4 itu bisa dilakukan dengan 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
sumber
3

Saya menggunakan Angular 6 dengan Bootstrap 4 dan menemukan cara ini berfungsi:

<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
sumber
1
Sederhana dan efektif.
karam
2

Saya telah melakukan ini dengan beberapa cara berbeda tetapi satu-satunya cara yang saya temukan yang menjaga label dan teks / data input yang sesuai pada baris yang sama dan selalu membungkus sempurna dengan lebar induknya adalah dengan menggunakan display: tabel 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
sumber
Dari semua jawaban di atas, menggunakan display: inline-table seperti yang Anda sarankan bekerja untuk saya, tanpa harus membungkus label dan kotak input saya di div.
coder101
2

Bungkus label dan input di dalam div bootstraps 

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

Hal ini bekerja dengan baik, menempatkan tombol radio atau kotak centang dengan label di baris yang sama tanpa css. <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

Karan Goyal
sumber
1

Tampilkan cuplikan kode

pengguna7119463
sumber
-2

Pilihan lainnya adalah menempatkan tabel di dalam formulir. (lihat di bawah) Saya tahu tabel disukai oleh beberapa orang tapi saya pikir mereka bekerja dengan baik ketika datang ke tata letak formulir responsif.

<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>
skakmat711
sumber
2
Tabel tidak boleh digunakan untuk tata letak.
Michał Perłakowski tanggal
2
1) Semua huruf besar menyakiti saya. 2) Tabel, seperti yang dikatakan @Gothdo, tidak boleh digunakan dalam tata letak, sebaiknya hanya digunakan dalam data tabel goo.gl/V9dRtp
Padawan