এইচটিএমএল ইনপুট ফর্ম সারিবদ্ধ কিভাবে

117

আমি এইচটিএমএলে নতুন এবং আমি ফর্মগুলি কীভাবে ব্যবহার করতে হয় তা শেখার চেষ্টা করছি।

আমি এখনও অবধি সবচেয়ে বড় সমস্যাটি ফর্মগুলি সারিবদ্ধ করা। এখানে আমার বর্তমান এইচটিএমএল ফাইলের উদাহরণ রয়েছে:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

এটির সাথে সমস্যাটি হ'ল, 'ইমেল' এর পরে ফিল্ড বক্সটি প্রথম এবং শেষের নামের তুলনায় ব্যবধানের দিক থেকে মারাত্মকভাবে আলাদা। এটিকে তৈরি করার 'যথাযথ' উপায় কী যাতে তারা প্রয়োজনীয়ভাবে 'লাইন-আপ' করে?

আমি ভাল ফর্ম এবং বাক্য গঠন অনুশীলনের চেষ্টা করছি ... প্রচুর লোক সিএসএস দিয়ে এটি করতে পারে আমি নিশ্চিত নই, আমি এখনও এইচটিএমএলটির খুব বেসিক বিষয়গুলি শিখেছি।

html  forms  alignment 
— yoshyosh
সূত্র
যখন টেবিলগুলির মধ্যে (যদি একদমই থাকে) এর মধ্যে একটি চিরস্থায়ী লড়াই হয় তবে আপনার প্রশ্নের উত্তরগুলি নিষেধাজ্ঞার নয়, মধ্যম পয়েন্টের seam হতে হবে যে <টেবিলগুলি> টেবিলের ডেটার জন্য, এখানে আরও দেখুন: stackoverflow.com/questions/83073 /…
— ট্রুফা
: ঠিক একই প্রশ্ন কিন্তু উত্তর <টেবিল> ট্যাগ ব্যবহার W3C এর এর তলব সঙ্গে প্রস্তাব দেওয়া stackoverflow.com/questions/4707332
— Bossliaw

উত্তর:

62

অন্য একটি উদাহরণ, এটি সিএসএস ব্যবহার করে, আমি কেবল ধারক শ্রেণীর সাথে ফর্মটি ডিভিতে রেখেছি। এবং নির্দিষ্ট করে আছে যে এর মধ্যে থাকা ইনপুট উপাদানগুলি ধারক প্রস্থের 100% হতে হবে এবং উভয় পক্ষের কোনও উপাদান নেই side

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}
<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>
স্নিপেট প্রসারিত করুন

— serialk
সূত্র
2
নিখুঁত, স্রেফ আমাকে সম্পর্কে জগাখিচির অনেকটাই বাঁচিয়েছে।
— নাল
এটি আমার "জমা দিন" বোতামটি ধারকটির প্রস্থে প্রসারিত করছে।
— সৌরভ রানা
4
এই সমাধানটি কাজ করে না। ইনপুট উপাদানগুলি বাম-সারিবদ্ধ হয় না। নীচের টেবিল সমাধান কাজ করে।
— কেন
1
আমি সুস্পষ্ট প্রস্থ নির্ধারণের খুব বড় ভক্ত নই, যখন আপনি
— ক্লাইমেন্ট
1
এটি রেডিও বোতামগুলির সাথে অদ্ভুত ফলাফল দেয়। আসল রেডিও বোতামের পরে রেডিও বোতামের লেবেলটি দেখায়।
— শব্দসুবিহীন
134

স্বীকৃত উত্তর (পিক্সেলগুলিতে একটি স্পষ্ট প্রস্থ নির্ধারণ করা) পরিবর্তন করা কঠিন করে তোলে এবং আপনার ব্যবহারকারীরা যখন ভিন্ন ফন্টের আকার ব্যবহার করেন তখন ব্রেক হয়ে যায়। অন্যদিকে, CSS টেবিলগুলি ব্যবহার করে দুর্দান্ত কাজ করে:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }
<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>
স্নিপেট প্রসারিত করুন

এখানে একটি জেএসফিডাল: http://jsfiddle.net/DaS39/1/

এবং আপনার যদি লেবেলগুলি ডান-প্রান্তিকভাবে প্রয়োজন হয় তবে text-align: rightকেবলমাত্র লেবেলে যুক্ত করুন: http://jsfiddle.net/DaS39/

সম্পাদনা: আরও একটি দ্রুত দ্রষ্টব্য: সিএসএস সারণীগুলি আপনাকে কলামগুলি দিয়ে খেলতে দেয়: উদাহরণস্বরূপ, আপনি যদি ইনপুট ক্ষেত্রগুলিকে যথাসম্ভব জায়গা নিতে চান তবে আপনি নীচের আকারগুলিতে যোগ করতে পারেন

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

আপনি যোগ করতে পারেন white-space: nowrapথেকে labelsযে ক্ষেত্রে।

— clément
সূত্র
4
আমি এই সমাধানটি পছন্দ করি। এর অর্থ পৃষ্ঠাটি বিকাশের মাধ্যমে বিকশিত হওয়ায় আমার কলামগুলি অনিবার্যভাবে প্রস্থ পরিবর্তন করার বিষয়ে আমাকে চিন্তা করতে হবে না। +1
— টম লর্ড
9
@ মুহাম্মাদউমার কারণ টেবিলগুলি স্ক্রিন পাঠক এবং অনেক সহায়ক ডিভাইসগুলিকে বিভ্রান্ত করবে, যেখানে সিএসএস টেবিলগুলি পৃথক উপস্থাপনা এবং বিষয়বস্তু রাখে। সুতরাং আপনার ফর্মটি কোনও স্ক্রিন রিডার বা পঠন সহায়ক দ্বারা সহজেই পার্সেবল থেকে যায় এবং এখনও দুর্দান্তভাবে প্রদর্শিত হয়।
— ক্লাইমেন্ট
3
ওয়েল, টিডি-তে ফিটিং লেবেল পরামর্শ দেয় যে এটি চার্টের মতো সংগঠিত, টেবুলার ডেটার অংশ; এখানে এটাই নয়। এছাড়াও, এইচটিএমএল টেবিলগুলি ব্যবহার করে ভবিষ্যতে লেআউটটি পরিবর্তন করা বা বিভিন্ন স্ক্রিনের আকারের সাথে (মোবাইল ফোন এবং ট্যাবলেটগুলি ভাবা) শক্ত করে তোলে।
— ক্লিমেট
4
@ মুহম্মদ উমার যে যুক্তি দিয়েছিলেন আজকের দিন পর্যন্ত আমি সিএসএস টেবিল কাঠামোর সাথে দৃ strongly়তার সাথে প্রতিরোধ করে চলেছি! আমি আঁকা এবং এটি চেষ্টা করার সিদ্ধান্ত নিয়েছে এবং অবশেষে স্যুইচিংয়ের মান দেখুন! প্লাস, এর সিএসএস, তাই দীর্ঘমেয়াদে জিনিসগুলিকে আরও সহজ করে তোলে
— বিলিএনয়ার
2
এই সমাধান সহ আপনি কীভাবে কলামগুলি স্প্যান করতে পারবেন? বিন্যাস সারিবদ্ধ করার জন্য সাবমিট বাটন।
— ইউজেনেকার
31

আপনি যদি HTML এ নতুন হন তবে আপনার পক্ষে একটি সহজ সমাধান হ'ল সব কিছু সীমাবদ্ধ করার জন্য কেবল একটি টেবিল ব্যবহার করা।

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>
— amonett
সূত্র
43
দ্রুত এবং সহজ সমাধান। মধ্যাহ্নভোজের বিরতির জন্য ধর্মীয় সিএসএস বিতর্ক ছেড়ে দিন এবং কাজটি শেষ করুন।
— ইমানুয়েল বুর্গ
3
@ ক্লারকিবয় - যিনি যতক্ষণ কাজটি করছেন ততক্ষণ যত্নশীল।
— সলডস্পকে
1
@ ক্লারকিবয় - সবচেয়ে অজ্ঞ মন্তব্য? হ্যাঁ .. আমি এখানে আপনার সাথে কোন তর্ক করতে চাই না .. আপনি যদি এটি ডিভস ভাবে এটি করতে চান। আপনি যদি এটি টেবিলগুলি করতে চান তবে এটি আপনার কাছে। তবে সমস্ত গ্রাহক বা লোকেরা এটির যত্ন নেবে না। তাদের বেশিরভাগই কাজটি করার বিষয়ে যত্নশীল ..
— সলডস্পনেকে
2
: - @ClarkeyBoy কি এই উত্তর, এবং থেকে W3C এর পোস্ট পড়তে stackoverflow.com/a/4707368/40411
— জে Polfer
6
@ এমমানুয়েলবার্গ: সিএসএস টেবিলগুলির জন্য এটি কি ঠিক বোঝানো হয়নি? পর্দার পাঠকদের বিভ্রান্ত না করে কোনও টেবিলের মতো লেআউট অর্জন করছেন? ওপি যে লেআউটটির জন্য জিজ্ঞাসা করেছে সেটি সিএসএস সারণী ব্যবহার করে অর্জন করা বেশ সহজ ( নীচে দেখুন )
— ক্লাইমেন্ট
17

লেবেলগুলির প্রদর্শনটি ইনলাইন-ব্লকে পরিবর্তন করা এবং প্রস্থ নির্ধারণ করা আমার পক্ষে অনেক সহজ

label {
    display: inline-block;
    width:100px;
    text-align: right;
}
— বায়রন
সূত্র
9

আপনি একটি টেবিল ব্যবহার করা উচিত। একটি বিষয় হিসাবে যৌক্তিক কাঠামো কারণ আপনাকে দেখাতে হবে যে লেবেল তাদের ইনপুট বক্স কিন্তু সেইসঙ্গে একে অপরের একমাত্র সাথে সম্পর্কিত করা হয় না, একটি দ্বি-মাত্রিক কাঠামো চাই, কেন আপনি তা সারিবদ্ধ করতে চান এই: ডেটা ট্যাবুলার হয়।

[আপনার যদি ইনপুট বাক্সগুলির পরিবর্তে স্ট্রিং বা সংখ্যাসূচক মানগুলি প্রদর্শন করতে হয় তবে আপনি কী করবেন তা বিবেচনা করুন]]

— কলিন স্ট্রিট
সূত্র
2
আমি আপনার পদ্ধতির প্রশংসা করি
— জোনো
2

এর জন্য, আমি একটি সঠিক এইচটিএমএল সিমেটিক রাখতে পছন্দ করি এবং একটি সিএসএসকে যথাসম্ভব সহজ ব্যবহার করতে পছন্দ করি।

এরকম কিছু কাজটি করবে: 

label{
  display: block;
  float: left;
  width : 120px;    
}

তবে একটি অপূর্ণতা: আপনাকে প্রতিটি ফর্মের জন্য সঠিক লেবেলের প্রস্থটি বেছে নিতে হতে পারে এবং আপনার লেবেলগুলি গতিশীল হতে পারে তবে (উদাহরণস্বরূপ I18N লেবেলগুলি) এটি সহজ নয়।

— স্যামুয়েল ইউস্টাচি
সূত্র
1

আমি সংজ্ঞা তালিকা ব্যবহারের একটি বড় অনুরাগী।

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

সিএসএস ব্যবহার করে এগুলি স্টাইল করা সহজ, এবং তারা বিন্যাসের জন্য সারণী ব্যবহারের কলঙ্ক এড়ায়।

— অ্যান্ড্রু
সূত্র
এটি ঠিক তত সহজেই এস দ্বারা সম্পন্ন হয় div(একটি ddস্রেফ একটি ~ 40px বাম মার্জিন থাকে), এবং কোনও শব্দার্থ বিভ্রান্তি এড়ায়। এছাড়াও, এই লাইনের কোনওটিই একই লাইনে লেবেল / ইনপুটগুলি আপ করে না।
— হলিস্টার
1

সিএসএস ব্যবহার করে

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

এটি আপনাকে এরকম কিছু দেয়:

           label1 |input box             |
    another label |another input box     |
— Gjaa
সূত্র
আরও clearকম প্রশস্ততা বলার জন্য আপনার ফর্মগুলি এড়াতে আপনাকে অবশ্যই ব্যবহার করতে হবে
— দ্য মাস্টার
0

প্রচলিত পদ্ধতিটি হ'ল একটি টেবিল ব্যবহার করা।

উদাহরণ:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

যাইহোক, অনেকের যুক্তি ছিল যে টেবিলগুলি সিএসএসকে সীমাবদ্ধ করছে এবং সিএসএস পছন্দ করে। সিএসএস ব্যবহারের সুবিধা হ'ল আপনি বিভিন্ন উপাদান ব্যবহার করতে পারেন। ডিভ, অর্ডার এবং অ-অর্ডারযুক্ত তালিকা থেকে আপনি একই লেআউটটি সম্পন্ন করতে পারেন।

শেষ পর্যন্ত, আপনি যেটি সবচেয়ে বেশি স্বাচ্ছন্দ্যযুক্ত তা ব্যবহার করতে চাইবেন।

ইঙ্গিত: টেবিলগুলি দিয়ে শুরু করা সহজ।

— ওভি ওয়েব সলিউশন
সূত্র
1
এটি শুরু করার জন্য তাদের পক্ষে সহজ ... এই তথ্যের জন্য +1 কিন্তু সত্যিকারের বিকাশকারীদের কেবলমাত্র ডেটাগুলির জন্য টেবিলগুলি অবলম্বন করা উচিত (সম্পূর্ণ
— উত্তরদিকের
1
সিএসএস সারণী ব্যবহার করা ঠিক তত সহজ এবং এর সাথে অ্যাক্সেসিবিলিটি সম্পর্কিত কোনও সমস্যা নেই। দেখুন আমার উত্তর নিচে।
— ক্লাইমেন্ট
0

ওয়েল খুব বেসিকের জন্য আপনি এগুলি টেবিলে সারিবদ্ধ করার চেষ্টা করতে পারেন। তবে টেবিলের ব্যবহারটি বিন্যাসের জন্য খারাপ কারণ টেবিলটি সামগ্রীগুলির জন্য ব্যবহৃত।

আপনি যা ব্যবহার করতে পারেন তা হ'ল সিএসএস ভাসমান কৌশল।

সিএসএস কোড

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

এইচটিএমএল

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

আমার লেখা একটি বিস্তৃত নিবন্ধটি আইই 7 ফ্লোট সমস্যার প্রশ্নের উত্তর দিতে পাওয়া যাবে: আই 7 ভাসা সঠিক সমস্যা

— ফল
সূত্র
উদাহরণগুলির জন্য ধন্যবাদ, তবে এইচটিএমএল ফর্মটি এখনও সমস্যার সমাধান করতে পারে না। উদাহরণস্বরূপ আপনি যদি তাদের মধ্যে একটিতে 'প্রথম নাম' পরিবর্তন করে থাকেন তবে আমি প্রথমবারের মতো একই সমস্যাটি শেষ করেছি
— yoshyosh
আমি ডিজাইনারদের সাথে এটি নিয়ে কাজ করেছি এবং এটি একটু ভঙ্গুর, আইএমই। এই বেসিক লেআউটের জন্য, সময়টি 98% হয়ে যাবে। খুব জটিল হওয়ার চেষ্টা করুন, উদাহরণস্বরূপ দ্বি-কলাম লেআউট, বা বহু-লাইন লেবেল, এবং এটি কঠিন হয়ে ওঠে।
— স্ট্যাটিকসান
1
@ স্ট্যাটিক্সান - আপনি যদি ভাসা, সাফ এবং ডিভ বুঝতে পারেন তবে আপনি এই জাতীয় লেআউটটি দিয়ে ভাল কাজ করবেন এবং বাস্তবে তারা দ্রুত রেন্ডার করে এবং আধুনিক ব্রাউজারগুলির টেবিলের তুলনায় আরও নমনীয়।
— মৌরি
ঠিক আছে, আমি ভেবেছিলাম আমি ভাসা, ক্লিয়ারস এবং ডিভগুলি বুঝতে পারি, তবে আমি যে ফর্মটি না দিয়েছিলাম তা না ভেঙে আমি বাড়িয়ে দিতে পারি না। এটি আমার বোঝাপড়ার কোনও ত্রুটি হোক বা ডিজাইনারের বাস্তবায়নে, এটুকু রয়ে গেল না এটি ভঙ্গুর। (মজার বিষয় হল, পরবর্তী সংস্করণটি ulট্যাগ ব্যবহার করে একটি হাইব্রিড ডিজাইনের আরও
— বেশিরভাগ ক্ষেত্রে চলেছে
0

আমি জানি এটি ইতিমধ্যে উত্তর দেওয়া হয়েছে, তবে আমি তাদের অতিরিক্তভাবে উপকার সহ সুন্দরভাবে সারিবদ্ধ করার একটি নতুন উপায় খুঁজে পেয়েছি - দেখুন http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

মূলত আপনি ইনপুটটির চারপাশে লেবেল উপাদানটি ব্যবহার করেন এবং এটি ব্যবহার করে সারিবদ্ধ হন:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

এবং তারপরে CSS এর সাহায্যে আপনি কেবল প্রান্তিককরণ:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}
  • লাইনব্রেকগুলির জন্য আপনার কোনও অগোছালো বিআর প্রয়োজন নেই - এর অর্থ আপনি দ্রুত একটি বহু-কলাম লেআউটটি গতিশীলভাবে সম্পন্ন করতে পারেন
  • পুরো লাইনটি ক্লিক-সক্ষম। বিশেষত চেকবাক্সগুলির জন্য এটি একটি বিশাল সহায়তা।
  • গতিশীলভাবে ফর্ম লাইনগুলি দেখানো / আড়াল করা সহজ (আপনি কেবল ইনপুটটি অনুসন্ধান করুন এবং এর প্যারেন্ট -> লেবেলটি লুকান)
  • আপনি পুরো লেবেলে ক্লাস বরাদ্দ করতে পারেন এটি ত্রুটি ইনপুটটি আরও পরিষ্কার দেখায় (কেবলমাত্র ইনপুট ক্ষেত্রের আশেপাশে নয়)
— নাইকো
সূত্র
দুর্দান্ত, তবে নির্দিষ্ট লেবেলের প্রস্থের প্রয়োজন। বড় লেবেলের পাঠ্য ইনপুটটিকে ওভাররাইড করে।
— মরেটতো
0

ক্লিমেন্টের উত্তর এখন পর্যন্ত সবচেয়ে ভাল। বাম-মধ্য-ডান প্রান্তরেখা বোতামগুলি সহ বিভিন্ন সম্ভাব্য প্রান্তিককরণগুলি দেখিয়ে এখানে কিছুটা উন্নত উত্তর দেওয়া হয়েছে:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}
<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>
স্নিপেট প্রসারিত করুন

আমি padding-right:8pxউদাহরণটি সামান্য কম ভয়ঙ্কর দেখানোর জন্য সমস্ত লেবেলের ডানদিকে কিছু প্যাডিং যুক্ত করেছি (তবে ) এটি একটি বাস্তব প্রকল্পে আরও সতর্কতার সাথে করা উচিত (অন্য সমস্ত উপাদানগুলিতে প্যাডিং যুক্ত করাও একটি ভাল ধারণা হবে)।

— Cyberknight
সূত্র
-1

সিএসএস আমি এই সমস্যাটি সমাধান করতে ব্যবহার করতাম, জিজেয়ার মতোই তবে আরও স্টাইলযুক্ত

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

এখানে আমার এইচটিএমএল, কোনও পিএইচপি কোডবিহীন একটি সাধারণ রেজিস্ট্রেশন ফর্মের জন্য বিশেষভাবে ব্যবহৃত

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

এটি খুব সহজ, এবং আমি সবে শুরু করছি, তবে এটি বেশ সুন্দরভাবে কাজ করেছে

— PA_Commons
সূত্র
-1

আনর্ডারড তালিকার ভিতরে ইনপুট ট্যাগগুলি সন্নিবেশ করুন the স্টাইল-টাইপটি কোনওটিই তৈরি করুন। এখানে একটি উদাহরণ।

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

আমার জন্য কাজ!

— বিবেক আইয়ার
সূত্র
এটি কখনই কাজ করবে না। ULমার্জিন থেকে দূরে বিষয়বস্তু ইনডেন্ট করা হবে, কিছু প্রান্তিক না। inputগুলি রাখলে LIতাদের সামনে কেবল একটি বুলেট যুক্ত হবে (হ্যাঁ, এগুলি তালিকার সাথে সংযুক্ত করা হবে, লেবেলের বিপরীতে নয়)। এছাড়াও, "ইনপুট 2" পূর্ববর্তী inputউপাদানটির সাথে লেগে থাকবে , কারণ এটি LIবন্ধ নেই (কোনও নেই </li>) এবং <li>সেই "লেবেল" এর জন্য কোনও সূচনা নেই , সুতরাং এটি সাধারণ পাঠ্য হিসাবে যেমন করা উচিত তেমন আচরণ করা হবে, সুতরাং পূর্ববর্তী উপাদান সর্বশেষে, কোডটিতে একটি ত্রুটি রয়েছে, বন্ধ <ul/>হওয়া উচিত </ul>।
— সাইবারকনাইট
-2 
<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

সিএসএসে আপনাকে লেবেল এবং ইনপুট উভয়ই প্রদর্শন হিসাবে ঘোষণা করতে হবে: ইনলাইন-ব্লক এবং আপনার প্রয়োজনীয়তা অনুসারে প্রস্থ দিন। আশা করি এটা তোমাকে সাহায্য করবে। :)

— kta
সূত্র
-4

সহজভাবে যুক্ত করুন 

<form align="center ></from>

খোলার ট্যাগটিতে কেবল সারিবদ্ধ রাখুন।

— জাক গিল
সূত্র
এই হবে না কাজ, যেমন formনেই alignঅ্যাট্রিবিউট (এবং এমনকি যদি এটা থাকত, তাহলে শৈলী / CSS এর ব্যবহার দিকে উঠিয়ে নেওয়া হবে)। এছাড়াও, সমাপ্তি ট্যাগটি ভুল, এটি হওয়া উচিত </form>। এর style="text-align:center"ভিতরে এটি নির্ধারণ করা সম্ভব form, কী ফর্মের পুরো বিষয়টিকে কেন্দ্রের মধ্যে প্রান্তিক করবে, তবে মূল প্রশ্নটি এটাই ছিল না। এটি কখনই তাদের ইনপুট ক্ষেত্রগুলির বিরুদ্ধে লেবেলগুলি সারিবদ্ধ করবে না (হ্যাঁ, আমি ফায়ারফক্স ox৫ তে পরীক্ষা করেছি, এটি নিশ্চিত হওয়ার জন্য)।
— সাইবারকনাইট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.