آموزش HTML - ویژگی‌های

در HTML، هر عنصر دارای ویژگی‌های (Attributes) مخصوص به خود است که برای تعریف مشخصات همان عنصر HTML استفاده می‌شوند و درون تگ آغازین آن قرار می‌گیرند. عنصر <form> نیز ویژگی‌هایی دارد که قابلیت‌های مختلفی مانند هدایت به صفحات وب دیگر و تکمیل خودکار متن را فراهم می‌کنند.

ویژگی‌های فرم

ویژگی‌های فرم در HTML قابلیت‌های مختلفی مانند هدایت به صفحات وب دیگر، تکمیل خودکار متن، تعیین قوانین اعتبارسنجی داده‌ها، کنترل رفتار ارسال فرم و موارد دیگر را فراهم می‌کنند.

در ادامه، فهرستی از پرکاربردترین ویژگی‌های فرم آمده است −

• action
• method
• target
• autocomplete
• enctype
• novalidate

ویژگی action

action ویژگی عنصر <form> ورودی کاربر را برای پردازش به یک اسکریپت سمت سرور منتقل می‌کند. فرم تا زمانی که اطلاعات ارائه‌شده توسط کاربر را پردازش نکند، کاربردی ندارد. بنابراین، تعیین نشانی اینترنتی یک برنامه در ویژگی action اهمیت دارد. توجه داشته باشید که ویژگی formaction می‌تواند مقدار ویژگی action را بازنویسی کند.

مثال

مثال زیر نحوه استفاده از ویژگی action را نشان می‌دهد. هنگامی که روی دکمه ارسال کلیک کنیم، فرم ما را به صفحه اصلی Tutorialspoint هدایت می‌کند:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title> The action Attribute </title>
</head>
<body>
   <!-- Start of the form element -->
   <form action = "https://www.tutorialspoint.com">
      <!-- to take input -->
      Name: <input type = "text" name = "your_name" required/>
      <br><br>
      Email: <input type = "email" name = "mail" required/>
      <br><br>
       <!-- to submit the data -->
      <input type = "submit">
   </form>
</body>
</html>

ویژگی method

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

استفاده از روش GET هنگام ارسال اطلاعات حساس مانند شماره کارت‌های اعتباری یا نقدی و گذرواژه‌ها توصیه نمی‌شود، زیرا این روش داده‌های ارسال‌شده را در نشانی اینترنتی (URL) نمایش می‌دهد.

مثال

مثال زیر نحوه استفاده از ویژگی method در عنصر <form> را نشان می‌دهد.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title> The method Attribute </title>
</head>
<body>
   <!-- Start of the form element -->
   <form action = "https://www.tutorialspoint.com" method = "post">
      <!-- to take input -->
      Name: <input type = "text" name = "your_name" required/>
      <br><br>
      Email: <input type = "email" name = "mail" required/>
      <br><br>
       <!-- to submit the data -->
      <input type = "submit">
   </form>
</body>
</html>

با کلیک روی دکمه ارسال، کاربر به صفحه اصلی Tutorialspoint هدایت خواهد شد.

ویژگی target

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

مثال

در مثال زیر، از ویژگی target با مقدار _self استفاده می‌کنیم. پاسخ در پنجره فعلی باز خواهد شد:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title> The target Attribute </title>
</head>
<body>
   <!-- Start of the form element -->
   <form action = "https://www.tutorialspoint.com" target = "_self">
      <!-- to take input -->
      Name: <input type = "text" name = "your_name" required/>
      <br><br>
      Email: <input type = "email" name = "mail" required/>
      <br><br>
       <!-- to submit the data -->
      <input type = "submit">
   </form>
</body>
</html>

ویژگی novalidate

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

اگر ویژگی‌های بولی مانند novalidate در یک عنصر HTML وجود داشته باشند، مقدار آن‌ها درست در نظر گرفته می‌شود و در صورت نبودن آن‌ها، مقدار نادرست فرض می‌شود. این ویژگی‌ها هیچ مقداری نمی‌پذیرند.

مثال

در مثال‌های قبلی، پس از وارد کردن نام و ایمیل، فرم ما را به یک صفحه وب جدید هدایت می‌کرد. در این مثال، از ویژگی novalidate استفاده می‌کنیم که امکان هدایت به صفحه دیگر را بدون وارد کردن هیچ اطلاعاتی فراهم می‌کند:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title> The novalidate Attribute </title>
</head>
<body>
   <!-- Start of the form element -->
   <form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get" novalidate>
      <!-- to take input -->
      Name: <input type = "text" name = "your_name" required/>
      <br><br>
      Email: <input type = "email" name = "mail" required/>
      <br><br>
       <!-- to submit the data -->
      <input type = "submit">
   </form>
</body>
</html>

ویژگی autocomplete

ویژگی autocomplete در HTML، بر اساس نویسه‌های ابتدایی واردشده در فیلد ورودی، ورودی بعدی را پیش‌بینی کرده و پیشنهاد می‌دهد. این ویژگی عمدتاً دو حالت دارد: on و off.

نمونه

<form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get">

ویژگی enctype

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

نمونه

<form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get" enctype = "text/plain">