این آموزش در تاریخ ۱۴۰۰/۰۸/۲۶ آپدیت شده است.
آموزش ویژگی forms در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی forms در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی forms در DOM جاوااسکریپت
با استفاده از ویژگی forms میتونیم به فرم ها ( چیزی که با استفاده از تگ Form در صفحه ایجاد شده باشه ) دسترسی پیدا نماییم ، دسترسی هم به خوده فرم ها و هم به اینپوت های ( Input ) داخل فرم و..
| مقدار برگشتی | برگشت عناصر ( تگ های ) فرم از صفحه |
|---|---|
| نسخه DOM | Core Level 1 Document Object |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : میخوایم با استفاده از ویژگی length تعداد کل فرم هایی که درون صفحه قرار دارند رو بدست آوریم.
|
1 2 3 4 5 6 7 8 9 |
<script> function tedad_form(){ var myform; myform = document.forms.length; alert( "تعداد کل فرم های درون صفحه = " + myform ); } </script> |
مثال شماره ۲ : میخوایم با کلیک بروی یک دکمه ، مقدار صفت action و method رو از فرم بدست آوریم.
|
1 2 3 4 5 6 7 8 9 10 |
<script> function show_info(){ var myform , result; myform = document.getElementById("MyForm"); result = document.getElementById("Result"); result.innerHTML = "Action = " + myform.action + "<br>" + "Method = " + myform.method; } </script> |
مثال شماره ۳ : بدست آوردن مقادیر اینپوت ( Input ) های داخل یک فرم
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function show_info(){ var f1 , f2 , result; f1 = document.forms["MyForm"]["user-name"].value; f2 = document.forms["MyForm"]["user-password"].value; result = document.getElementById("Result"); result.innerHTML = "UserName = " + f1 + "<br>" + "Password = " + f2; } </script> |
مثال شماره ۴ : بدست آوردن اینپوت ( Input ) های داخل فرم و اعتبارسنجی فیلدها ( اعتبارسنجی یعنی مثلا اگه اینپوت خالی بود بهمون پیغام بده باید حتما این فیلد تکمیل شه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script> function My_Validate(){ var uname_error , ufamily_error; uname_error = document.getElementById("un_error"); ufamily_error = document.getElementById("uf_error"); var UserName = document.forms["MyForm"]["User_Name"].value; var UserFamily = document.forms["MyForm"]["User_Family"].value; if ( UserName == "" && UserFamily == "" ){ uname_error.innerHTML ="لطفا نام وارد کنید"; ufamily_error.innerHTML ="لطفا فامیلی وارد کنید"; return false; } else if ( UserName != "" && UserFamily == "" ){ ufamily_error.innerHTML ="لطفا فامیلی وارد کنید"; uname_error.innerHTML =""; return false; } else if ( UserName == "" && UserFamily != "" ){ uname_error.innerHTML ="لطفا نام وارد کنید"; ufamily_error.innerHTML =""; return false; } } </script> |
مثال شماره ۵ : وقتی بروی دکمه کلیک کنید رمز نمایش داده میشه و اگه دوباره روش کلیک کنید رمز مخفی میشه ( نمایش / مخفی کردن رمز )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function show_password(){ var MyInput = document.getElementById("myinput"); if( MyInput.type == "password" ){ MyInput.type = "text"; }else{ MyInput.type = "password"; } } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| forms | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.forms; |
Free-Learn
ویژگی ها
در جدول زیر میتوانید ویژگی های قابل استفاده در forms رو مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| length | برای بدست آوردن تعداد ( کل ) فرم های موجود در صفحه ( مثال ) |
Free-Learn
متدها
در جدول زیر میتوانید متدهای قابل استفاده در forms رو مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| [index] | بدست آوردن فرم های موجود در صفحه ، با استفاده از شماره ایندکس یا Index فرم ( مثال ) |
| item(index) | بدست آوردن فرم های موجود در صفحه ، با استفاده از شماره ایندکس یا Index فرم ( مثال ) |
| namedItem(id) | بدست آوردن فرم های موجود در صفحه ، با استفاده از آی دی یا ID فرم ( مثال ) |
Free-Learn
نکات و توضیحات
- وقتی میخوایم فرمی رو با استفاده از شماره ایندکس ( Index ) بدست آوریم، اگه شماره ایندکس خارج از محدوده باشه، هیچی یا null برگشت داده میشه. ( بفرض مثال ما ۳ تا فرم در صفحه داریم بعد اومدیم شماره ایندکس دادیم ۴ )
