एचटीएमएल: फॉर्मों की तालिका?

Question

मैं अक्सर खुद को फॉर्मों की एक टेबल बनाना चाहता हूं - पंक्तियों का एक समूह, प्रत्येक पंक्ति अपने स्वयं के फ़ील्ड के साथ एक अलग रूप है और सबमिट बटन। उदाहरण के लिए, यहां एक उदाहरण पालतू जानवर की दुकान आवेदन है - कल्पना यह एक चेकआउट स्क्रीन जो आप मात्रा और पालतू जानवरों आपके द्वारा चुने गए की विशेषताओं को अद्यतन करने और बाहर की जाँच से पहले अपने परिवर्तनों को सहेजने का विकल्प देता है है:

Pet Quantity Color Variety Update 
snake   4 black rattle update 
puppy   3 pink dalmatian update 

मैं इस HTML का उपयोग कर कि इस तरह दिखता है ऐसा करने में सक्षम होने के लिए प्यार होता है:

<table> 
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead> 
<tbody> 
    <tr> 
      <form> 
      <td>snake<input type="hidden" name="cartitem" value="55"></td> 
      <td><input name="count" value=4/></td> 
      <td><select name="color"></select></td> 
      <td><select name="variety"></select></td> 
      <td><input type="submit"></td> 
      </form> 
    </tr> 
</tbody> 
</table> 

यह मूल रूप से एक मेज रूपों, प्रति पंक्ति एक रूप से भरा है। अपडेट को मारने से आपको उस विशिष्ट पंक्ति को अपडेट करने की अनुमति मिलती है (यह वास्तविक उदाहरण नहीं है, मेरे वास्तविक अनुप्रयोगों को वास्तव में पंक्तियों की आजादी की आवश्यकता होती है)।

लेकिन यह मान्य HTML नहीं है। Spec के अनुसार, <form> या तो <td> या पूरी तरह से <table> के बाहर होना चाहिए। यह अमान्य एचटीएमएल जावास्क्रिप्ट पुस्तकालय तोड़ता है और इससे निपटने के लिए एक बड़ा दर्द है।

मैं कॉलम शीर्षलेख रखने के लिए एक टेबल बनाने और फिर प्रति तालिका एक टेबल बनाने के लिए समाप्त करता हूं। लेकिन इसके लिए सुसंगत कॉलम चौड़ाई की आवश्यकता होती है ताकि सूट कॉलम में इनपुट किया जा सके, जो सब-पैरा है। आप इस समस्या से निपटने का अंत कैसे करते हैं? क्या कोई स्पष्ट आसान समाधान है जो मुझे याद आ रहा है? मैं रूपों की एक तालिका कैसे बना सकता हूं?

Answer 1

यहां की चाल सिर्फ एक ही फॉर्म का उपयोग करना है, उदा।

<form> 
     <table> 
     <!-- rows... --> 
     </table> 
     <p><input type="submit" value="Update quantity"></p> 
    </form> 

आप एक उत्पाद साँप आईडी 6. साथ तब आप उस वस्तु की मात्रा क्षेत्र मात्रा [6] के लिए इनपुट नाम है कहो।

मुझे नहीं पता कि आप किस सर्वर साइड भाषा का उपयोग कर रहे हैं, लेकिन PHP में आप आईडी के आधार पर मात्राओं और अद्यतनों पर फिर से सक्रिय हो सकते हैं। आपको इस तरह की एक सरणी मिल जाएगी:

$_POST['quantity'] = array(
    '6' => 4 
) 

Answer 2

आप अन्य तत्वों को टेबल लेआउट देने के लिए सीएसएस का उपयोग कर सकते हैं।

.table { display: table; } 
.table>* { display: table-row; } 
.table>*>* { display: table-cell; } 

फिर आप निम्न मान्य HTML का उपयोग करते हैं।

<div class="table"> 
    <form> 
     <div>snake<input type="hidden" name="cartitem" value="55"></div> 
     <div><input name="count" value=4/></div> 
    </form> 
</div>