آموزش جاوا اسکریپت – کار با فرم ها در جاوا اسکریپت

در این پست از مجموعه آموزش های جاوا اسکریپت JavaScript، به مبحث کار با فرم ها در جاوا اسکریپت می‌رسیم. همانطور که می‌دانید در HTML می‌توانیم با استفاده از تگ <form> فرم‌هایی را طراحی کنیم.

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

خاصیت‌های مهم فرم ها

در HTML می‌توانیم با استفاده از یکسری تگ عناصر مربوط به فرم ایجاد کنیم. برای مثال از تگ input برای گرفتن ورودی، از تگ Select برای ایجاد لیست کشویی و از تگ textarea برای ایجاد یک کادر متنی که قابلیت نوشتن متن چندین سطری را دارد استفاده می‌شود.

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

از مهم‌ترین خاصیت‌های یک فرم می‌توان به موارد زیر اشاره کرد:

• action : داده‌های فرم وقتی ارسال می‌شوند ابتدا باید به یک صفحه‌ای که توسط یکی از زبان‌های سمت سرور نوشته شده است ارسال شوند. ویژگی action درواقع یک آدرس می‌باشد که مشخص کننده همان صفحه‌ای است که داده‌های فرم پس از ارسال به آنجا ارسال می‌شوند.
• accept : با استفاده از این ویژگی می‌توان یک فیلتر مشخص کرد که کاربر چه نوع فایلی می‌تواند از کادر محاوره‌ای برای ورودی انتخاب کند.
• accept-charset : این ویژگی یکسری از کاراکترها را که قرار است برای ارسال فرم استفاده شوند را مشخص می‌کند.
• enctype : داده‌های فرم هنگام ارسال رمزگذاری می‌شوند. این ویژگی نوع رمزگذاری را مشخص می‌کند. این ویژگی مشخص می‌کند که داده‌های فرم چگونه قبل از ارسال به سرور رمزگذاری شوند. نوع رمزگذاری به صورت پیش‌فرض application/x-www-form-urlencoded می‌باشد.
• elements : یک نوع آرایه است که حاوی تمام عناصر موجود در فرم می‌باشد.
• length : این ویژگی تعداد عناصر موجود در یک فرم را تعیین می‌کند.
• method : این ویژگی مشخص می‌کند که فرم داده با کدام یک از روش های post یا get ارسال شود. (فرم داده به همان آدرسی که در ویژگی action مشخص شده ارسال می‌شوند)

چگونه به عناصر موجود در یک فرم دسترسی داشته باشیم؟

قبل از هرچیزی ابتدا باید توسط یک متد، یک ارجاع به فرم مورد نظر ایجاد کرده باشیم. این به دلیل متفاوت بودن کدنویسی برای عناصر فرم نسبت به دیگر عنصرها است. برای این کار از دو روش استفاده می‌شود.

• استفاده از آرایه‌ی []forms که یکی از خاصیت های شیء document در DOM است.

برای مثال :

<form id="myForm" action="/mypage.php">
  First name: <input type="text" name="fname" value="amin"><br>
  Last name: <input type="text" name="lname" value="jalilzadeh"><br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Try it" button to display the number of elements in the form.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.forms["myForm"].elements.length;
  alert(x);
}
</script>

در این مثال تعداد عناصر فرم ۳ عدد است. دو کادر دریافت ورودی و یک دکمه. در این مثال ابتدا با استفاده از آرایه‌ی []forms به فرم دسترسی پیدا کردیم سپس با استفاده از خاصیت length تعداد عناصر موجود در فرم را مشخص کردیم.

• استفاده از متد ()getElementById. که با استفاده از ID فرم می‌توان به عناصر آن دسترسی داشت. برای مثال :

<form id="myForm" action="/mypage.php">
  First name: <input type="text" name="fname" value="amin"><br>
  Last name: <input type="text" name="lname" value="jalilzadeh"><br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Try it" button to display the number of elements in the form.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.getElementById("myForm").elements.length;
  alert(x);
}
</script>

//result 3

این مثال نیز همان تکه کد بالاست با این تفاوت که این بار از متد ()getElementById. استفاده کرده‌ایم.

دسترسی به عناصر داخل فرم

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

برای مثال به تکه کد زیر توجه کنید:

<form id="myForm" action="/mypage.php">
  First name: <input type="text" name="fname" value="amin"><br>
  Last name: <input type="text" name="lname" value="jalilzadeh"><br>
  <input type="submit" value="Submit">
</form> 

<p>Click the "Try it" button to display the value of the first element in the form.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.getElementById("myForm").elements[0].value;
  alert(x);
}
</script>

در مثال بالا یک متغیر به نام x تعریف کردیم و با استفاده از آرایه elements به اولین عنصر موجود در فرم دسترسی پیدا کرده و با خاصیت value. به محتوای آن عنصر دسترسی پیدا کردیم.

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

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

برای مثال :

<form name="myForm" action="/mypage.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

در این تکه کد یک مثال از اعتبار سنجی HTML را آوردیم. بدین صورت که حتما باید داخل کادر رشته ای وارد شده باشد در غیر این صورت با یک پیغام به شما هشدار می‌دهد که کادر نباید خالی باشد. با استفاده از آرایه‌ی []forms ابتدا به عنصر مورد نظر دسترسی پیدا کرده و سپس با دستور if گفتیم که اگر متنی داخل کادر وجود نداشته باشد یک پیغام هشدار نمایش دهد.

یک مثال دیگر :

<p>Please enter a number between 5 and 40</p>
<input id="num">
<input type="submit" value="Submit" onclick="validateForm()">
<p id="demo"></p>

<script>
function validateForm() {
  var x, txt;
  x = document.getElementById("num").value;
if(x < 5 || x > 40) {
  txt = "Incorrect number";
}
  else {
  txt = "The entered number is correct";
}
document.getElementById('demo').innerHTML = txt;
}
</script>

در این تکه کد ابتدا یک متغیر تعریف کرده و به محتوای داخل کادر متنی دسترسی پیدا کردیم. سپس با استفاده از دستور if یک مقایسه عددی انجام دادیم.

ویژگی‌های عناصر فرم form

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

• خاصیت disabled : از این خاصیت برای فهمیدن فعال یا غیرفعال بودن یک عنصر استفاده می‌شود. همچنین با استفاده از این خاصیت می‌توان یک عنصری را که از قبل فعال است غیرفعال کرد. درصورتی که مقدار این خاصیت true درنظر گرفته شود عنصر غیرفعال می‌شود. برای درک بهتر به مثال زیر توجه کنید:

Name: <input type="text" id="myText">
<p>Click the button to disable the text field.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myText").disabled = true;
}
</script>

اگر این تکه کد را اجرا کنید همانطور که ملاحظه می‌کنید پس از کلیک بر روی دکمه کادر دریافت ورودی غیرفعال می‌شود.

• خاصیت form : به آن فرمی که عنصرها در آن قرار دارند اشاره دارد.
• متد ()focus : این متد درصورتی که امکان فوکوس دادن به یک عنصر وجود داشته باشد، به عنصر فوکوس می‌دهد. (تمرکز صفحه را بر روی عنصر مورد نظر قرار می‌دهد)
• متد ()blur : این متد دقیقا برعکس متد ()focus است و باعث می‌شود تمرکز صفحه از روی عنصر مورد نظر برداشته شود.

مثال برای متد ()focus و متد ()blur :

<input type="text" id="myText" value="A text field">
<p>Click the buttons to give focus and/or remove focus from the text field.</p>
<button type="button" onclick="getFocus()">Get focus</button>
<button type="button" onclick="loseFocus()">Lose focus</button>

<script>
function getFocus() {
  document.getElementById("myText").focus();
}
function loseFocus() {
  document.getElementById("myText").blur();
}
</script>

در مثال بالا زمانی که بر روی دکمه Get focus کلیک کنید، فوکوس بر روی input فعال می‌شود و زمانی که بر روی دکمه Lose focus کلیک کنید، فوکوس از input برداشته می‌شود.

• آموزش جاوا اسکریپت – BOM در جاوا اسکریپت (مدل شی گرای مرورگر) — کلیک کنید.

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

ما در جاوا اسکریپت می‌توانیم با کلیک یک دکمه فرمی را به سرور بفرستیم. در حال حاضر امکان ذکر مثال واقعی وجود ندارد اما می‌توانیم نحوه کار را با شما به اشتراک بگذاریم. در مثال زیر با کلیک بر روی دکمه OK داده‌های فرم ارسال می‌شوند.

<input type="submit" value="OK" />

حتی این دکمه می‌تواند یک عکس باشد! به مثال زیر دقت کنید:

<input type="image" src="submit.png" />

در دو مثال بالا ارسال فرم به صورت معمولی خواهد بود. برای اینکه تست کنید آیا فرم مدنظر ارسال شده است یا نه می‌توانید از تکه کد زیر در ابتدای فرم خود استفاده کنید.

<form method="post" action="javascript:alert('Submitted')">

برای مثال در فرم زیر زمانی که بر روی دکمه Submit کلیک کنید در حالت عادی اتفاقی نخواهد افتاد زیرا فرم به سرور متصل نیست. اما می‌توانید برای تست کردن اینکه فرم به درستی کار می‌کند یا نه از تکه کد بالا به صورت زیر استفاده کنید.

<form method="post" action="javascript:alert('Submitted')">
<form id="myForm" action="/mypage.php">
  First name: <input type="text" name="fname" value="amin"><br>
  Last name: <input type="text" name="lname" value="jalilzadeh"><br>
  <input type="submit" value="Submit">
</form>

پس از کلیک بر روی دکمه Submit پیغامی مبنی بر اینکه فرم ارسال شده است ظاهر می‌شود.

به جای این کار می‌توانید از روش زیر نیز استفاده کنید:

<form id="myForm" action="/mypage.php">
  First name: <input type="text" name="fname" value="amin"><br>
  Last name: <input type="text" name="lname" value="jalilzadeh"><br>
  <input type="submit" value="Submit">
</form>

<script>
function myFunction() {
  document.getElementById("myForm").submit();
}
</script>

با اینکه در این روش نیز پیغامی مبنی بر اینکه فرم ارسال شده است یا نه نشان داده نمی‌شود اما مطمئن باشید که فرم ارسال شده است. متد ()submit. یکی از متدهای تعریف شده DOM می‌باشد. برای استفاده از این متد همانطور که در مثال بالا ذکر کردیم ابتدا باید یک ارجاع به فرم موردنظر داده شود سپس از این متد استفاده کنیم.

ارسال فرم تنها یک بار

بسیاری از افراد زمانی که بر روی دکمه Submit کلیک می‌کنند هنگامی که می‌بینند فرم هنوز ارسال نشده است دوباره و چندباره بر روی دکمه کلیک می‌کنند. معمولا افراد برای اطمینان از ارسال شدن فرم این کار را انجام می‌دهند اما نمی‌دانند که با هربار کلیک فرم به سرور ارسال می‌شود و ممکن است مشکلاتی را به وجود بیاورد.

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

برای این کار به جای استفاده از دکمه ساده Submit از روش زیر استفاده می‌کنیم:

<input type="button" value="Submit" onclick="this.disabled=true; this.form.submit()"/>

اگر بخواهیم در مثال بالا به جای نوشتن Submit از این روش استفاده کنیم باید به صورت زیر بنویسیم:

<form id="myForm" action="/mypage.php">
  First name: <input type="text" name="fname" value="amin"><br>
  Last name: <input type="text" name="lname" value="jalilzadeh"><br>
  <input type="button" value="Submit" onclick="this.disabled=true; this.form.submit()"/>
</form>
<script>
function myFunction() {
  document.getElementById("myForm").submit();
}
</script>

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

کار با کادرهای متنی

در مبحث کار با فرم ها در جاوا اسکریپت، می‌خواهیم درمورد کار با کادرهای متنی صحبت کنیم. در HTML دو نوع کادر متنی وجود دارد که بیشتر با آنها سر و کار داریم. این دو کادر متنی input و textarea هستند. از input برای نوشتن متن یک خطی و از textarea برای نوشتن متن چند خطی استفاده می‌شود.

برای اینکه بتوانیم یک کادر متنی یک خطی طراحی کنیم باید از تگ input استفاده کنیم. یک تگ input می‌تواند صفات زیر را بگیرد.

• type : نوع input را مشخص می‌کند که برای متنی باید text قرار دهیم.
• size: طول کادر را مشخص می‌کند که بر حسب تعداد کاراکتر است.
• maxlength : حداکثر تعداد کاراکترهایی که بتوان در کادر وارد کرد را مشخص می‌کنیم.
• value : مقدار پیش‌فرض کادر متنی را مشخص می‌کند.
• select : برای انتخاب کل متن داخل کادر استفاده می‌شود.

برای مثال :

<input type="text" size="25" maxlength="50" value="example" />

برای اینکه بتوانیم یک کادر متنی چند خطی طراحی کنیم باید از تگ textarea استفاده کنیم. یک تگ textarea می‌تواند صفات زیر را بگیرد.

• rows : تعداد سطر های کادر متنی را مشخص می‌کند.
• cols : طول یک ستون را برحسب کاراکتر مشخص می‌کند.
• maxlength : حداکثر تعداد کاراکترهایی که بتوان در کادر وارد کرد را مشخص می‌کنیم.
• value : مقدار پیش‌فرض کادر متنی را مشخص می‌کند.
• select : برای انتخاب کل متن داخل کادر استفاده می‌شود.

دسترسی به مقادیر داخل کادر متنی

()value.

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

<textarea id="myTextarea"></textarea><br>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.getElementById("myTextarea").value;
  alert(x);
}
</script>

و یا می‌توانیم تعداد کاراکترهای موجود در کادر متنی را به دست آوریم:

<textarea id="myTextarea"></textarea><br>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.getElementById("myTextarea").value;
  alert(x.length);
}
</script>

حتی می‌توانیم خودمان برای یک کادر متنی مقدار جدیدی را تعیین کنیم. برای درک بهتر به مثال زیر توجه کنید:

<textarea id="myTextarea">Example</textarea><br>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.getElementById("myTextarea").value = "Hello my friend, how are you today?";
}
</script>

()select.

هردوی این نوع کادر متنی از صفتی به نام select پشتیبانی می‌کنند. از این صفت می‌توان برای انتخاب کل متن داخل کادر استفاده کرد. برای مثال :

<textarea id="myTextarea">Hello my friend, how are you today?</textarea><br>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.getElementById("myTextarea").select();
}
</script>

انتخاب خودکار متن دورن کادر متنی

برای اینکه هنگامی که فوکوس انجام می‌شود (یعنی زمانی که داخل کادر متنی کلیک می‌کنید) بتوانیم متن داخل یک کادر متنی را به صورت خودکار انتخاب کنیم از متد ()this.select استفاده می‌کنیم. برای مثال:

<textarea onfocus="this.select()" id="myTextarea">Hello my friend, how are you today?</textarea>

کار با تگ select

در مبحث کار با فرم ها در جاوا اسکریپت می‌خواهیم با نحوه ایجاد list box و combo box آشنا شویم. برای ایجاد هر دوی این موارد از تگ <select> استفاده می‌کنیم. با این تفاوت که تگ <select> به طور پیش‌فرض به عنوان یک combo box درنظر گرفته می‌شود. برای اینکه بتوانیم یک list box ایجاد کنیم باید یک صفت size به تگ <select> اضافه کنیم.

مثال برای ایجاد یک combo box :

<form>
  <label for="colors">Choose a color:</label>
  <select name="colors" id="colors">
    <option value="red">red</option>
    <option value="blue">blue</option>
    <option value="green">green</option>
    <option value="black">black</option>
  </select>
</form>

مثال برای ایجاد list box :

<form>
  <label for="colors">Choose a color:</label>
  <select name="colors" id="colors" size="3">
    <option value="red">red</option>
    <option value="blue">blue</option>
    <option value="green">green</option>
    <option value="black">black</option>
  </select>
</form>

در مبحث کار با فرم ها در جاوا اسکریپت باید متذکر شد که لیست ها نیز همانند آرایه ‌ها با اندیس مشخص می‌شوند و در واقع اولین گزینه موجود در یک لیست شماره صفر است. در صورتی که هیچ گزینه‌ای انتخاب نشده باشد برابر با مقدار ۱- خواهد بود.

برای درک بهتر به تکه کد زیر توجه کنید:

<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<button type="button" onclick="myFunction()">Display index</button>

<script>
document.getElementById("mySelect").selectedIndex = "-1";
function myFunction() {
  var x = document.getElementById("mySelect").selectedIndex;
  var y = document.getElementById("mySelect").options;
  alert("Index : " + y[x].index + " is " + y[x].text);
}
</script>

در ابتدا مقدار selectedIndex را برابر با ۱- قرار دادیم تا هیچ گزینه ای در حالت انتخاب نباشد. درصورتی که بر روی دکمه کلیک کنید اندیس گزینه انتخاب شده برایتان نمایش داده خواهد شد. برای مثال درصورتی که یکی از گزینه ها را از لیست انتخاب کنید و بر روی دکمه کلیک کنید پیغام حاوی گزینه مورد نظر و اندیس آن نمایش داده خواهد شد.

• تگ لینک — کلیک کنید.

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

در این پست از آموزش های پی‌استور در رابطه با کار با فرم ها در جاوا اسکریپت صحبت کردیم. در این پست از اهمیت فرم ها و نحوه دسترسی و دستکاری فرم از طریق جاوا اسکریپت را یاد گرفتیم. همانطور که می‌دانید تعامل با کاربران از اصول مهم یک وب سایت می‌باشد و برای اینکه بتوانید فرم ها و لیست های زیبا طراحی کنید نیاز است که کار با JavaScript و CSS را یاد بگیرید.

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