ورودی HTML (HTML Input)
اینجا با نمونه های «ورودی HTML» کار می کنیم. «ورودی (Input)» همان فیلدها و دکمه ها هستند. با جاوااسکریپت می توانیم ویژگی ها را بخوانیم یا تغییر دهیم. مثل فرم نام نویسی مدرسه.
ورودی HTML: دکمه ها (Button)
دکمه را پیدا کن. سپس غیرفعال کن یا نام و نوعش را بخوان. این یعنی کنترل رفتار فرم.
// غیرفعال کردن یک دکمه;
const btn = document.getElementById("myBtn");
btn.disabled = true;
// نام و نوع و مقدار دکمه;
const b = document.getElementById("myBtn");
console.log(b.name);
console.log(b.type);
console.log(b.value);
// متن نمایشی روی دکمه;
const btn2 = document.getElementById("myBtn");
console.log(btn2.textContent);
// دکمه متعلق به کدام فرم است;
const btn3 = document.getElementById("myBtn");
console.log(btn3.form.id);
فرم ها (Form)
«فرم (Form)» ظرف ورودی هاست. می توانی ارسال، ریست، یا ویژگی هایش را بخوانی. مثل پاک کردن برگه و نوشتن دوباره.
// ارسال فرم با کد;
const f = document.getElementById("myForm");
f.submit();
// ریست کردن فرم;
const f2 = document.getElementById("myForm");
f2.reset();
// پیمایش همه عنصرهای فرم;
const f3 = document.getElementById("myForm");
for (let i = 0; i < f3.elements.length; i++) {
console.log(f3.elements[i].value);
}
// خواندن ویژگی های فرم;
const f4 = document.getElementById("myForm");
console.log(f4.acceptCharset);
console.log(f4.action);
console.log(f4.enctype);
console.log(f4.length);
console.log(f4.method);
console.log(f4.name);
console.log(f4.target);
گزینه ها و لیست انتخابی (Select/Option)
«لیست کشویی (Select)» چند گزینه دارد. می توانی غیرفعال کنی، چندانتخابی کنی، یا متن گزینه را عوض کنی. مثل برگه انتخاب درس.
// غیرفعال و فعال کردن لیست;
const sel = document.getElementById("mySelect");
sel.disabled = true;
sel.disabled = false;
// شمارش گزینه ها و نمایش انتخاب شده;
const s = document.getElementById("mySelect");
console.log(s.length);
console.log(s.options[s.selectedIndex].text);
// چندانتخابی و تغییر متن گزینه;
const s2 = document.getElementById("mySelect");
s2.multiple = true;
s2.options[0].text = "New Text";
// حذف گزینه ها از لیست;
const s3 = document.getElementById("mySelect");
s3.remove(0);
نکته: قبل از دستکاری عناصر، وجود id درست را چک کن. سپس کد را بعد از عناصر یا در رویداد load اجرا کن.
جمع بندی سریع
- ورودی HTML را با DOM کنترل کن.
- دکمه ها را بخوان یا غیرفعال کن.
- فرم ها را ارسال یا ریست کن.
- گزینه ها را تغییر بده یا بشمار.
- همیشه در ادیتور تمرین کن.
برای مطالعه بیشتر، صفحه نمونه های DOM را ببین. همچنین Navigator برای شناخت محیط مرورگر مفید است. راهنمای ورودی HTML را نیز نشانه گذاری کن.