একটি টেবিলের ভিতরে ফর্ম

Question

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

যেমন একটি ফর্ম জমা দেওয়ার ক্ষেত্রে ক্ষেত্রগুলি অন্তর্ভুক্ত করতে ব্যর্থ।

টেবিল সারি এবং ইনপুটগুলি নিম্নরূপ:

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

কোনও সহায়তা দুর্দান্ত হবে, ধন্যবাদ।

Comments

<form>ভিতরে রাখা যাবে না <tr>।

— ডেরেক 朕 會

এবং আপনি এটি বন্ধ করতে ভুলে গেছেন <tr>।

— ডেরেক 朕 會

প্রদর্শনটি ব্যবহার করুন: আপনার ফর্মের জন্য টেবিল-সারি এবং পুরো টেবিল ট্যাগটি খাঁজ করুন। আমার উত্তর এখানে দেখুন: stackoverflow.com/a/15600151/1038812

— ম্যাথু

এটি পারে না, তবে এটি কাজ করে ...

— স্যান্ডবার্গ

Answer 1

কোনও ফর্মকে এ , বা এর শিশু উপাদান হতে দেওয়া হয় না । সেখানে একটি রাখার চেষ্টা করার ফলে ব্রাউজারটি ফর্মটি টেবিলের পরে এটিতে সরিয়ে নিয়ে যাওয়ার প্রবণতা দেখা দেয় (এর বিষয়বস্তুগুলি রেখে যাওয়ার সময় - টেবিলের সারি, টেবিলের ঘর, ইনপুটস ইত্যাদি - পিছনে)।tabletbodytr

কোনও ফর্মের ভিতরে আপনার পুরো টেবিল থাকতে পারে। আপনি একটি টেবিল ঘরের ভিতরে একটি ফর্ম রাখতে পারেন। কোনও ফর্মের ভিতরে আপনার কোনও টেবিলের অংশ থাকতে পারে না।

পুরো টেবিলের চারপাশে একটি ফর্ম ব্যবহার করুন। তারপরে হয় ক্লিক করা সাবমিট বোতামটি ব্যবহার করুন কোন সারিটি প্রক্রিয়া করতে হবে তাড়াতাড়ি (তাড়াতাড়ি করতে) বা প্রতিটি সারিতে প্রক্রিয়াজাতকরণ (বাল্ক আপডেটের অনুমতি দেওয়া)।

এইচটিএমএল 5 form বৈশিষ্ট্যটি প্রবর্তন করে । এটি আপনাকে টেবিলের বাইরে সারি প্রতি একটি ফর্ম সরবরাহ করতে এবং তারপরে যে কোনও ফর্ম ব্যবহার করে একটি নির্দিষ্ট সারিতে সমস্ত ফর্ম নিয়ন্ত্রণ সংযুক্ত করতে দেয় id।

Comments

পুরো টেবিলের জন্য একটি ফর্ম ব্যবহার করে যত্ন নিন, সমস্ত ক্ষেত্র খালি থাকলেও সার্ভারে প্রেরণ করা হবে। এটি বিপুল পরিমাণে ডেটা হতে পারে !!! গণ / জনসাধারণের ব্যবহারের জন্য দয়া করে সেই সারির একটি বোতাম থেকে খোলা একটি ডায়ালগ (টেবিলের মধ্যে নয়) ব্যবহার করতে পছন্দ করুন।

— লেনিক্স

@ লেনিক্স: এটি সম্ভবত অসম্ভব যে আপনি এটির যথেষ্ট পরিমাণে ডেটা টেবিলে রাখবেন যাতে এটির ব্যান্ডউইদথের উপর একটি গুরুত্বপূর্ণ বোঝা হয়ে যায় (কমপক্ষে কোনও সাধারণ ওয়েবপৃষ্ঠার আকারের সাথে তুলনা করলে)। ব্যবহারকারীরা একটি সারি সম্পাদনা করতে পছন্দ করার এবং তাদের পরিবর্তনগুলি করতে সক্ষম হওয়ার মধ্যে অন্য পৃষ্ঠা লোড করার প্রয়োজনীয়তা, ওটিওএইচ, একটি বিরক্তিকর অতিরিক্ত ইন্টারঅ্যাকশন হতে হবে যা তাদের সম্পাদন করতে হবে।

— কোয়ান্টিন

মূল প্রশ্নের প্রস্তাবিত সমাধানের জন্য আপনার সম্পাদনা বোতামের দরকার নেই।

— কোয়ান্টিন

মানদণ্ডের <form>ভিতরে কেন নিষিদ্ধ <table>?

— 1234ru

@ ক্যান্টিন ফেয়ার যথেষ্ট। দুঃখের বিষয় এটি এখনও দশ দশক পরেও স্পষ্ট কারণ ছাড়াই দাঁড়িয়ে আছে।

— 1234ru

Answer 2

আপনি যদি নিজের মার্কআপটি সংরক্ষণ করতে চান তবে "ফর্ম" বৈশিষ্ট্যটি ব্যবহার করুন :

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

(* ফর্ম ক্ষেত্রগুলি <ফর্ম> ট্যাগের বাইরে)

এছাড়াও প্রথম 2 মন্তব্য দেখুন

Comments

দ্রষ্টব্য, এই সমাধানটি কেবলমাত্র HTML5 এর সাথে বৈধ।

— থ্রিনপ্লসোন

তদ্ব্যতীত, এটি ইন্টারনেট এক্সপ্লোরার আরও তথ্যের জন্য এখানে

— সৌহিয়েব বেসবস

ফর্ম বৈশিষ্ট্যের স্থিতিটি 'বিবেচনাধীন' যার অর্থ আপনার খুব ধৈর্যশীল বিকাশকারী হতে হবে mic মাইক্রোসফট en stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

এখন "বিকাশে" আছে বলে মনে হচ্ছে, এবং ব্যবহার করা ঠিক আছে

— ব্যবহারকারী 1156544

@ user1156544 এটি এখন এজ এ সমর্থিত, তবে আইই নয়। আপনার যদি আইই সমর্থন করার প্রয়োজন হয় তবে এই সমাধানটি আপনার ভাগ্যের বাইরে। আমার পরিকল্পনাটি দুটি ফর্ম উপাদানগুলির জন্য দুটি টেবিল ব্যবহার করার জন্য (আমি বিশ্বাস করতে পারি না যে আমাকে এটি করতে হবে)। ধন্যবাদ মাইক্রোসফ্ট!

— প্লুটো

Answer 3

: আপনি একটি "সম্পাদনাযোগ্য গ্রিড" অর্থাত্ গঠন মত একটি টেবিল সারিগুলি আপনি কোন একটি ফর্ম করতে পারবেন যে, ব্যবহার সিএসএস যে নকল টেবিল ট্যাগ লেআউটের চান display:table, display:table-rowএবং display:table-cell।

কোনও ফর্মে আপনার পুরো টেবিলটি মোড়ানোর দরকার নেই এবং আপনার টেবিলের প্রতিটি আপাত সারির জন্য আলাদা ফর্ম এবং টেবিল তৈরি করার দরকার নেই।

পরিবর্তে এটি চেষ্টা করুন:

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

একটি ফরমে পুরো টেবিলটি মোড়ানোর সমস্যাটি হ'ল যে কোনও এবং সমস্ত ফর্ম উপাদানগুলি জমা দেওয়ার সময় প্রেরণ করা হবে (সম্ভবত এটি পছন্দসই তবে সম্ভবত নয়)। এই পদ্ধতিটি আপনাকে প্রতিটি "সারি" এর জন্য একটি ফর্ম সংজ্ঞায়িত করতে এবং জমা দেওয়ার সময় কেবলমাত্র সেই সারিটির ডেটা প্রেরণ করতে দেয়।

একটি টিআর ট্যাগ (বা একটি ফর্মের চারপাশে টিআর) চারপাশে একটি ফরম ট্যাগ মোড়ানো সমস্যা হ'ল এটি অবৈধ এইচটিএমএল। ফর্মটি এখনও যথারীতি জমা দেওয়ার অনুমতি দেবে তবে এই মুহুর্তে ডোম নষ্ট হয়ে গেছে। দ্রষ্টব্য: আপনার ফর্ম বা টিআর এর শিশু উপাদানগুলি জাভাস্ক্রিপ্টের মাধ্যমে পাওয়ার চেষ্টা করুন, এটি অপ্রত্যাশিত ফলাফলের দিকে নিয়ে যেতে পারে।

নোট করুন যে আইই 7 এই সিএসএস টেবিল শৈলীগুলিকে সমর্থন করে না এবং আই 88 এটি "স্ট্যান্ডার্ড" মোডে আনার জন্য ডক্টাইপ ডিক্লেয়ারের প্রয়োজন হবে: (এটি একটি বা সমতুল্য কিছু চেষ্টা করুন)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

অন্য কোনও ব্রাউজার যা প্রদর্শন: টেবিল, প্রদর্শন: সারণি-সারি এবং প্রদর্শনকে সমর্থন করে: টেবিল-সেলটি আপনার সিএসএস ডেটা টেবিলটি একইভাবে প্রদর্শিত হবে যদি আপনি টেবিল, টিআর এবং টিডি ট্যাগ ব্যবহার করেন। তাদের বেশিরভাগই করেন।

মনে রাখবেন আপনি আরো অনুকরণমূলক THEAD, TBODY, সাথে অন্য DIV আপনার সারি গ্রুপ মোড়কে TFOOT করতে পারেন display: table-header-group, table-row-groupএবং table-footer-groupযথাক্রমে।

দ্রষ্টব্য: এই পদ্ধতিটি দিয়ে আপনি যা করতে পারবেন না তা হ'ল কলস্প্যান।

এই চিত্রটি দেখুন: http://jsfiddle.net/ZRQPP/

Comments

এটি উল্লেখ করার জন্য +1 কলস্প্যান সক্ষম করে না ... যা আমি অবশ্যই এটি পড়ার আগে অবশ্যই মিস করেছি ;-)

— জোহানেস রুডল্ফ

এটি হ'ল সবুজ চেক করা উত্তর (সত্যিকারের টেবিল ট্যাগ ব্যবহার না করা হলেও)

— আলেসিও