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




html forms dom (10)

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

<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 / প্রোটোটাইপ) আগ্রহী।


Answers

এই পৃষ্ঠাটি দেখুন: https://developer.mozilla.org/En/DOM/Document.getElementsByName

document.getElementsByName('foo')[0]; // returns you element.

এটি 'উপাদানের' হতে হবে এবং একটি অ্যারে ফেরত দিতে হবে কারণ একাধিক উপাদান একই নাম থাকতে পারে।


আমি অনেক একটি 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;
}

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


[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, এই সবচেয়ে ইন্দ্রিয় তোলে।


এটি সত্যিই আপনার প্রশ্নের উত্তর দিচ্ছে না, তবে কেবল এই অংশে:

[3] একটি আইডি এবং একটি নাম উভয় প্রয়োজন ... উভয় হচ্ছে কিছুটা অনাদায়ী

আপনি সম্ভবত প্রতিটি ফরম ক্ষেত্রে কোনও id বৈশিষ্ট্য থাকতে হবে, যাতে আপনি এটির সাথে <label> উপাদানটি যুক্ত করতে পারেন, এটির মতো:

<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />

এটি অ্যাক্সেসিবিলিটির জন্য প্রয়োজন (অর্থাত আপনি যদি ফর্মের লেবেল এবং নিয়ন্ত্রণগুলি সংযুক্ত না করেন তবে কেন আপনি অন্ধ মানুষকে এত ঘৃণা করেন?)।

এটি কিছুটা অকার্যকর, যদিও আপনার কাছে চেকবক্স / রেডিও বোতাম থাকলে কম, তবে তাদের মধ্যে অনেকেই একটি name ভাগ করতে পারেন। পরিশেষে, id এবং name বিভিন্ন উদ্দেশ্যে, এমনকি যদি উভয়ই একই মানতে সেট থাকে।


আপনার ফর্ম শুধুমাত্র একটি আইডি দিন, এবং আপনার ইনপুট শুধুমাত্র একটি নাম দিন :

<form id="myform">
  <input type="text" name="foo">

তারপরে আপনার ইনপুট উপাদান অ্যাক্সেস করার জন্য সর্বাধিক মান-সম্মতিপূর্ণ এবং অন্তত সমস্যাযুক্ত উপায় হল:

document.getElementById("myform").elements["foo"]

শুধুমাত্র .elements["foo"] পরিবর্তে .elements["foo"] ব্যবহার করা উত্তম, কারণ পরবর্তীতে এইচটিএমএল উপাদানটির পরিবর্তে "foo" নামক ফর্মটির একটি সম্পত্তি ফেরত দিতে পারে!


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


এটি একটি বিট পুরাতন কিন্তু আমি প্রাসঙ্গিক মনে করি এমন একটি জিনিস যুক্ত করতে চাই।
(আমি উপরের একটি বা 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 ব্যবহার করে (ফর্মটির উল্লেখ না করে) এবং এটি ঠিক আছে।


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

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


যদি আপনার মত কিছু থাকে:

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

আপনি এই মত সব পড়তে পারেন:

jQuery("input[name='mycheckbox']").each(function() {
    console.log( this.value + ":" + this.checked );
});

স্নিপেট:

jQuery("input[name='mycheckbox']").each(function() {
  console.log( this.value + ":" + this.checked );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">





javascript html forms dom