<label>と<input>をHTMLフォームの同じ行に表示するにはどうすればよいですか？

94

ウェブサイトの登録フォームを作成しています。各ラベルとそれに対応する入力要素を同じ行に表示したいと思います。

これが私のコードです：

#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>
スニペットを展開

html  css  forms 
— luchxo
ソース
試行錯誤したくないと言ったので、この回答が却下されなかったことが最も気に入っています;）
— Anna Klein

回答:

72

要素をフロートさせたい場合は、label要素もフロートする必要があります。

このようなものが機能します：

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

コードスニペットを表示する

あるいは、より一般的なアプローチは、input/label要素をグループでラップすることです。

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

コードスニペットを表示する

for属性はid、そのではなく、ラベル付け可能な要素のに対応する必要があることに注意してくださいname。これにより、ユーザーはをクリックしlabelて、対応するフォーム要素にフォーカスを合わせることができます。

— Josh Crozier
ソース
1
ありがとう！これはまさに私が達成したかったことです。どちらの方法も私にはうまくいきます。1つの質問がありますが、cssで、フォームdivのテキストを中央に揃えてから、ラベルを右揃えにするのはなぜですか？フォームdivを中央揃えにしないと、コードが台無しになりますか？
— luchxo 2014年
良い答え、特にその言及がclear: both;私の場合に役立ちました。
— Sirar Salih 2015
33

"display:flex"これらの要素を同じ行に配置するには、スタイルが良い方法であることがわかりました。div内の要素の種類に関係なく。特に入力クラスがフォーム制御の場合、ブートストラップ、インラインブロックなどの他のソリューションはうまく機能しません。

例：

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

display：flexの詳細：

フレックス方向：行、列

justify-content：flex-end、center、space-between、space-around

整列アイテム：ストレッチ、フレックススタート、フレックスエンド、センター

— facebook-100006652272506
ソース
フレックスの存在に気づいていなかった
— エスポワールムルハバジ2018年
18

aaa ## HTML特定のコンテキストでフローティングになる可能性があるため、divでラップすることをお勧めします。

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

CSS

次に、そのdiv内で、各ピースを作成して、それらを中央に配置したり、ベースラインなどを設定したりinline-blockできますvertical-align（ラベルと入力は将来サイズが変更される可能性があります...

.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

更新：2016年半ば+モバイルファーストのメディアクエリとフレックスボックス

これが私が最近物事をする方法です。

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

— シェリフデレク
ソース
各ラベルとそれに対応する要素を異なるdivでラップする必要がありますか？または、この1つのdivにすべてのラベルを含めるだけです
— luchxo 2014年
'label'と入力のスパンを<label>要素にラップします。
— sheriffderek 2015年
5

あなたが欠けていたのはフロートでした：左; これは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>

これを行うためのより効率的な方法は、ラベルにクラスを追加し、floatを設定することです。CSSのクラスに

— プロビジョニング
ソース
4

他の人が示唆しているように、floatを使用する以外に、「horizo​​ntal-form」クラスを使用してラベルと入力を同じ行に含めることができるBootstrapなどのフレームワークを利用することもできます。

Bootstrapに慣れていない場合は、以下を含める必要があります。

  • ブートストラップCSS へのリンク（<-最新のコンパイルおよび縮小されたCSS->と表示されているトップリンク）、およびいくつかのdivを追加します。
  • div class = "form-group"
  • div class = "col -..."
  • 一緒にクラス=「COL-SM-2コントロールラベル」 Iは以下に含まブートストラップ示すように、各ラベルに、、。
  • また、Bootstrapに準拠するように、ボタンを再フォーマットしました。
  • フィールドセットを使用していたため、フォームボックスに凡例を追加しました。

これは非常に簡単で、上記のように、フォーマットのためにフロートや大量のCSSをいじる必要はありません。

  <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

Bootstrap 4の場合、次の方法で実行できます。 class="form-group" style="display: flex" 

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>
— グリゴリー・キスリン
ソース
3

Bootstrap4でAngular6を使用していますが、次のように機能します。

<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ケニー
ソース
1
シンプルで効果的。
— キャラム
2

私はこれをいくつかの異なる方法で行いましたが、ラベルと対応するテキスト/入力データを同じ行に保持し、常に親の幅に完全に折り返す唯一の方法は、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>
— トム・バートホールド
ソース
上記のすべての回答の中で、あなたが提案したdisplay：inline-tableを使用すると、ラベルと入力ボックスをdivでラップする必要がなく、うまくいきました。
— coder101
2

ラベルと入力をブートストラップdiv内でラップします 

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>
— ジェイライト
ソース
2

これはうまく機能します。cssなしで同じ行にラベル付きのラジオボタンまたはチェックボックスを配置します。 <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

— カラン・ゴエル
ソース
1

コードスニペットを表示する

— user7119463
ソース
-2

別のオプションは、フォーム内にテーブルを配置することです。（以下を参照）テーブルが一部の人々に嫌われていることは知っていますが、レスポンシブフォームレイアウトに関してはうまく機能すると思います。

<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>
— checkmate711
ソース
2
テーブルをレイアウトに使用しないでください。
— のMichałPerłakowski
2
1）すべてのキャップは私を傷つけます。2）表、@Gothdoが言ったように、レイアウトで使用すべきではない、それだけで表形式のデータに使用されるべきであるgoo.gl/V9dRtp
— パダワン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.