কীভাবে <label> এবং <ইনপুট> এইচটিএমএল ফর্মের একই লাইনে প্রদর্শিত হবে?

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

ধন্যবাদ! এটাই আমি অর্জন করতে চেয়েছিলাম। দুটি পদ্ধতিই আমার পক্ষে ভাল কাজ করে। ১ টি প্রশ্ন আমার কাছে, সিএসএসে, আমি কেন ফর্ম ডিভের পাঠ্যটি কেন্দ্রে বিন্যস্ত করব এবং তারপরে লেবেলগুলি ডানদিকে সরান? যদি আমি ফর্ম ডিভটি বিন্যস্ত না করি তবে এটি কি আমার কোডটিকে বিশৃঙ্খলা করে?

— লুচক্সো

উত্তম উত্তর, বিশেষত উল্লেখটি clear: both;আমার ক্ষেত্রে সহায়তা করেছিল।

— সিরর সালিহ

Answer 2

আমি খুঁজে পেয়েছি "display:flex"শৈলী এই উপাদানগুলিকে একই লাইনে তৈরি করার একটি ভাল উপায়। ডিভের মধ্যে কোন ধরণের উপাদান নেই। বিশেষত ইনপুট ক্লাসটি ফর্ম-নিয়ন্ত্রণে থাকলে বুটস্ট্র্যাপ, ইনলাইন-ব্লকের মতো অন্যান্য সমাধানগুলি ভাল কাজ করবে না।

উদাহরণ:

<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

এএএ ## এইচটিএমএল আমি আপনাকে একটি ডিভের মধ্যে আবদ্ধ করার পরামর্শ দিচ্ছি, যেহেতু আপনি সম্ভবত কিছু নির্দিষ্ট প্রসঙ্গে তাদের ভাসিয়ে শেষ করবেন।

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</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;    
}

jsFizz

আপডেট: মোবাইল-প্রথম মিডিয়া ক্যোয়ারী এবং ফ্লেক্স-বক্স সহ ২০১ 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
    }
  }
}

jsFizz

Comments

আমি কি প্রতিটি লেবেল এবং তার সাথে সম্পর্কিত উপাদানটি আলাদা ডিভিতে গুটিয়ে রাখতে পারি? বা আমি কেবলমাত্র এই এক

— ডিভের

আমি 'লেবেল' এবং একটি ইনপুট - এর জন্য একটি স্প্যান আবদ্ধ করি - <label>উপাদানটিতে এখন একদিন।

— শেরিফডেরেক

Answer 4

আপনি যা হারিয়েছিলেন তা ভাসা: বাম; এইচটিএমএল-এ সবে করা একটি উদাহরণ এখানে

<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

অন্যরা যেমন পরামর্শ দিয়েছে, তেমন ফ্লোট ব্যবহার না করে আপনি বুটস্ট্র্যাপের মতো ফ্রেমওয়ার্কের উপরও নির্ভর করতে পারেন যেখানে আপনি একই লাইনে লেবেল এবং ইনপুট রাখতে "অনুভূমিক-ফর্ম" শ্রেণিটি ব্যবহার করতে পারেন।

আপনি যদি বুটস্ট্র্যাপের সাথে অপরিচিত হন তবে আপনাকে এটি অন্তর্ভুক্ত করতে হবে:

• লিংক বুটস্ট্র্যাপ সিএসএস (শীর্ষ লিংক এটা বলছেন যেখানে <- সর্বশেষ কম্পাইল এবং minified সিএসএস ->) , মাথায়, সেইসাথে কিছু আছে divs যোগ করুন:
• বিভাগ শ্রেণি = "ফর্ম-গ্রুপ"
• বিভাগ শ্রেণি = "কল -..."
• বরাবর বর্গ = "কর্নেল-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

উপরের সমস্ত উত্তরগুলির মধ্যে, প্রদর্শনটি ব্যবহার করে: আপনার লেবেল এবং ইনপুট বাক্সটি একটি ডিভিতে জড়ান না করে, প্রস্তাবিত ইনলাইন-টেবিলটি আমার জন্য কাজ করেছে।

— কোডার 101

Answer 9

বুটস্ট্র্যাপ ডিভির মধ্যে লেবেল এবং ইনপুটটি মোড়ুন

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

Answer 10

এই জিনিসটি ভালভাবে কাজ করে t এটি কোনও সিএসএস ছাড়াই একই লাইনে রেডিও বোতাম বা চেকবক্স রাখে। <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

অন্য বিকল্পটি ফর্মের ভিতরে একটি টেবিল স্থাপন করা place (নীচে দেখুন) আমি জানি যে টেবিলগুলি কিছু লোকের দ্বারা উদ্ভূত হয়েছে তবে আমি মনে করি যে এটি প্রতিক্রিয়াশীল ফর্ম বিন্যাসের ক্ষেত্রে খুব সুন্দরভাবে কাজ করে।

<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) টেবিল, যেমন @Gothdo বললেন, লেআউট ব্যবহার করা উচিত নয়, এটি শুধুমাত্র ট্যাবুলার তথ্য ব্যবহার করা উচিত goo.gl/V9dRtp

— Padawan