diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index 1c6188b5b..a8d2b45cd 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -1,23 +1,23 @@ -# Form properties and methods +# Form properties এবং methods -Forms and control elements, such as `` have a lot of special properties and events. +ফর্মস এবং কন্ট্রোল এলিমেন্ট সমূহের অনেক স্পেশাল প্রপার্টি এবং ইভেন্ট আছে, যেমন ``। -Working with forms will be much more convenient when we learn them. +ফর্মের সাথে কাজ করতে করতে তা শিখা আমাদের জন্য সুবিধাজনক। -## Navigation: form and elements +## Navigation: form এবং elements -Document forms are members of the special collection `document.forms`. +ফর্মস সমূহ ডকুমেন্ট এর একটি স্পেশাল কালেকশন `document.forms`। -That's a so-called "named collection": it's both named and ordered. We can use both the name or the number in the document to get the form. +এটিকে বলা হয় "named collection": এটির নাম এবং ইনডেক্সিং উভয়ই আছে। আমরা নাম বা ইনডেক্স উভয়ের সাহায্যেই ফর্ম এলিমেন্টকে অ্যাক্সেস করতে পারি। ```js no-beautify document.forms.my - the form with name="my" document.forms[0] - the first form in the document ``` -When we have a form, then any element is available in the named collection `form.elements`. +একটি ফর্মের সকল এলিমেন্ট `form.elements` এ কালেকশন হিসেবে থাকে। -For instance: +উদাহরণস্বরূপ: ```html run height=40
@@ -36,9 +36,9 @@ For instance: ``` -There may be multiple elements with the same name, that's often the case with radio buttons. +ফর্মে একই নামের একাধিক এলিমেন্ট থাকতে পারে, যেমন রেডিও বাটন টাইপ। -In that case `form.elements[name]` is a collection, for instance: +এক্ষেত্রে এটি ইনডেক্সিং অর্ডার কালেকশন হিসেবে থাকে `form.elements[name]`, যেমন: ```html run height=40 @@ -57,13 +57,13 @@ alert(ageElems[0]); // [object HTMLInputElement] ``` -These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in `form.elements`. +নেভিগেশন প্রপার্টিসমূহ ট্যাগ স্ট্রাকচারের উপর নির্ভর করে না। ফর্মের কন্ট্রোল এলিমেন্ট নেস্টেড হিসেবে থাকলেও `form.elements` এ উপাদান হিসেবে থাকে। ````smart header="Fieldsets as \"subforms\"" -A form may have one or many `
` elements inside it. They also have `elements` property that lists form controls inside them. +ফর্মে এক বা একাধিক `
` এলিমেন্ট থাকতে পারে। এবং `
` এরও `elements` প্রপার্টি থাকে। -For instance: +উদাহরণস্বরূপ: ```html run height=80 @@ -90,13 +90,13 @@ For instance: ```` ````warn header="Shorter notation: `form.name`" -There's a shorter notation: we can access the element as `form[index/name]`. +এছাড়াও আরো সংক্ষেপে আমরা এলিমেন্ট সমূহকে অ্যাক্সেস করতে পারি `form[index/name]`। -In other words, instead of `form.elements.login` we can write `form.login`. +অর্থাৎ, `form.elements.login` এর পরিবর্তে আমরা `form.login` এভাবেও অ্যাক্সেস করতে পারি। -That also works, but there's a minor issue: if we access an element, and then change its `name`, then it is still available under the old name (as well as under the new one). +এটিও কাজ করবে, তবে এর একটি ছোট সমস্যা আছে: যদি আমরা কোন এলিমেন্ট অ্যাক্সেস করি, এবং তারপর `name` অ্যাট্রিবিউট পরিবর্তন করি, তাহলে পুরনো নামটি তখনো অ্যাক্সেসবল থাকবে (এবং সাথে নতুনটিও)। -That's easy to see in an example: +চলুন উদাহরণের সাহায্যে দেখি: ```html run height=40 @@ -106,9 +106,9 @@ That's easy to see in an example: ``` -That's usually not a problem, because we rarely change names of form elements. +তবে এটি তেমন সমস্যা না, কেননা আমরা খুব কমই ফর্ম এলিমেন্টের নাম পরিবর্তন করি। ```` ## Backreference: element.form -For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form. +যেকোন এলিমেন্টের জন্য, ফর্মকে আমরা `element.form` দ্বারা অ্যাক্সেস করতে পারি। সুতরাং ফর্ম তার সকল এলিমেন্টকে রেফারেন্স করে, এবং এলিমেন্ট সমূহ ফর্মকে। -Here's the picture: +এখানে দেখুন: ![](form-navigation.svg) -For instance: +উদাহরণস্বরূপ: ```html run height=40 @@ -151,44 +151,45 @@ For instance: ## Form elements -Let's talk about form controls. +ফর্ম কন্ট্রোল সম্পর্কে আলোচনা করা যাক। ### input and textarea -We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes. +আমরা এলিমেন্টের মান এভাবে পেতে পারি `input.value` (string) অথবা চেকবক্সের জন্য `input.checked` (boolean)। -Like this: +যেমন: ```js input.value = "New value"; textarea.value = "New text"; -input.checked = true; // for a checkbox or radio button +input.checked = true; // চেকবক্স বা রেডিওর জন্য ``` -```warn header="Use `textarea.value`, not `textarea.innerHTML`" -Please note that even though `` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it. +```warn header="`textarea.innerHTML` এর পরিবর্তে`textarea.value` ব্যবহার করুন" +দয়া করে নোট করুন যদিও `` ভ্যালুকে নেস্টেড HTML আকারে সংরক্ষন করে, আমাদের ভ্যালু অ্যাক্সেসের জন্য `textarea.innerHTML` ব্যবহার করা অনুচিত। -It stores only the HTML that was initially on the page, not the current value. +কেননা এটি পেজ ইনিশিয়াল লোডের সময়ের ডাটা সংরক্ষন করে, বর্তমান ভ্যালু রিটার্ন করবে না। ``` ### select and option -A `` এলিমেন্টের ৩টি গুরুত্বপূর্ণ প্রপার্টি আছে: -1. `select.options` -- the collection of `