خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت ویژگی forms در DOM جاوااسکریپت

ویژگی forms در DOM جاوااسکریپت

توسط

۱۳۹۹-۱۲-۰۱

آموزش ویژگی forms در DOM جاوااسکریپت

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

ویژگی forms در DOM جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی forms در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 ویژگی ها
6 متدها
7 نکات و توضیحات

ویژگی forms در DOM جاوااسکریپت

با استفاده از ویژگی forms میتونیم به فرم ها ( چیزی که با استفاده از تگ Form در صفحه ایجاد شده باشه ) دسترسی پیدا نماییم ، دسترسی هم به خوده فرم ها و هم به اینپوت های ( Input ) داخل فرم و..

مقدار برگشتی	برگشت عناصر ( تگ های ) فرم از صفحه
نسخه DOM	Core Level 1 Document Object

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

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

<script>

function tedad_form(){
 var myform;
 myform = document.forms.length;
 alert( "تعداد کل فرم های درون صفحه = " + myform );
}

</script>

function tedad_form(){

var myform;

myform = document.forms.length;

alert( "تعداد کل فرم های درون صفحه = " + myform );

}

</script>

امتحان کنید

مثال شماره ۲ : میخوایم با کلیک بروی یک دکمه ، مقدار صفت action و method رو از فرم بدست آوریم.

<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>

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 ) های داخل یک فرم

<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>

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 ) های داخل فرم و اعتبارسنجی فیلدها ( اعتبارسنجی یعنی مثلا اگه اینپوت خالی بود بهمون پیغام بده باید حتما این فیلد تکمیل شه )

<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>

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>

امتحان کنید

مثال شماره ۵ : وقتی بروی دکمه کلیک کنید رمز نمایش داده میشه و اگه دوباره روش کلیک کنید رمز مخفی میشه ( نمایش / مخفی کردن رمز )

<script>

function show_password(){
 var MyInput;
 MyInput = document.getElementById("myinput").type;
 if( MyInput == "password" ){
   MyInput = document.getElementById("myinput").type = "text";
 }else{
   MyInput = document.getElementById("myinput").type = "password";
 }
}

</script>

function show_password(){

var MyInput;

MyInput = document.getElementById("myinput").type;

if( MyInput == "password" ){

MyInput = document.getElementById("myinput").type = "text";

}else{

MyInput = document.getElementById("myinput").type = "password";

}

</script>

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام ویژگی	Chrome	Firefox	Opera	Safari	IE
forms	بله	بله	بله	بله	بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

document.forms;

1	document.forms;

Free-Learn

ویژگی ها

در جدول زیر میتوانید ویژگی های قابل استفاده در forms رو مشاهده نمایید.

مقدار	توضیح
length	برای بدست آوردن تعداد ( کل ) فرم های موجود در صفحه ( مثال )

Free-Learn

متدها

در جدول زیر میتوانید متدهای قابل استفاده در forms رو مشاهده نمایید.

مقدار	توضیح
[index]	بدست آوردن فرم های موجود در صفحه ، با استفاده از شماره ایندکس یا Index فرم ( مثال )
item(index)	بدست آوردن فرم های موجود در صفحه ، با استفاده از شماره ایندکس یا Index فرم ( مثال )
namedItem(id)	بدست آوردن فرم های موجود در صفحه ، با استفاده از آی دی یا ID فرم ( مثال )

Free-Learn

نکات و توضیحات

وقتی میخوایم فرمی رو با استفاده از شماره ایندکس ( Index ) بدست آوریم، اگه شماره ایندکس خارج از محدوده باشه، هیچی یا null برگشت داده میشه. ( بفرض مثال ما ۳ تا فرم در صفحه داریم بعد اومدیم شماره ایندکس دادیم ۴ )

Free-Learn

دریافت PDF یا پرینت این مطلب