javascript - সেরা অনুশীলন: এইচটিএমএল আইডি বা নাম বৈশিষ্ট্য দ্বারা ফর্ম ফর্ম উপাদান?




html forms (8)

[1] নথি। ফরম [0] .elements [0];

যখন আমি উপাদান অ্যাক্সেসের এই পদ্ধতিটি দেখি তখন " না-ওমগ-কখনো! " মনে হয়। এর সাথে সমস্যাটি হল যে এটি DOM একটি সাধারণ তথ্য গঠন (উদাহরণস্বরূপ: একটি অ্যারে) যেখানে উপাদান ক্রমানুসারে স্ট্যাটিক, সামঞ্জস্যপূর্ণ বা নির্ভরযোগ্য। আমরা 99.9999% সময় জানি যে, এই ক্ষেত্রে না। ফর্মের মধ্যে পুনর্বিন্যাস বা input উপাদান, প্রশ্ন ফর্মের আগে পৃষ্ঠাতে অন্য form যোগ করা বা প্রশ্ন ফর্মটি সরাতে হয় এমন সমস্ত ক্ষেত্রেই এই কোডটি বিরতি দেয়। সংক্ষিপ্ত গল্প: এই খুব ভঙ্গুর। যত তাড়াতাড়ি আপনি কিছু যোগ বা সরানো, এটি বিরতি যাচ্ছে।

[2] document.myForm.foo;

আমি এই বিষয়ে সের্গেই ইলিন্স্কির সাথে আছি:

  • তাদের id বৈশিষ্ট্য উল্লেখ করে নির্বিচারে উপাদানগুলি অ্যাক্সেস করুন: document.getElementById("myform");
  • অ্যাক্সেস নাম অনুসারে ফর্ম উপাদানগুলি, তাদের পিতামাতার ফর্ম উপাদানটির সাথে সম্পর্কিত: document.getElementById("myform").foo;

এই পদ্ধতির সাথে আমার প্রধান সমস্যা একটি ফর্ম প্রয়োগ করা হয় যখন name গুণাবলী অকার্যকর। নাম POST / GET এর অংশ হিসাবে সার্ভারে প্রেরিত হয় না এবং হ্যাশ স্টাইল বুকমার্কগুলির জন্য কাজ করে না।

[3] document.getElementById ('foo');

আমার মতে, এটি সবচেয়ে ভাল পদ্ধতি। সরাসরি অ্যাক্সেস সবচেয়ে সংক্ষিপ্ত এবং পরিষ্কার পদ্ধতি।

[4] document.getElementById ('myForm')। Foo;

আমার মতে, এটি গ্রহণযোগ্য, কিন্তু প্রয়োজনীয় তুলনায় আরো verbose। পদ্ধতি # 3 আরও ভাল।

আমি ডগলাস ক্রকফোর্ডের একটি ভিডিও দেখার জন্য ঘটেছিলাম এবং তিনি এই বিষয়ে খুব গুরুত্ব দিয়েছিলেন । সুদের পয়েন্ট এ -12: 00 এ। সংক্ষেপ:

  • ডকুমেন্ট সংগ্রহগুলি (নথিপত্র, ডকুমেন্ট.ফরম, ইত্যাদি) অপ্রচলিত এবং অপ্রাসঙ্গিক (পদ্ধতি 1)।
  • name গুণাবলী ব্যবহার করা হয় না, তাদের অ্যাক্সেস না। এটি উইন্ডোজ, ইনপুট ক্ষেত্র এবং নোঙ্গর ট্যাগগুলির মতো জিনিসগুলির নামকরণের জন্য।
  • "আইডি এমন জিনিস যা আপনাকে আলাদাভাবে একটি উপাদান সনাক্ত করতে ব্যবহার করতে হবে যাতে আপনি এটিকে অ্যাক্সেস করতে পারেন। তারা (নাম এবং আইডি) বিনিময়যোগ্য ব্যবহার করে, কিন্তু তারা আর নেই।"

তাই সেখানে যদি আপনি এটি আছে। Semantically, এই সবচেয়ে ইন্দ্রিয় তোলে।

যেহেতু যে কোনও জাভাস্ক্রিপ্ট ডেভেলপার জানে, একই জিনিস করতে অনেকগুলি (অনেকগুলি) উপায় রয়েছে। উদাহরণস্বরূপ, নিম্নরূপ হিসাবে আপনি একটি টেক্সট ক্ষেত্র আছে বলুন:

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

জাভাস্ক্রিপ্ট এ এটি অ্যাক্সেস করার অনেক উপায় আছে:

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

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

[2] সর্বাধিক স্বজ্ঞাত বলে মনে হয় এবং এটি ব্যাপকভাবে ব্যবহৃত হয় বলে মনে হচ্ছে, তবে আমি গেকো ডকুমেন্টেশনের উল্লেখ না দেখেছি এবং আমি উভয় ফরওয়ার্ড সামঞ্জস্য এবং ক্রস ব্রাউজার কম্প্যাটিবিলিটি সম্পর্কে চিন্তিত (এবং অবশ্যই আমি হতে চাই মান যতটা সম্ভব compliant)।

তাই এখানে সেরা অনুশীলন কি? যে কেউ ডম ডকুমেন্টেশন বা W3C স্পেসিফিকেশন কিছু নির্দেশ করতে পারেন যে এই সমাধান করতে পারে?

নোট আমি বিশেষভাবে একটি অ লাইব্রেরি সমাধান (jQuery / প্রোটোটাইপ) আগ্রহী।


অন্যান্য উত্তরগুলির সম্পূরক করার জন্য, document.myForm.foo তথাকথিত DOM লেভেল 0, যা নেটস্কেপ দ্বারা প্রয়োগ করা হয় এবং এটি প্রকৃতপক্ষে একটি খোলা মান না হলেও এটি বেশিরভাগ ব্রাউজার দ্বারা সমর্থিত।


আমার উত্তর সঠিক প্রশ্ন ভিন্ন হবে। আমি বিশেষভাবে একটি নির্দিষ্ট উপাদান অ্যাক্সেস করতে চান, তাহলে আমি document.getElementById () ব্যবহার করব। একটি উদাহরণ একটি ব্যক্তির সম্পূর্ণ নাম গণনা করা হয়, কারণ এটি একাধিক ক্ষেত্র নির্মাণ করা হয়, কিন্তু এটি একটি পুনরাবৃত্তিমূলক সূত্র।

যদি আমি একটি কার্যকরী কাঠামো (একটি ফর্ম) অংশ হিসাবে উপাদান অ্যাক্সেস করতে চান, তাহলে আমি ব্যবহার করবো:

var frm = document.getElementById('frm_name');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..

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

তথ্য একত্রিতকরণের জন্য (ফর্মের উপর ভিত্তি করে পাই পাই চার্ট নির্মাণের মতো) আমি কনফিগারেশন নথি এবং কাস্টম তৈরি জাভাস্ক্রিপ্ট বস্তুগুলি ব্যবহার করি। তারপরে ক্ষেত্রের সঠিক অর্থটি তার প্রেক্ষাপটে সম্পর্কিত গুরুত্বপূর্ণ এবং আমি document.getElementById () ব্যবহার করি।


আমি অনেক একটি 5 ম পদ্ধতি পছন্দ। এটাই
[5] ইভেন্ট হ্যান্ডলার থেকে ফাংশনে ফর্ম বা ক্ষেত্রের বস্তুটি পাস করতে বিশেষ জাভাস্ক্রিপ্ট সনাক্তকারীটি ব্যবহার করুন।

বিশেষত, ফর্মের জন্য:

<form id="form1" name="form1" onsubmit="return validateForm(this)">

এবং

// The form validation function takes the form object as the input parameter
function validateForm(thisForm) {
  if (thisform.fullname.value !=...

এই কৌশল ব্যবহার করে, ফাংশন জানতে হবে না
- ফর্ম যা ফর্ম পৃষ্ঠায় সংজ্ঞায়িত করা হয়,
- ফর্ম আইডি, না
- ফর্ম নাম

একইভাবে, ক্ষেত্রের জন্য:

<input type="text" name="maxWeight">
...
<input type="text" name="item1Weight" onchange="return checkWeight(this)">
<input type="text" name="item2Weight" onchange="return checkWeight(this)">

এবং

function checkWeight(theField) {
  if (theField.value > theField.form.maxWeight.value) {
    alert ("The weight value " + theField.value + " is larger than the limit");
    return false;
  }
return true;
}

এই ক্ষেত্রে, ফাংশনটি কোন নির্দিষ্ট ওজন ক্ষেত্রের নাম বা আইডিটি কখনই জানতে হবে না, যদিও এটি ওজন সীমা ক্ষেত্রের নামটি জানতে হবে।


একটি ফর্ম মধ্যে নামযুক্ত উপাদান অ্যাক্সেস করতে, form অবজেক্ট নিজেই ব্যবহার করার জন্য এটি একটি ভাল অভ্যাস।

DOM ট্রিতে একটি নিরপেক্ষ উপাদান অ্যাক্সেস করতে যা কোনও ফর্মের মাঝে পাওয়া যেতে পারে, getElementById এবং উপাদানটির id


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

উদাহরণ:

<form id="mainForm" name="mainForm">
    <input type="radio" name="R1" value="V1">choice 1<br/>
    <input type="radio" name="R1" value="V2">choice 2<br/>
    <input type="radio" name="R1" value="V3">choice 3
</form>

আপনি ব্যবহার করে পুরো রেডিও বোতাম R1 এর চেক মানটি পেতে / সেট করতে পারেন
document.mainForm.R1.value
অথবা
document.getElementById ( "mainForm")। R1.value
সুতরাং আপনি যদি একক শৈলীটি চান তবে আপনি এই পদ্ধতিটি সর্বদা ব্যবহার করতে চাইবেন, নির্বিশেষে ফর্ম উপাদানটির প্রকারভেদে। আমি, আইডি দ্বারা নাম এবং টেক্সট বক্স দ্বারা রেডিও বোতাম অ্যাক্সেস সম্পূর্ণরূপে আরামদায়ক।


পুরাতন রূপে আমি সর্বদা 'document.myform.myvar' সিনট্যাক্স ব্যবহার করেছি কিন্তু সম্প্রতি এটি ক্রোমে ব্যর্থ হয়েছে (ফায়ারফক্স এবং IE তে ঠিক আছে)। এটি একটি অজ্যাক্স পৃষ্ঠা (অর্থাত্ একটি ডিভির ভিতরের HTML সম্পত্তিতে লোড করা)। সম্ভবত Chrome প্রধান নথির একটি উপাদান হিসাবে ফর্মটিকে চিনতে পারেনি। আমি GetElementById ব্যবহার করে (ফর্মটির উল্লেখ না করে) এবং এটি ঠিক আছে।


ফর্ম 2 ঠিক আছে, এবং ফর্ম 3 এছাড়াও সুপারিশ করা হয়।
নাম এবং আইডি এর মধ্যে রিডান্ডেন্সিটি সামঞ্জস্য রাখতে প্রয়োজনীয়তার কারণে ঘটেছে, এইচটিএমএল 5 এ কিছু উপাদান (যেমন আইএমজি, ফর্ম, আইফ্রেম এবং এগুলি) তাদের "নাম" বৈশিষ্ট্য হারাবে এবং তাদের এখন থেকে তাদের রেফারেন্স করার জন্য তাদের আইডি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে উপর :)





dom