HTML फॉर्म पर एक ही लाइन पर <लेबल> और <इनपुट> कैसे दिखाई देते हैं?

Question

मैं एक वेबसाइट के लिए एक पंजीकरण फॉर्म बना रहा हूं। मैं चाहता हूं कि प्रत्येक लेबल और उसके संबंधित इनपुट तत्व एक ही पंक्ति में दिखाई दें।

यहाँ मेरा कोड है:

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

Comments

मुझे सबसे ज्यादा पसंद है कि यह जवाब नहीं मिला क्योंकि आपने कहा था कि आप कोशिश और त्रुटि नहीं करना चाहते;)

— अन्ना क्लेन

Answer 1

मान लें कि आप तत्वों को तैरना चाहते हैं, तो आपको तत्वों को भी तैराना होगा 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 एक लेबल करने योग्य तत्व के अनुरूप होनी चाहिए , न कि इसकी name। यह उपयोगकर्ताओं को labelसंबंधित प्रपत्र तत्व पर ध्यान देने के लिए क्लिक करने की अनुमति देगा ।

Comments

धन्यवाद! यह वही है जो मैं हासिल करना चाहता था। मेरे लिए दोनों तरीके अच्छे हैं। 1 प्रश्न मेरे पास है, सीएसएस में, मैं फॉर्म डिव के पाठ को केंद्र में संरेखित करता हूं और फिर लेबल को दाएं संरेखित करता हूं? अगर मैं फॉर्म डिव को संरेखित नहीं करता हूं, तो क्या यह मेरे कोड को गड़बड़ करता है?

— लुचक्सो

अच्छा जवाब, विशेष रूप से उल्लेख clear: both;ने मेरे मामले में मदद की।

— सिरार सालिह

Answer 2

मैंने पाया "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>

प्रदर्शन के बारे में अधिक विस्तार: फ्लेक्स:

फ्लेक्स-दिशा: पंक्ति, स्तंभ

औचित्य-सामग्री: फ्लेक्स-एंड, सेंटर, स्पेस-बीच, स्पेस-अराउंड

संरेखित-आइटम: खिंचाव, फ्लेक्स-स्टार्ट, फ्लेक्स-एंड, सेंटर

Comments

फ्लेक्स की मौजूदगी के बारे में पता नहीं था

— एस्पिरर मुरहाबी

Answer 3

आआ ## HTML मैं आपको एक डिव में लपेटने का सुझाव दूंगा, क्योंकि आप निश्चित रूप से उन्हें कुछ संदर्भों में तैरते हुए देखेंगे।

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

सीएसएस

फिर उस 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 + मोबाइल-पहले मीडिया प्रश्नों और फ्लेक्स-बॉक्स के साथ

इन दिनों मैं यही करता हूं।

एचटीएमएल

<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

Comments

क्या मुझे प्रत्येक लेबल और उसके संबंधित तत्व को एक अलग div में लपेटना है? या मैं सिर्फ इस एक div में सभी लेबल शामिल

— luchxo

मैं 'लेबल' और इनपुट के लिए एक स्पैन लपेटता हूं - <label>तत्व में अब एक दिन।

— शेरिफडेरेक

Answer 4

तुम जो याद कर रहे थे वह तैर रहा था: छोड़ दिया; यहाँ एक उदाहरण है जो सिर्फ 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>

ऐसा करने का अधिक कुशल तरीका लेबल में एक वर्ग जोड़ना और फ्लोट सेट करना है: बाएं; सीएसएस में कक्षा के लिए

Answer 5

फ्लोट्स का उपयोग करने के अलावा, जैसा कि अन्य ने सुझाव दिया है, आप बूटस्ट्रैप जैसे ढांचे पर भी भरोसा कर सकते हैं, जहाँ आप उसी लाइन पर लेबल और इनपुट के लिए "क्षैतिज-रूप" वर्ग का उपयोग कर सकते हैं।

यदि आप बूटस्ट्रैप से अपरिचित हैं, तो आपको शामिल करने की आवश्यकता होगी:

• बूटस्ट्रैप सीएसएस के लिए लिंक (शीर्ष लिंक जहां यह कहता है <- नवीनतम संकलित और छोटा सीएसएस ->) , सिर में, साथ ही साथ कुछ divs जोड़ें:
• div class = "फ़ॉर्म-समूह"
• div class = "col -..."
• के साथ-साथ वर्ग = "कॉल-SM-2 नियंत्रण लेबल" प्रत्येक लेबल में, बूटस्ट्रैप शो, जो मैं नीचे शामिल किया गया है।
• मैंने आपके बटन को भी सुधार दिया है ताकि यह बूटस्ट्रैप अनुरूप हो।
• और एक किंवदंती जोड़ी, अपने फॉर्म बॉक्स में, जब से आप एक फ़ील्डसेट का उपयोग कर रहे थे।

यह बहुत सीधा है और आपको ऊपर सूचीबद्ध किए गए स्वरूपण के लिए फ़्लोट्स या सीएसएस की एक टन के साथ गड़बड़ नहीं करनी होगी।

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

Answer 6

बूटस्ट्रैप 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>

Answer 7

मैं बूटस्ट्रैप 4 के साथ कोणीय 6 का उपयोग कर रहा हूं और इस तरह से काम करता हूं:

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

Comments

सरल और प्रभावी।

— कैरम

Answer 8

मैंने इसे कई अलग-अलग तरीकों से किया है, लेकिन एकमात्र तरीका जो मैंने पाया है कि लेबल और संबंधित टेक्स्ट / इनपुट डेटा को एक ही लाइन पर रखता है और हमेशा पैरेंट की चौड़ाई के लिए पूरी तरह से लपेटता है, डिस्प्ले का उपयोग करना है: इनलाइन टेबल।

सीएसएस

.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;
}

एचटीएमएल

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

Comments

ऊपर दिए गए सभी उत्तरों में से, डिस्प्ले का उपयोग करना: इनलाइन-टेबल जैसा कि आपने सुझाव दिया था कि मेरे लिए काम किया है, बिना मेरे लेबल और इनपुट बॉक्स को एक div में लपेटे बिना।

— कोडर101

Answer 9

बूटस्ट्रैप div के भीतर लेबल और इनपुट लपेटें

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

Answer 10

यह बात अच्छी तरह से काम करती है। यह बिना किसी सीएसएस के एक ही लाइन में लेबल के साथ रेडियो बटन या चेकबॉक्स लगाती है। <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

Answer 11

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

Answer 12

एक अन्य विकल्प फॉर्म के अंदर एक टेबल रखना है। (नीचे देखें) मुझे पता है कि टेबल कुछ लोगों द्वारा फैंकी जाती हैं, लेकिन मुझे लगता है कि जब वे उत्तरदायी रूप में होते हैं तो वे अच्छी तरह से काम करते हैं।

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

Comments

टेबल्स का उपयोग लेआउट के लिए नहीं किया जाना चाहिए।

— मिशैल पेरोलाकोव्स्की

1) सभी टोपियां मुझे दर्द देती हैं। 2) टेबल्स, जैसा कि @ गोथो ने कहा, का उपयोग लेआउट में नहीं किया जाना चाहिए, इसका उपयोग केवल सारणीबद्ध डेटा में किया जाना चाहिए। go

— Padawan