فرم و ورودی کاربر

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

درس 6 از 10

خواندن input

برای گرفتن مقدار input، المنت را به HTMLInputElement تبدیل می‌کنی و value را می‌خوانی.

خواندن نام

import kotlinx.browser.document
import org.w3c.dom.HTMLInputElement

fun main() {
    val input = document.getElementById("name") as HTMLInputElement
    val output = document.getElementById("hello")

    document.getElementById("send")?.addEventListener("click", {
        output?.textContent = "سلام ${input.value}"
    })
}

خروجی یا نتیجه اجرا

اگر کاربر بنویسد سارا و send را بزند، خروجی می‌شود: سلام سارا

نکته کاربردی: فرم‌ها پایه لاگین، سرچ، ثبت سفارش و تنظیمات هستند. type درست المنت‌ها را جدی بگیر.

نتیجه این درس 🎯

ورودی کاربر را خواندی. قدم بعدی ارتباط با API است؛ یعنی سایت از خودش بیرون را هم ببیند.

تمرین! 🧠

مقدار input ایمیل را بخوان و داخل output نمایش بده.

جواب تمرین

val email = document.getElementById("email") as HTMLInputElement
val output = document.getElementById("output")
output?.textContent = "ایمیل: ${email.value}"

خروجی جواب

ایمیل وارد شده داخل output نمایش داده می‌شود.