فرم های HTML اجزای ضروری اکثر وب سایت ها و برنامه های وب هستند. آنها تعامل بین کاربران و آن وب سایت ها را امکان پذیر می کنند و یک مفهوم کلیدی برای توسعه دهندگان وب هستند که درک کنند.

این راهنمای جامع جنبه‌های مختلف فرم‌های HTML، از نحوه ایجاد و ساختار فرم‌ها تا تعامل جاوا اسکریپت و اعتبارسنجی فرم را پوشش می‌دهد.

درک نحوه کار با فرم‌ها به‌صورت برنامه‌ریزی به شما امکان می‌دهد تا ورودی کاربر را تأیید و ضبط کنید، موارد ارسالی را مدیریت کنید و تجربه کلی کاربر را ارتقا دهید.

با پیروی از مثال‌ها و بهترین شیوه‌های ارائه‌شده در این راهنما، به دانش لازم برای ایجاد فرم‌های وب قوی که تجربه کاربر را افزایش می‌دهد و جمع‌آوری و ارسال یکپارچه داده‌ها را تسهیل می‌کند، مجهز می‌شوید.

چه یک مبتدی یا یک توسعه دهنده با تجربه باشید، این راهنما به عنوان یک منبع ارزشمند برای درک و پیاده سازی فرم های HTML به طور موثر در پروژه های وب شما عمل می کند.

پیش نیازها:

برای درک کامل مفاهیم مورد بحث در این آموزش، درک اولیه اصول جاوا اسکریپت توصیه می شود. آشنایی با فرم های HTML نیز برای درک و به کارگیری مطالب پوشش داده شده مفید خواهد بود.

اگر با جاوا اسکریپت تازه کار هستید، توصیه می شود قبل از ورود به این آموزش، خود را با متغیرها، انواع داده ها، توابع، حلقه ها و تکنیک های اصلی دستکاری DOM آشنا کنید. این دانش بنیادی تجربه یادگیری روان‌تری را تسهیل می‌کند، زیرا ما موضوعات پیشرفته‌تر مربوط به مدیریت فرم در جاوا اسکریپت را تحلیل می‌کنیم.

فهرست مطالب

آشنایی با فرم های HTML
- مقدمه ای بر عناصر فرم HTML
– جاوا اسکریپت و مدیریت فرم
- دسترسی به فیلدهای فرم
– مثال: فرم ثبت نام

نحوه ایجاد دکمه های رادیویی
– جاوا اسکریپت برای مدیریت انتخاب دکمه رادیویی
– رویداد تغییر دکمه رادیویی

چک باکس ها
- نحوه تحلیل اینکه آیا یک چک باکس علامت زده شده است
– نحوه دریافت مقادیر چک باکس
- چگونه چک باکس های متعدد را مدیریت کنیم
– نحوه تحلیل / برداشتن علامت همه چک باکس ها
- نحوه ایجاد پویا چک باکس

عنصر را انتخاب کنید
– نحوه تعامل با یک عنصر انتخابی
– نحوه دسترسی به گزینه ها با جاوا اسکریپت
- نحوه مدیریت چندین انتخاب
– مثال: Task Manager

تفاوت بین رویداد تغییر و ورودی

نتیجه

قبل از شروع، در اینجا یک نکته قابل توجه است:

این یک وبلاگ پیگیری در این کتابچه راهنمای DOM و رویدادها است و ارتباطات سمت سرور/فرم سمت سرور را در این وبلاگ پوشش نمی‌دهد، زیرا شامل موضوعات پیشرفته‌ای مانند AJAX (جاوا اسکریپت ناهمزمان و XML)، وعده‌ها، مدیریت خطا و مدیریت است. عملیات ناهمزمان در جاوا اسکریپت

در این آموزش، ما در عوض بر نحوه کار با عناصر فرم مختلف از جمله دکمه های رادیویی، چک باکس ها و عناصر انتخابی، و همچنین تولید پویا و تعامل با آنها با استفاده از جاوا اسکریپت تمرکز خواهیم کرد.

پرداختن به ارتباطات سمت سرور فراتر از محدوده این مقاله است، که هدف آن ارائه یک درک جامع از دستکاری DOM و مدیریت رویداد در چارچوب عناصر فرم است.

آشنایی با فرم های HTML

فرم های HTML عناصر اساسی هستند که برای جمع آوری و ارسال داده های کاربر در وب استفاده می شوند. آنها تعامل بین کاربران و وب سایت ها را با اجازه دادن به کاربران برای وارد کردن اطلاعات، انتخاب و ارسال داده ها به سرورها برای پردازش امکان پذیر می کنند.

مقدمه ای بر عناصر فرم HTML

فرم های HTML با استفاده از عنصر <form> ایجاد می شوند که به عنوان یک محفظه برای عناصر ورودی مختلف عمل می کند. عناصر فرم رایج شامل فیلدهای متنی، چک باکس ها، دکمه های رادیویی، منوهای کشویی و دکمه ها هستند.

برای ارجاع به فرم در JS، می‌توانید از متدهای DOM مانند getElementById() یا document.forms استفاده کنید. document.forms مجموعه ای از فرم ها را برمی گرداند و شما می توانید با استفاده از یک فهرست، نام یا شناسه به فرم خاصی دسترسی داشته باشید.

 const form = document.getElementById('signup'); const firstForm = document.forms[0]; // accessing first form const formByName = document.forms['formName']; // accessing form by name const formById = document.forms['formId']; // accessing form by id

بیایید یک مثال اساسی از یک فرم HTML را ببینیم:

 <form> <label for="username">Username:</label> <input type="text" id="username" name="username"><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br> <input type="submit" value="Submit"> </form>

در این مثال، یک فرم با دو فیلد ورودی برای نام کاربری و رمز عبور به همراه یک دکمه ارسال داریم.

ساختار فرم و ویژگی ها

فرم های HTML می توانند ویژگی های مختلفی داشته باشند که رفتار و ظاهر آنها را کنترل می کند. برخی از ویژگی های رایج عبارتند از:

action: نشانی اینترنتی را که داده های فرم باید در آن ارسال شوند را مشخص می کند.

متد: روش HTTP مورد استفاده برای ارسال داده های فرم ( post یا get ) را مشخص می کند.

target : محل نمایش پاسخ پس از ارسال فرم را مشخص می کند (مثلاً _self , _blank , _parent , _top ).

name : برای اهداف شناسایی نامی را به فرم اختصاص می دهد.

در اینجا نمونه ای از فرم با ویژگی های action، متد و هدف آورده شده است:

 <form action="/submit-form" method="POST" name="myForm" target="_blank"> <!-- Form elements go here --> </form>

جاوا اسکریپت و مدیریت فرم

جاوا اسکریپت از شی HTMLFormElement برای نمایش فرم استفاده می کند. این شی دارای ویژگی های مربوط به action و method ویژگی های HTML است.

متدهایی مانند submit() و reset() برای ارسال و تنظیم مجدد فرم ها استفاده می شود.

 const form = document.getElementById('signup'); form.action; // returns the action attribute form.method; // returns the method attribute form.submit(); // submits the form

جاوا اسکریپت Handlers رویداد را برای گفت ن تعامل به فرم های HTML فراهم می کند. با استفاده از این رویدادها، می توانید اسکریپت های سفارشی را در پاسخ به اقدامات کاربر در فرم اجرا کنید:

ارسال رویداد : یک فرم معمولا دارای یک دکمه ارسال است که با کلیک بر روی آن، داده های فرم را به سرور ارسال می کند. این با استفاده از عنصر <input> یا <button> با type="submit" به دست می آید.

 <input type="submit" value="Sign Up"> // or <button type="submit">Sign Up</button>

برای پیوست کردن شنونده رویداد به رویداد ارسال، از متد addEventListener() استفاده می کنید. در اینجا یک مثال است:

 const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // Custom validation and submission logic here });

در بسیاری از موارد، ممکن است بخواهید رفتار پیش‌فرض ارسال فرم را رهگیری کنید و قبل از اجازه دادن به فرم برای ارسال به سرور، منطق سفارشی را اجرا کنید. برای این کار می توانید از preventDefault() استفاده کنید. مثال:

 const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { event.preventDefault(); // Prevents the default form submission // Custom validation and submission logic here });

بدون event.preventDefault() ، هرگونه اعتبار سنجی سفارشی و منطق ارسال همچنان در شنونده رویداد اجرا می شود، اما رفتار پیش فرض ارسال فرم جلوگیری نمی شود.

بازنشانی رویداد : رویداد reset زمانی فعال می‌شود که فرم با استفاده از دکمه بازنشانی یا برنامه‌ریزی بازنشانی شود. ما از متد reset() برای پاک کردن تمام فیلدهای فرم و بازنشانی آنها به مقادیر پیش فرض استفاده می کنیم.

 document.querySelector('form').addEventListener('reset', function(event) { // Custom form reset logic here });

نحوه دسترسی به فیلدهای فرم

شما می توانید با استفاده از متدهای DOM مانند getElementsByName() , getElementById() , querySelector() و غیره به فیلدهای فرم دسترسی داشته باشید.

ویژگی form.elements مجموعه ای از عناصر فرم را ذخیره می کند. شما می توانید با فهرست، شناسه یا نام به این عناصر دسترسی داشته باشید. در اینجا یک مثال است:

 const form = document.getElementById('signup'); const nameField = form.elements['name']; // accessing element by name const emailField = form.elements['email']; // accessing element by name const firstElement = form.elements[0]; // accessing first element by index no.

هنگامی که به یک فیلد فرم دسترسی پیدا کردید، می توانید از ویژگی value برای دسترسی به مقدار آن استفاده کنید. در اینجا یک مثال است:

 const nameValue = nameField.value; const emailValue = emailFieldByName.value;

اعتبار سنجی فرم

اعتبار سنجی فرم یکی از جنبه های ضروری توسعه وب است که اطمینان حاصل می کند که داده های ارسال شده توسط کاربران قبل از پردازش توسط سرور، دقیق و مطابق با معیارهای مشخص شده است. اعتبارسنجی های رایج شامل تحلیل فیلدهای خالی، قالب های ایمیل معتبر و غیره است.

اعتبار سنجی فرم HTML

HTML5 اعتبار فرم داخلی را از طریق ویژگی های مختلف فراهم می کند:

الزامی : مشخص می کند که یک فیلد باید پر شود.

pattern : یک الگوی عبارت منظم را مشخص می کند که مقدار ورودی باید مطابقت داشته باشد.

min and max : حداقل و حداکثر مقدار را برای یک فیلد ورودی مشخص کنید.

maxlength و minlength : حداکثر و حداقل طول ورودی را مشخص کنید

type : نوع ورودی مورد انتظار را مشخص می کند (به عنوان مثال، ایمیل، شماره، تاریخ).

در اینجا نمونه ای از اعتبار سنجی فرم HTML با استفاده از این ویژگی ها آورده شده است:

 <form> <label for="username">Username:</label> <input type="text" id="username" name="username" required minlength="3" maxlength="15"><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br> <label for="age">Age:</label> <input type="number" id="age" name="age" min="18" max="99"><br> <input type="submit" value="Submit"> </form>

اعتبار سنجی فرم جاوا اسکریپت

جاوا اسکریپت به توسعه دهندگان اجازه می دهد تا منطق اعتبار سنجی پیچیده تری را فراتر از آنچه ویژگی های HTML ارائه می دهند انجام دهند. شنوندگان رویداد را می توان به عناصر تشکیل داد تا اعتبارسنجی را به صورت پویا انجام دهد.

در اینجا یک مثال اساسی از اعتبار سنجی فرم جاوا اسکریپت آورده شده است:

 const form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); // Prevent form submission // Perform custom validation logic const email = document.getElementById('email').value; const password = document.getElementById('password').value; if (!emailIsValid(email)) { alert('Please enter a valid email address.'); return; } if (password.length < 6) { alert('Password must be at least 6 characters long.'); return; } // If validation passes, submit the form form.submit(); }); function emailIsValid(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); }

در این مثال، تابع JavaScript emailIsValid() از یک عبارت معمولی برای اعتبارسنجی قالب ایمیل استفاده می کند. شنونده رویداد submit از ارسال فرم در صورت عدم موفقیت در اعتبار سنجی جلوگیری می کند و پیام های خطای سفارشی به کاربر نمایش داده می شود.

بیایید یک مثال را ببینیم: فرم ثبت نام

اکنون، بیایید تمام مفاهیمی را که پوشش داده‌ایم در یک مثال کامل از یک فرم ثبت نام با اعتبارسنجی سمت مشتری با استفاده از جاوا اسکریپت ترکیب کنیم:

 <!DOCTYPE html> <html> <body> <h2>User Registration</h2> <form id="registrationForm"> <div> <label for="username">Username:</label> <input type="text" id="username" name="username" /> </div> <div> <label for="email">Email:</label> <input type="email" id="email" name="email" /> </div> <div> <label for="password">Password:</label> <input type="password" id="password" name="password" /> </div> <div> <input type="submit" value="Register" /> </div> </form> <div id="errorMessages"></div> <script src="script.js"></script> </body> </html>

ساختار HTML : ما یک فرم ثبت نام ساده با فیلدهای نام کاربری، ایمیل، رمز عبور و دکمه ارسال داریم. همچنین یک کانتینر div ( errorMessages ) برای نمایش پیام‌های خطای اعتبارسنجی وجود دارد.

حالا بیایید کد جاوا اسکریپت بنویسیم تا ارسال فرم را مدیریت کنیم و اعتبار سنجی سمت مشتری را انجام دهیم:

 const registrationForm = document.getElementById("registrationForm"); const errorMessages = document.getElementById("errorMessages"); registrationForm.addEventListener("submit", function (event) { event.preventDefault(); // Prevent form submission // Retrieve form field values const username = document.getElementById("username").value; const email = document.getElementById("email").value; const password = document.getElementById("password").value; // Clear previous error messages errorMessages.innerHTML = ""; // Perform form validation if (!username.trim()) { displayError("Username is required."); return; } if (!email.trim() || !isValidEmail(email)) { displayError("Please enter a valid email address."); return; } if (!password.trim() || !isStrongPassword(password)) { displayError( "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character." ); return; } // If validation passes, submit the form (in a real scenario, this could be an AJAX call to the server) alert("Registration successful!"); registrationForm.reset(); // Clear form fields }); function displayError(message) { const errorMessage = document.createElement("div"); errorMessage.className = "error"; errorMessage.textContent = message; errorMessages.appendChild(errorMessage); } function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); } function isStrongPassword(password) { let pattern = /^(?=.*\d)(?=.*[az])(?=.*[AZ])(?=.*[!@#$%^&*]).{8,}$/; return pattern.test(password); }

جاوا اسکریپت Handling : فرم و محفظه پیام خطا را با استفاده از getElementById انتخاب می کنیم. ما یک شنونده رویداد را به رویداد ارسال فرم پیوست می کنیم. هنگامی که فرم ارسال می شود، با استفاده از event.preventDefault() برای رسیدگی به ارسال فرم به صورت دستی از رفتار پیش فرض آن جلوگیری می کنیم.

اعتبار سنجی فرم : ما مقادیر نام کاربری، ایمیل و رمز عبور را بازیابی می کنیم.

ما اعتبار سنجی اولیه را انجام می دهیم: نام کاربری نباید خالی باشد، ایمیل باید با فرمت معتبر باشد، رمز عبور باید حداقل 8 کاراکتر داشته باشد و حداقل یک حرف بزرگ، یک حرف کوچک، یک رقم و یک نویسه خاص داشته باشد.

Error Handling : در صورت عدم موفقیت در اعتبارسنجی، پیام خطای مربوطه را نمایش می دهیم. پیام های خطا در errorMessages div نمایش داده می شوند.

بازنشانی فرم : پس از ثبت نام موفقیت آمیز (در این مورد، یک هشدار ساده)، فرم را با استفاده از registrationForm.reset() بازنشانی می کنیم.

در حال حاضر، کد از یک alert برای نشان دادن ثبت موفقیت آمیز استفاده می کند. در یک سناریوی واقعی، ممکن است بخواهید یک فراخوانی AJAX را اجرا کنید تا داده ها را برای پردازش به یک سرور ارسال کنید و پاسخ را مطابق با آن مدیریت کنید، اما همانطور که در ابتدای این آموزش ذکر شد، این چیزی نیست که ما در مورد آن صحبت کنیم.

به طور کلی این مثال ایجاد فرم، مدیریت فرم با جاوا اسکریپت، اعتبار سنجی فرم با استفاده از عبارات منظم، و نمایش پیام خطای سفارشی پویا را پوشش می دهد، که یک فرم ثبت نام کاربری اولیه با اعتبار سنجی سمت مشتری را نشان می دهد.

دکمه های رادیویی

دکمه های رادیویی یک عنصر فرم رایج هستند که برای انتخاب یک گزینه از مجموعه ای از گزینه ها استفاده می شود. در جاوا اسکریپت، می‌توانید دکمه‌های رادیویی را برای بازیابی انتخاب‌های کاربر و انجام اقدامات بر اساس آن انتخاب‌ها دستکاری کنید.

نحوه ایجاد دکمه های رادیویی

می‌توانید از دکمه‌های رادیویی استفاده کنید که می‌خواهید کاربران فقط یک گزینه را از مجموعه‌ای از گزینه‌ها انتخاب کنند. در HTML، می‌توانید دکمه‌های رادیویی را با استفاده از عنصر <input> با ویژگی type تنظیم شده روی "radio" ایجاد کنید. گروهی از دکمه های رادیویی با ویژگی name یکسان یک گروه رادیویی را تشکیل می دهند.

در اینجا یک مثال است:

 <!DOCTYPE html> <html> <body> <form id="languageForm"> <p>Select your favorite programming language:</p> <div> <input type="radio" name="language" value="JavaScript" id="js" /> <label for="js">JavaScript</label> </div> <div> <input type="radio" name="language" value="Python" id="python" /> <label for="python">Python</label> </div> <div> <input type="radio" name="language" value="Java" id="java" /> <label for="java">Java</label> </div> <!-- More language options can be added here --> </form> </body> </html>

شما از id و for ویژگی‌ها برای دسترسی استفاده می‌کنید و برچسب را به دکمه رادیویی مربوطه پیوند می‌دهید.

نحوه بازیابی مقدار انتخاب شده دکمه رادیویی

اکنون، بیایید در مورد چگونگی بازیابی مقدار دکمه رادیویی انتخاب شده با استفاده از جاوا اسکریپت بحث کنیم.

 <!-- HTML --> <button id="btn">Show Selected Language</button> <p id="output"></p> <script> const btn = document.querySelector("#btn"); const radioButtons = document.querySelectorAll('input[name="language"]'); const output = document.getElementById("output"); btn.addEventListener("click", () => { let selectedLanguage; for (const radioButton of radioButtons) { if (radioButton.checked) { selectedLanguage = radioButton.value; break; } } // Displaying the output: output.innerText = selectedLanguage ? `You selected ${selectedLanguage}` : `You haven't selected any language`; }); </script>

این کد به این صورت است: کد جاوا اسکریپت با انتخاب دکمه، دکمه‌های رادیویی و عناصر خروجی از سند HTML مقداردهی اولیه می‌شود. ما یک شنونده رویداد کلیکی را به عنصر دکمه اضافه می کنیم. هنگامی که دکمه کلیک می شود، عملکرد درون شنونده رویداد اجرا می شود.

در داخل شنونده رویداد کلیک، روی همه دکمه‌های رادیویی در مجموعه radioButtons تکرار می‌کنیم. ما تحلیل می کنیم که آیا یک دکمه رادیویی با استفاده از ویژگی checked آن تحلیل شده است یا خیر. اگر یک دکمه رادیویی علامت زده شود، مقدار آن را به متغیر selectedLanguage اختصاص می دهیم و با استفاده از break از حلقه خارج می شویم.

ما محتوای عنصر خروجی (برچسب <p> با output شناسه) را بر اساس انتخاب یک زبان به روز می کنیم. اگر زبانی انتخاب شده باشد ( selectedLanguage is true)، پیامی را نشان می دهیم که زبان انتخاب شده را نشان می دهد. در غیر این صورت از کاربر قصد داریم زبانی را انتخاب کند.

رویداد تغییر دکمه رادیویی

هنگامی که یک دکمه رادیویی علامت زده می شود یا علامت آن برداشته می شود، یک رویداد change را اجرا می کند. می توانید با استفاده از addEventListener() به این رویداد گوش دهید. در کنترل کننده رویداد، می توانید با استفاده از this.checked و this.value به وضعیت و مقدار علامت زده شده دکمه رادیویی دسترسی داشته باشید.

 radioButton.addEventListener('change', function (e) { if (this.checked) { console.log(this.value); } });

نحوه تولید پویا دکمه های رادیویی

اکنون، بیایید نحوه تولید پویا دکمه‌های رادیویی با استفاده از جاوا اسکریپت را تحلیل کنیم. این زمانی مفید است که می خواهید گزینه های دکمه رادیویی را به صورت پویا بر اساس معیارها یا داده های خاصی ایجاد کنید.

فرض کنید آرایه ای از رنگ ها داریم و قصد داریم به صورت پویا دکمه های رادیویی را برای هر گزینه رنگی تولید کنیم:

 <!DOCTYPE html> <html> <body> <div id="languages"></div> <script> const languageOptions = ["Python", "Javascript", "C++", "Java"]; // Generate the radio buttons const languages = document.querySelector("#languages"); languages.innerHTML = languageOptions.map((language) => ` <div> <input type="radio" name="language" value="${language}" id="${language}"> <label for="${language}">${language}</label> </div>`).join(' '); </script> </body> </html>

این به صورت پویا دکمه های رادیویی را بر اساس آرایه languageOptions تولید می کند و آنها را در عنصر ظرف ( <div id="languages"></div> ) وارد می کند. هر دکمه رادیویی یک شناسه و مقدار منحصر به فرد مربوط به نام زبان دارد و برچسب ها با استفاده از ویژگی for با دکمه های رادیویی مربوطه مرتبط می شوند.

پس از ایجاد پویا دکمه‌های رادیویی، اکنون اجازه دهید شنونده‌های رویداد change به آنها اضافه کنیم تا تغییرات در انتخاب را مدیریت کنیم.

 <!-- HTML --> <div id="languages"></div> <div id="languageOutput"></div> // we create this one to fetch our selected language output <!-- Generate the radio buttons --> // Attaching Change Event Listeners const radioButtons = document.querySelectorAll('input[name="language"]'); for (const radioButton of radioButtons) { radioButton.addEventListener('change', showSelectedlanguage); } // Handling the Change Event function showSelectedlanguage() { if (this.checked) { document.querySelector('#languageOutput').innerText = `You selected ${this.value}`; } }

در اینجا چیزی است که اتفاق می افتد:

ما همه دکمه‌های رادیویی را انتخاب می‌کنیم که ویژگی name روی "language" تنظیم شده است.

ما از یک حلقه for...of برای تکرار روی هر دکمه رادیویی و اضافه کردن شنونده رویداد change به هر دکمه رادیویی استفاده می کنیم. این شنونده به تغییرات در وضعیت دکمه‌های رادیویی گوش می‌دهد، یعنی زمانی که یک دکمه رادیویی انتخاب شده یا از حالت انتخاب خارج می‌شود.

ما تابعی به نام showSelectedLanguage تعریف می کنیم تا رویداد تغییر ایجاد شده با انتخاب یک دکمه رادیویی را مدیریت کند.

در داخل تابع showSelectedLanguage ، ابتدا تحلیل می کنیم که آیا دکمه رادیویی فعلی ( this ) با استفاده از ویژگی checked تحلیل شده است یا خیر. اگر دکمه رادیویی علامت زده شود، محتوای متنی یک عنصر را با شناسه languageOutput با استفاده از document.querySelector('#languageOutput') به روز می کنیم. این عنصر به عنوان یک مکان نگهدار برای نمایش زبان انتخاب شده عمل می کند.

این تنظیمات تضمین می‌کند که دکمه‌های رادیویی ایجاد شده به‌صورت پویا شنونده‌های رویداد change به آن‌ها متصل کرده‌اند و امکان مدیریت پویا انتخاب‌های کاربر را فراهم می‌کنند.

چک باکس ها

چگونه یک چک باکس HTML ایجاد کنیم

بیایید ابتدا یک چک باکس با استفاده از عنصر <input> ایجاد کنیم و ویژگی را تایپ کنیم که روی "checkbox" تنظیم شده است. بیایید برای دسترسی بهتر آن را با برچسب مرتبط کنیم.

 <label for="agree"> <input type="checkbox" id="agree" name="agree" value="yes"> I agree to the terms </label>

چگونه تحلیل کنیم که چک باکس علامت زده شده است

یک چک باکس در HTML می‌تواند در دو حالت وجود داشته باشد: علامت زده و بدون علامت. و ما می توانیم با استفاده از ویژگی checked مشخص کنیم که کدام فعال است. اگر true باشد، چک باکس علامت زده می شود - در غیر این صورت، علامت آن برداشته شده است. مثال:

 <!DOCTYPE html> <html> <body> <label for="agree"> <input type="checkbox" id="agree" name="agree"> I agree to the terms </label> <script> const checkbox = document.getElementById('agree'); console.log(checkbox.checked); </script> </body> </html>

نحوه دریافت مقادیر چک باکس

در فرم‌های HTML، هنگامی که یک چک باکس علامت زده می‌شود و فرم ارسال می‌شود، مرورگر چک باکس را در داده‌های فرم با ویژگی name خود به عنوان کلید و ویژگی value (در صورت مشخص شدن) را به عنوان مقدار درج می‌کند. اما اگر علامت چک باکس را بردارید، اصلاً در داده‌های فرم گنجانده نشده است.

 <label for="agree"> <input type="checkbox" id="agree" name="agree"> I agree to the terms </label> <button id="btn">Show Value</button> <script> const checkbox = document.querySelector('#agree'); const btn = document.querySelector('#btn'); btn.onclick = () => { alert(checkbox.value); }; </script>

پس اساساً نکته این است: وقتی یک چک باکس علامت زده می‌شود و در فرم ارسالی گنجانده می‌شود، در صورتی که هیچ ویژگی value برای عنصر ورودی چک باکس به‌صراحت تعریف نشده باشد، مرورگر پیش‌فرض 'on' عنوان مقدار ارسال می‌کند. برای اینکه با استفاده از جاوا اسکریپت وضعیت چک باکس را با دقت کنترل کنید، به جای تکیه بر ویژگی value ، از ویژگی checked استفاده کنید.

نحوه مدیریت چند چک باکس

گاهی اوقات، ممکن است لازم باشد با چندین چک باکس با یک نام کار کنید و بخواهید مقادیر چک باکس های انتخاب شده را بازیابی کنید. در اینجا یک مثال است:

 <!DOCTYPE html> <html> <body> <p>Select your preferred languages:</p> <label for="l1"> <input type="checkbox" name="language" value="C++" id="l1" />C++ </label> <label for="l2"> <input type="checkbox" name="language" value="Python" id="l2" />Python </label> <label for="l3"> <input type="checkbox" name="language" value="Java" id="l3" />Java </label> <p> <button id="btn">Get Selected Languages</button> </p> <script> const btn = document.querySelector("#btn"); btn.addEventListener("click", () => { const checkboxes = document.querySelectorAll( 'input[name="language"]:checked' ); const selectedLanguages = Array.from(checkboxes).map( (checkbox) => checkbox.value ); alert("Selected Languages: " + selectedLanguages.join(", ")); }); </script> </body> </html>

در این مثال، ما چک باکس هایی برای انتخاب زبان های برنامه نویسی ترجیحی داریم.

هنگامی که دکمه کلیک می شود، شنونده رویداد را فعال می کند. در شنونده رویداد، همه چک باکس‌هایی را با ویژگی نام "language" انتخاب می‌کنیم.

سپس NodeList را که توسط querySelectorAll() برگردانده شده است با استفاده از Array.from() به یک آرایه تبدیل می کنیم.

در نهایت، روی آرایه نقشه می‌زنیم تا مقادیر چک‌باکس‌های انتخاب‌شده را بازیابی کنیم و با استفاده از alert() نمایش دهیم.

نحوه تیک زدن / برداشتن علامت همه چک باکس ها

اکنون، بیایید یک عملکرد ایجاد کنیم تا همه چک باکس ها را به طور همزمان علامت بزنیم یا علامت آن را برداریم:

 <!DOCTYPE html> <html> <body> <p> <button id="btn">Check / Uncheck All</button> </p> <p>Select your preferred languages:</p> <label for="l1"> <input type="checkbox" name="language" value="C++" id="l1" />C++ </label> <label for="l2"> <input type="checkbox" name="language" value="Python" id="l2" />Python </label> <label for="l3"> <input type="checkbox" name="language" value="Java" id="l3" />Java </label> <script src="script.js"></script> </body> </html>

کد جاوا اسکریپت:

 // function to check or uncheck all checkboxes function check(checked = true) { const checkboxes = document.querySelectorAll('input[name="language"]'); // Iterate through each checkbox checkboxes.forEach((checkbox) => { // Set the checked property of each checkbox to the value of the 'checked' parameter checkbox.checked = checked; }); } // function to check all checkboxes and change button behavior to uncheck all function checkAll() { check(); this.onclick = uncheckAll; } // function to uncheck all checkboxes and change button behavior to check all function uncheckAll() { check(false); this.onclick = checkAll; } const btn = document.querySelector("#btn"); btn.onclick = checkAll;

در این مثال، ما یک دکمه با عنوان "Check / Uncheck All" داریم.

هنگامی که دکمه برای اولین بار کلیک می شود، در نظر گرفته شده است که تمام چک باکس ها را علامت بزنید. پس ، تابع checkAll برای انجام این عمل اختصاص داده شده است ( const btn = document.querySelector("#btn"); ).

اگر دوباره روی دکمه کلیک شود، علامت تمام چک باکس ها را بردارید. ما توابع check() ، checkAll() و uncheckAll() برای تحلیل و برداشتن چک باکس ها تعریف می کنیم.

ما در ابتدا checkAll() به رویداد onclick دکمه اختصاص می دهیم و سپس بر اساس وضعیت فعلی چک باکس ها بین checkAll() و uncheckAll() جابجا می شویم.

رویکرد جایگزین می تواند این باشد:

 function checkAll(checked = true) { const checkboxes = document.querySelectorAll('input[name="language"]'); checkboxes.forEach((checkbox) => { checkbox.checked = checked; }); } const btn = document.querySelector("#btn"); btn.addEventListener("click", () => { // Find the first checkbox with the name attribute set to 'language' const firstCheckbox = document.querySelector('input[name="language"]'); // Check if the first checkbox is checked const isChecked = firstCheckbox.checked; // Call the checkAll function with the opposite state of the first checkbox checkAll(!isChecked); });

در اینجا، اولین چک باکس با نام "زبان" را انتخاب می کنیم تا وضعیت علامت گذاری شده فعلی آن مشخص شود. سپس، checkAll() با حالت مخالف فراخوانی می کنیم.

نحوه تولید پویا چک باکس

 <!DOCTYPE html> <html> <body> <div id="languages"></div> <script> const languageOptions = ["Python", "Javascript", "C++", "Java"]; // Generate the checkboxes const html = languageOptions .map( (language) => `<label for="language-${language}"> <input type="checkbox" name="language" id="language-${language}" value="${language}"> ${language} </label>` ) .join(" "); document.querySelector("#languages").innerHTML = html; </script> </body> </html>

در اینجا نحوه کار آن آمده است:

ما یک آرایه languageOptions تعریف می کنیم که شامل نام زبان ها باشد.

ما از متد map() برای تکرار از طریق آرایه languageOptions استفاده می کنیم و برای هر زبان آرایه ای از رشته های HTML ایجاد می کنیم.

هر رشته HTML شامل یک عنصر label مرتبط با یک چک باکس input است. چک باکس input شامل ویژگی های مناسبی مانند type ، name ، id و value است که به صورت پویا از نام زبان مشتق شده اند.

ما آرایه رشته های HTML را با استفاده از join(' ') به یک رشته متصل می کنیم.

در نهایت، ما ویژگی innerHTML عنصر ریشه <div> را با languages id روی رشته HTML ایجاد شده تنظیم می‌کنیم، پس چک باکس‌هایی را برای هر زبان برنامه‌نویسی ارائه می‌کنیم.

انتخاب عنصر:

عنصر <select> در HTML یک فهرست کشویی از گزینه ها را برای کاربران فراهم می کند. امکان انتخاب تک یا چندگانه را فراهم می کند. مثال:

 <select id="cities"> <option value="JAI">Jaipur</option> <option value="DEL">New Delhi</option> <option value="UDR">Udaipur</option> <option value="MUM">Mumbai</option> </select>

به طور پیش فرض، یک عنصر <select> امکان انتخاب واحد را فراهم می کند. برای فعال کردن چندین انتخاب، ویژگی multiple را اضافه کنید.

 <select id="cities" multiple>

کاربران اکنون می توانند با نگه داشتن کلید Ctrl (یا Cmd در Mac) در حین کلیک کردن، چندین میوه را انتخاب کنند.

نحوه تعامل با یک عنصر انتخابی:

برای تعامل با عنصر <select> با استفاده از جاوا اسکریپت، از نوع HTMLSelectElement استفاده می کنیم که ویژگی های مفیدی مانند selectedIndex و value را ارائه می دهد. مثال:

 <script> const selectElement = document.getElementById('cities'); console.log(selectElement.selectedIndex); // Returns the index of the selected option console.log(selectElement.value); // Returns the value of the selected option console.log(selectElement.multiple); // Returns true if multiple selections are allowed </script>

جاوا اسکریپت به شما امکان می دهد رویدادها را در عنصر <select> مدیریت کنید، مانند زمانی که کاربر یک گزینه را انتخاب می کند. مثال:

 <button id="btn">Get Selected City</button> <script> const btn = document.querySelector("#btn"); const selectElement = document.getElementById("cities"); btn.onclick = (event) => { event.preventDefault(); const selectedCity = selectElement.options[selectElement.selectedIndex].text; alert(`Selected city: ${selectedCity}, Index: ${selectElement.selectedIndex}`); }; </script>

استفاده از ویژگی value : ویژگی value نشان دهنده مقدار گزینه انتخاب شده است. بیایید با مثال آن را درک کنیم:

 <select id="cities"> <option value="">Jaipur</option> <option value="DEL">New Delhi</option> <option value="UDR">Udaipur</option> <option>Mumbai</option> </select>

 const btn = document.querySelector("#btn"); const selectElement = document.querySelector("#cities"); btn.onclick = (event) => { event.preventDefault(); alert(selectElement.value); };

اگر "جایپور" انتخاب شده باشد، به این معنی است که ما یک رشته خالی داریم زیرا ویژگی value در Html ما خالی است.

اگر گزینه ای فاقد صفت مقدار باشد، ویژگی value جعبه select به متن گزینه انتخاب شده تبدیل می شود. مثال: اگر "Mumbai" انتخاب شده باشد، ویژگی مقدار "Mumbai" است.

اگر چند گزینه انتخاب شده باشد، ویژگی value کادر انتخاب بر اساس قوانین قبلی از اولین گزینه انتخاب شده به دست می آید.

نحوه دسترسی به گزینه ها با جاوا اسکریپت

نوع HTMLOptionElement عناصر <option> را در یک عنصر <select> در جاوا اسکریپت نشان می دهد. برای دسترسی به اطلاعات مربوط به هر گزینه، ویژگی هایی مانند index ، selected ، text و value را فراهم می کند.

 const selectElement = document.getElementById('cities'); const secondOptionText = selectElement.options[1].text; // Accessing text of the second option const secondOptionValue = selectElement.options[1].value; // Accessing value of the second option

نحوه مدیریت چندین انتخاب:

هنگامی که یک عنصر <select> به چندین انتخاب اجازه می‌دهد، می‌توانید از طریق گزینه‌های آن تکرار کنید تا ببینید کدام یک انتخاب شده‌اند و مقادیر متنی آن‌ها را بازیابی کنید.

 const selectElement = document.getElementById('cities'); const selectedOptions = Array.from(selectElement.options).filter(option => option.selected); const selectedValues = selectedOptions.map(option => option.text);

خروجی یک آرایه حاوی متنی از گزینه های انتخاب شده خواهد بود. به جای آن می توانیم از option.value برای بدست آوردن آرایه ای از مقادیر استفاده کنیم. مثال:

 <!DOCTYPE html> <html> <body> <select id="cities" multiple> <option value="JAI">Jaipur</option> <option value="DEL">New Delhi</option> <option value="UDR">Udaipur</option> <option value="MUM">Mumbai</option> </select> <button id="btn">Get Selected Cities</button> <script> const btn = document.querySelector("#btn"); const selectElement = document.querySelector("#cities"); btn.onclick = (event) => { event.preventDefault(); const selectedOptions = Array.from(selectElement.options) .filter((option) => option.selected) .map((option) => option.text); alert("Selected City: " + selectedOptions.join(", ")); }; </script> </body> </html>

هنگامی که دکمه کلیک می شود، اسکریپت با فیلتر کردن گزینه ها بر اساس ویژگی selected ، گزینه های انتخاب شده را جمع آوری می کند. سپس بر روی گزینه های انتخاب شده نقشه می کشد تا محتوای متن آنها را بازیابی کند.

در نهایت زبان های انتخاب شده را در یک پیام هشدار نمایش می دهد.

بیایید یک مثال ببینیم: Task Manager ( گفت ن و حذف وظایف)

 <!DOCTYPE html> <html> <style> #container { max-width: 540px; margin: 50px auto; } form { display: flex; flex-direction: column; } </style> <body> <div id="container"> <form> <label for="task">Task:</label> <input type="text" id="task" placeholder="Enter a task" autocomplete="off" /> <button id="btnAdd">Add Task</button> <label for="taskList">Task List:</label> <select id="taskList" name="taskList" multiple></select> <button id="btnRemove">Remove Selected Tasks</button> </form> </div> <script src="script.js"></script> </body> </html>

این ساختار HTML شامل فیلدهای ورودی برای وارد کردن شرح وظایف، دکمه‌هایی برای گفت ن و حذف وظایف، و عنصر <select> برای نمایش فهرست وظایف است. برای وضوح کمی css اضافه کردیم. حالا کد جاوا اسکریپت را ببینیم:

 const btnAdd = document.querySelector('#btnAdd'); const btnRemove = document.querySelector('#btnRemove'); const taskList = document.querySelector('#taskList'); const taskInput = document.querySelector('#task'); btnAdd.onclick = (e) => { e.preventDefault(); // Validate the task input if (taskInput.value.trim() === '') { alert('Please enter a task description.'); return; } // Create a new task option const option = new Option(taskInput.value, taskInput.value); taskList.add(option, undefined); // Reset the task input taskInput.value = ''; taskInput.focus(); }; btnRemove.onclick = (e) => { e.preventDefault(); // Save the selected tasks let selectedTasks = []; for (let i = 0; i < taskList.options.length; i++) { selectedTasks[i] = taskList.options[i].selected; } // Remove selected tasks let index = taskList.options.length; while (index--) { if (selectedTasks[index]) { taskList.remove(index); } } };

توضیح: ما عناصر لازم را از HTML انتخاب می کنیم و شنوندگان رویداد را به دکمه های " گفت ن کار" و "حذف وظایف انتخاب شده" وصل می کنیم. هنگامی که دکمه " گفت ن کار" کلیک شد ، ما یک گزینه کار جدید را بر اساس مقدار فیلد ورودی ایجاد می کنیم و آن را به عنصر <select> اضافه می کنیم. هنگامی که دکمه "حذف وظایف انتخاب شده" کلیک می شود ، ما وظایف انتخاب شده را از عنصر <select> حذف می کنیم.

تفاوت بین تغییر و رویداد ورودی

رویداد ورودی در JavaScript هر زمان که مقدار یک ورودی ، <select> یا <textarea> تغییر می کند ، ایجاد می شود. بر خلاف رویداد تغییر ، که منتظر است تا یک مقدار مرتکب شود (به عنوان مثال ، هنگامی که یک ورودی تمرکز خود را از دست می دهد) ، با تغییر ارزش ، رویداد ورودی به طور مداوم آتش می گیرد. رویداد ورودی اساساً راهی برای پاسخگویی به ورودی کاربر در زمان واقعی فراهم می کند. مثال:

 <!DOCTYPE html> <html> <body> <label for="userInput">Enter Your Name:</label> <input type="text" id="userInput" placeholder="Your name"> <p>Your name is: <span id="displayName"></span></p> </body> </html>

 <script> const userInput = document.getElementById('userInput'); const Name = document.getElementById('displayName'); userInput.addEventListener('input', function() { Name.textContent = userInput.value || 'Guest!'; }); </script>

این کد JavaScript قسمت ورودی را با شناسه "userInput" و عنصر Span با شناسه "DisplayName" انتخاب می کند.

یک شنونده رویداد به رویداد ورودی قسمت UserInput وصل شده است.

هنگامی که رویداد ورودی ایجاد می شود (برای مثال ، هنگام تایپ کردن در قسمت ورودی) ، Handler Event محتوای متن دهانه displayName را به صورت پویا به روز می کند تا نام وارد شده را منعکس کند ، یا اگر قسمت ورودی خالی باشد ، "ناشناس" را نشان می دهد.

اکنون ورودی را تغییر دهید تا در اینجا تغییر کند: userInput.addEventListener('input', function() و تفاوت را مشاهده کنید.

نتیجه

با درک اصول عناصر فرم ، ویژگی ها و رویدادها می توانید فرم های وب پویا و کاربر پسند ایجاد کنید که تجربه کاربر را تقویت می کند.

JavaScript نقش مهمی در رسیدگی به ارسال فرم ها ، اعتبارسنجی ورودی کاربر و ارائه بازخورد در زمان واقعی به کاربران دارد.

از طریق نمونه های عملی و توضیحات مفصل ، در این راهنما در مورد کار با دکمه های رادیویی ، کادر انتخاب ، انتخاب عناصر و استفاده از چندین انتخاب آموخته اید.

برای ایجاد فرم های قوی و بصری برای برنامه های وب خود ، به کاوش و آزمایش با مفاهیم ارائه شده در اینجا ادامه دهید.

خبرکاو