จะทำให้ <label> และ <input> ปรากฏในบรรทัดเดียวกันบนฟอร์ม HTML ได้อย่างไร

Question 1

ฉันกำลังสร้างแบบฟอร์มการลงทะเบียนสำหรับเว็บไซต์ ฉันต้องการให้แต่ละป้ายกำกับและองค์ประกอบอินพุตที่เกี่ยวข้องปรากฏในบรรทัดเดียวกัน

นี่คือรหัสของฉัน:

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

ขยายข้อมูลโค้ด

Question 2

สมมติว่าคุณต้องการลอยองค์ประกอบคุณก็จะต้องลอยlabelองค์ประกอบด้วยเช่นกัน

สิ่งนี้จะได้ผล:

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>

ขยายข้อมูลโค้ด

อีกวิธีหนึ่งวิธีการทั่วไปคือการรวมองค์ประกอบinput/ labelในกลุ่ม:

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

ขยายข้อมูลโค้ด

โปรดทราบว่าforแอตทริบิวต์ควรตรงกับidขององค์ประกอบ labelable nameไม่มัน ซึ่งจะช่วยให้ผู้ใช้สามารถคลิกlabelเพื่อให้โฟกัสไปที่องค์ประกอบฟอร์มที่เกี่ยวข้อง

Question 3

ฉันพบว่า"display:flex"สไตล์เป็นวิธีที่ดีในการทำให้องค์ประกอบเหล่านี้อยู่ในแนวเดียวกัน ไม่ว่าองค์ประกอบแบบใดใน div. โดยเฉพาะอย่างยิ่งถ้าคลาสอินพุตเป็นแบบฟอร์มคอนโทรลโซลูชันอื่น ๆ เช่น bootstrap, inline-block จะทำงานได้ไม่ดี

ตัวอย่าง:

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

รายละเอียดเพิ่มเติมเกี่ยวกับการแสดงผล: ดิ้น:

ทิศทางที่ยืดหยุ่น: แถวคอลัมน์

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

จัดแนวรายการ: ยืด, เริ่มดิ้น, ปลายงอ, ตรงกลาง

Question 4

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>

วทส

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

Question 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: left; ไปยังคลาสใน CSS

Question 6

นอกเหนือจากการใช้โฟลตตามที่คนอื่น ๆ แนะนำแล้วคุณยังสามารถพึ่งพาเฟรมเวิร์กเช่นBootstrapซึ่งคุณสามารถใช้คลาส "รูปแบบแนวนอน" เพื่อให้ป้ายกำกับและอินพุตอยู่ในบรรทัดเดียวกันได้

หากคุณไม่คุ้นเคยกับ Bootstrap คุณจะต้องรวม:

ลิงก์ไปยังBootstrap CSS (ลิงก์บนสุดที่ระบุว่า <- CSS ที่คอมไพล์ล่าสุดและลดขนาด ->)ในส่วนหัวและเพิ่ม div บางส่วน:
div class = "แบบฟอร์มกลุ่ม"
ระดับ Div = "col -... "
พร้อมกับclass = "col-sm-2 control-label"ในแต่ละป้ายกำกับตามที่ Bootstrap แสดงซึ่งฉันรวมไว้ด้านล่าง
ฉันยังฟอร์แมตปุ่มของคุณใหม่เพื่อให้เป็นไปตาม 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>

Question 7

สำหรับ 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>

Question 8

ฉันใช้ Angular 6 กับ Bootstrap 4 และพบว่าวิธีนี้ได้ผล:

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

Question 9

ฉันได้ทำหลายวิธีแล้ว แต่วิธีเดียวที่ฉันพบว่าจะเก็บป้ายกำกับและข้อมูลข้อความ / อินพุตที่เกี่ยวข้องไว้ในบรรทัดเดียวกันและเสมอกับความกว้างของพาเรนต์คือการใช้ display: inline table

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>

Question 10

ห่อป้ายกำกับและอินพุตภายใน bootstraps div

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

Question 11

สิ่งนี้ใช้งานได้ดีมันวางปุ่มตัวเลือกหรือช่องทำเครื่องหมายที่มีป้ายกำกับในบรรทัดเดียวกันโดยไม่มี css <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

Question 12

แสดงข้อมูลโค้ด

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

ขยายข้อมูลโค้ด

Question 13

อีกทางเลือกหนึ่งคือการวางตารางภายในแบบฟอร์ม (ดูด้านล่าง) ฉันรู้ว่าโต๊ะบางคนขมวดคิ้ว แต่ฉันคิดว่ามันทำงานได้ดีเมื่อพูดถึงเค้าโครงฟอร์มที่ตอบสนอง

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

จะทำให้ <label> และ <input> ปรากฏในบรรทัดเดียวกันบนฟอร์ม HTML ได้อย่างไร

CSS

อัปเดต: กลางปี ​​2016 ขึ้นไปพร้อมคำค้นหาสื่อสำหรับอุปกรณ์เคลื่อนที่และกล่องแบบยืดหยุ่น

HTML

วทส

อัปเดต: กลางปี 2016 ขึ้นไปพร้อมคำค้นหาสื่อสำหรับอุปกรณ์เคลื่อนที่และกล่องแบบยืดหยุ่น