إستخدام HTML و JavaScript مع مدخلات المستخدم

في هذا المقال، سنتحدث عن كيفية استخدام HTML و JavaScript للتفاعل مع مدخلات المستخدم. سنقدم أمثلة على كيفية استخدام مختلف عناصر الإدخال في HTML مع JavaScript للتعامل مع بيانات المستخدم وتنفيذ الوظائف المختلفة.

استخدام الحقول النصية

لنبدأ باستخدام الحقول النصية في HTML. يمكن للمستخدمين إدخال النص في هذه الحقول ومن ثم يمكننا استخدام JavaScript للوصول إلى قيم هذه الحقول واستخدامها في البرنامج.

على سبيل المثال:

إظهار الرسالة

function showMessage() {
var username = document.getElementById(‘username’).value;
alert(‘مرحباً ‘ + username);
}

استخدام أزرار الاختيار

يمكننا أيضًا استخدام أزرار الاختيار في HTML، مثل الزرار النصي وزرار الاختيار وزرار الإرسال. يمكننا استخدام JavaScript لتنفيذ الإجراءات المناسبة عند النقر على هذه الأزرار.

مثال على زر النقر:

تغيير لون الخلفية

function changeColor() {
document.body.style.backgroundColor = ‘yellow’;
}

استخدام حقول الاختيار

يمكننا أيضًا استخدام حقول الاختيار في HTML، مثل حقول الاختيار وحقول الاختيار المتعدد. يمكننا استخدام JavaScript للوصول إلى القيم المختارة وتنفيذ الإجراءات المناسبة.

مثال على حقل الاختيار:

Volvo
Saab
Mercedes
Audi

عرض السيارة المختارة

function showCar() {
var selectedCar = document.getElementById(‘cars’).value;
alert(‘السيارة المختارة هي: ‘ + selectedCar);
}