ایجاد فرم‌های وب در HTML

مقدمه

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

عناصر مربوط به فرم‌ها در HTML

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

نام عنصر	توضیح
form	عنصر form عنصر پایه و مادر برای فرم‌های وب است که یک ظرف یا جانگهدار (placeholder) برای کنترل‌های فرم محسوب می‌شود. کنترل‌های یک فرم که هر یک برای دریافت نوع مشخصی از اطلاعات از کاربران کاربرد دارند، یا باید درون عنصر form باشند و یا به روشی، تعلق خود را به یک عنصر form اعلام کنند.
input	عنصر input یکی از مهمترین و پیچیده‌ترین عناصر مربوط به فرم‌های وب است که قابلیت ایجاد انواع مختلفی از کنترل‌های فرم را دارد. این عنصر دارای یک صفت کلیدی با نام type است که مقدار این صفت، تعیین‌کننده‌ی نوع کنترلی است که این عنصر ایجاد می‌کند.
button	این عنصر همانطور که از نامش نیز پیداست، برای ایجاد دکمه‌های قابل‌کلیک کاربرد دارد. به بیان بهتر، محتوای این عنصر قابلیت دریافت کلیک یا ضربه (tap) را دارد و اینکه با کلیک روی محتوا چه اتفاقی رخ دهد، با استفاده از زبان‌هایی مانند جاوااسکریپت تعیین می‌شود.
datalist	عنصر datalist شامل تعدادی عنصر option است که مجموعه‌ای از گزینه‌های مجاز یا پیشنهادی را برای کنترل‌های دیگر ارائه می‌دهد. در واقع، وقتی کنترلی به یک عنصر datalist مرتبط شود، هنگامی که کاربر قصد ورود داده در آن کنترل را داشده باشد، مقادیر تعریف‌شده در عنصر datalist به عنوان پیشنهاد به کاربر ارائه می‌شود.
fieldset	fieldset یک عنصر گروه‌بندی است که می‌توان با استفاده از آن، کنترل‌های مرتبط با هم را در یک گروه قرار داد.
legend	عنصر legend یک عنصر فرزند برای fieldset است که عنوان (caption) گروه تعریف‌شده با استفاده از fieldset را مشخص می‌کند.
label	همانطور که نام عنصر label نیز نشان می‌دهد، این عنصر برای ایجاد یک برچسب یا عنوان برای یک آیتم درون صفحه و به طور خاص برای کنترل‌های یک فرم، کاربرد دارد.
meter	با استفاده از یک عنصر meter، می‌توان یک نمایش بصری (visual) از یک مقدار عددی درون یک بازه یا یک مقدار کسری ایجاد کرد.
outgoup	عنصر optgroup برای گروه‌بندی تعدادی از گزینه‌های یک منوی dropdown کاربرد دارد. به عبارت دیگر، این عنصر متشکل از تعدادی عنصر option است که به یک عنصر select تعلق دارند.
option	کاربرد عنصر option، تعریف یک گزینه درون عناصر select و یا datalist است.
output	عنصر output یک کانتینر ایجاد می‌کند که صفحه‌ی وب یا اپلیکیشن می‌تواند نتیجه‌ی یک عمل محاسباتی یا خروجی یک فعالیت کاربر را در آن نمایش دهد.
progress	از عنصر progress برای ایجاد یک نوار پیشرفت (progress bar) که در واقع، شاخصی است که نشان‌دهنده‌ی میزان پیشرفت یک فرایند یا کار مشخص است، استفاده می‌شود.
select	از عنصر select برای ایجاد یک منوی dropdown شامل لیستی از گزینه‌ها استفاده می‌شود. گزینه‌های این منوها با استفاده از عنصر option ایجاد می‌شوند.
textarea	از عنصر textarea برای ایجاد یک فیلد ورود متن چندخطی (multi-line) استفاده می‌شود.

جدول بالا صرفاً با هدف آشنایی مقدماتی با عناصر مربوط به فرم‌ها در اینجا ارائه شده و البته می‌تواند به عنوان یک مرجع نیز مورد استفاده قرار گیرد. اما در این درس و درس آینده با عناصر لیست‌شده در این جدول بیشتر آشنا خواهیم شد. البته باز هم تأکید می‌کنم که درس جاری تنها به عنصر form و صفت‌های این عنصر احتصاص دارد.

تعریف فرم با عنصر form

همانطور که گفتیم، عنصر form برای تعریف یک فرم در یک صفحه‌ی وب کاربرد دارد. برای یک فرم، تعدادی فیلد ورود داده وجود دارد که اصطلاحاً این فیلدها را کنترل‌های فرم نیز می‌گویند و هر فرم می‌تواند حاوی تعدادی از این کنترل‌ها باشد. در حقیقت، عنصر form تنها یک جانگهدار یا ظرف (placeholder) است و این عناصر فرزند form هستند که کنترل‌های آن فرم را ایجاد می‌کنند.

عنصر form علاوه بر صفت‌های عمومی، دارای صفت‌های زیر نیز هست. از بین این صفت‌ها، پنج‌تای اول به فرایند تأیید و ارسال داده‌های فرم (form submission) مربوط می‌شوند:

action: این صفت، مشخص‌کننده‌ی صفحه‌ای است که اطلاعات فرم را دریافت و پردازش می‌کند. به عبارت دیگر، این صفت، آدرس url مربوط به مقصد فرم را دریافت می‌کند.
method: از این صفت برای تعیین روش ارسال داده‌های فرم استفاده می‌شود. post و get مرسوم‌ترین روش‌های ارسال داده‌های فرم هستند.
enctype: فرم‌هایی که به روش post ارسال می‌شوند، می‌توانند داده‌ها را به صورت کدگذاری شده (encoded) و یا به همان شکلی که هستند، ارسال کنند. این امر با مقداری که برای صفت enctype فراهم می‌کنیم، مشخص می‌شود.
target: این صفت یک زبانه (tab)، پنجره یا فریم را به عنوان محل نمایش پاسخ احتمالی پس از ارسال فرم، تعیین می‌کند.
novalidate: با استفاده از این صفت، می‌توانیم قابلیت اعتبارسنجی خودکار کنترل‌های فرم را غیرفعال کنیم.
name: این صفت، نامی را به فرم اختصاص می‌دهد که کدها و اسکریپت‌های سمت کاربر و کدهای سمت سرور می‌توانند از این نام برای ارجاع به فرم استفاده کنند.
rel: این صفت، رابطه‌ی بین سند حاوی فرم و صفحه‌ی دریافت‌کننده‌ی داده‌های فرم را مشخص می‌کند.
autocomplete: این صفت، مشخص می‌کند که آیا قابلیت تکمیل خودکار داده‌های فرم فعال باشد یا خیر.
accept-charset: این صفت، مجموعه‌ی کاراکتری داده‌های فرم را تعیین می‌کند.

پس از این معرفی مختصر از صفت‌های عنصر form، در ادامه این صفت‌ها را با جزئیات و توضیحات بیشتر بررسی می‌کنیم. این کار را با صفت action شروع می‌کنیم و با سایر صفت‌ها به همان ترتیبی که در بالا آورده شده‌اند، ادامه می‌دهیم.

پردازش داده‌های فرم با صفت action

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

HTML

<form action="#">
  First name: <input type="text" name="fname"> <br>
  Last name: <input type="text" name="lname"> <br>
  <input type="submit" value="Submit">
</form>

فعلاً کاری به محتویات عنصر form در مثال بالا نداشته باشید و فقط به صفت action توجه کنید که یک کاراکتر # را به عنوان مقدار دریافت کرده است. این مقدار باعث می‌شود که داده‌های فرم پس از تأیید فرم ارسال نشوند اما در پروژه‌های واقعی به جای این مقدار باید آدرس url صفحه‌ی پردازش‌کننده‌ی فرم در سرور را وارد کنیم.

البته کنترل‌های button و input از نوع submit یا image می‌توانند با استفاده از یک صفت با نام formaction صفت action را بازنویسی (override) کرده و آدرس متفاوتی را دریافت کنند. با این کنترل‌ها و کارکردشان در ادامه‌ی این فصل آشنا می‌شویم.

تعیین روش ارسال داده‌های فرم با صفت method

با استفاده از این صفت، می‌توانیم روش ارسال داده‌های فرم و به بیان دقیق‌تر، متد HTTP مورد استفاده در درخواست را تعیین کنیم. در حقیقت، ارسال داده‌های فرم منجر به ایجاد یک درخواست HTTP می‌شود و صفت method برای تعیین متد مورد استفاده در این درخواست، کاربرد دارد. فرم‌ها به طور پیش‌فرض از روش get برای این کار استفاده می‌کنند اما مقادیر post و dialog نیز برای این صفت قابل انتخاب هستند. هر کدام از این روش‌ها کارایی مشخصی دارند و برای برخی شرایط مناسب هستند:

get: استفاده از این مقدار باعث می‌شود که متد GET در درخواست HTTP مورد استفاده قرار گیرد. در این صورت، داده‌های فرم به انتهای url مشخص‌شده با استفاده از صفت action اضافه می‌شوند. از کاراکتر ? به عنوان جداکننده‌ی (separator) داده‌ها استفاده می‌شود.
post: استفاده از این مقدار باعث به‌کارگیری متد POST در درخواست HTTP می‌شود. در این صورت، داده‌های فرم در قالب بدنه‌ی درخواست ارسال می‌شوند.
dialog: استفاده از این مقدار باعث می‌شود که اگر فرم مورد نظر درون یک کادر محاوره‌ای (ایجاد شده با استفاده از عنصر dialog) قرار داشته باشد، ارسال فرم با بسته شدن کادر محاوره‌ای همراه باشد و در غیر این صورت، ارسال فرم صورت نگیرد.

HTML

<form action="#" method="post">
  First name: <input type="text" name="fname"> <br>
  Last name: <input type="text" name="lname"> <br>
  <input type="submit" value="Submit">
</form>

با توجه به مطالب گفته شده در مورد روش‌های بالا، روش get برای فرم‌های کوتاهی که حاوی اطلاعات حساسی نظیر رمز عبور و اطلاعات محرمانه نباشند، مناسب است. علت امن نبودن روش get این است که در این روش، داده‌های فرم به صورت جفت‌های نام و مقدار به انتهای url اضافه می‌شوند و قابل مشاهده هستند. علت مناسب نبودن روش get برای فرم‌های طولانی نیز به محدودیت تعداد کاراکترهای یک url (حداکثر حدود 3000 کاراکتر) برمی‌گردد. اما روش post چنین محدودیت‌هایی ندارد و لذا در مواردی که فرم شامل اطلاعات حساس و محرمانه است و یا شامل داده‌های زیادی است، باید از روش post استفاده کنیم.

همانند آنچه در مورد صفت‌های action و formaction گفتیم، کنترل‌های button و input از نوع submit و image می‌توانند با استفاده از صفتی به نام formmethod صفت method را بازنویسی کنند و از متد متفاوتی استفاده کنند.

تعیین روش کدگذاری داده‌های فرم با صفت enctype

همانطور که گفته شد، با استفاده از صفت method می‌توانیم روش ارسال داده‌های فرم برای سرور را تعیین کنیم و دیدیم که استفاده از روش post باعث می‌شود که داده‌ها در قالب بدنه‌ی درخواست HTTP ایجاد شده در اثر ارسال فرم، در اختیار مقصد قرار گیرند. با استفاده از صفت enctype می‌توانیم نحوه‌ی کدگذاری (encoding) داده‌های فرم را در روش post تعیین کنیم.

در واقع، با تأیید فرم برای ارسال، ابتدا داده‌های فرم به ساختار مشخص‌شده با استفاده از صفت enctype تبدیل شده و سپس، با روش تعیین‌شده توسط صفت method به مقصد تعیین شده با استفاده از صفت action ارسال می‌شوند. با کمی اغماض، می‌توان گفت که اگر روش ارسال فرم post باشد، صفت enctype برای فرم حکم MIME type را دارد.

این صفت می‌تواند یکی از مقادیر زیر را دریافت کند:

application/x-www-form-urlencoded: مقدار پیش‌فرض که همه‌ی کاراکترها را قبل از ارسال فرم، به صورت رمز یا کدگذاری‌شده در می‌آورد.
multipart/form-data: اگر فرم ما شامل یک عنصر input از نوع file باشد، باید از این مقدار استفاده کنیم.
text/plain: این مقدار در HTML5 با اهداف مربوط به اشکالزدایی (debugging) معرفی شد و داده‌ها را کدگذاری نمی‌کند و استفاده از آن جز برای اهداف آزمایشی توصیه نمی‌شود.

دقت داشته باشید که صفت enctype تنها برای فرم‌هایی قابل استفاده است که از روش post (یعنی مقدار post برای صفت method) برای ارسال داده‌های خود استفاده می‌کنند. همچنین، صفتی با نام formenctype در دسترس عناصر button و input از نوع submit و image قرار دارد که آنها را قادر به لغو مقدار تعیین شده برای صفت enctype و بازنویسی آن با استفاده از مقداری دیگر می‌کند.

ممانعت از اعتبارسنجی داده‌های فرم با صفت novalidate

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

HTML

<form action="#" novalidate>
  <input type="email" name="email"> <br> <br>
  <input type="submit">
</form>

کنترل ایجاد شده با استفاده از عنصر input از نوع email یکی از کنترل‌هایی است که کار اعتبارسنجی را انجام می‌دهد و لذا اگر مقدار غیرمعتبری توسط کاربر در آن وارد شود (مثلاً مقداری که شامل یک کاراکتر @ نباشد)، از ارسال فرم جلوگیری می‌شود اما در مثال بالا، استفاده از صفت بولین novalidate باعث شده تا از اعتبارسنجی کنترل‌های فرم صرف‌نظر شود.

اعتبارسنجی در سمت کاربر و سرور

فرم‌ها عناصری هستند که باید از نظر امنیتی مورد توجه ویژه‌ای قرار گیرند. افراد خرابکار می‌توانند با تزریق کدهای آلوده از طریق یک فرم، مشکلات اساسی را برای وبسایت‌ها و کاربرانشان ایجاد کنند. یکی از راه‌های مقابله با این خرابکاری‌ها، اعتبارسنجی داده‌های فرم است که باعث می‌شود تا از ارسال فرم‌هایی که دارای مقادیر نامعتبر برای یک فیلد هستند، جلوگیری شود. اگرچه در استاندارد فعلی HTML کنترل‌ها مجهز به قابلیت اعتبارسنجی خودکار هستند اما این ما را از اعتبارسنجی مستقیم با استفاده از جاوااسکریپت بی‌نیاز نمی‌کند زیرا مرورگرهای قدیمی از نعمت اعتبارسنجی خودکار بی‌بهره هستند. از طرفی، یک کاربر می‌تواند با غیرفعال کردن جاوااسکریپت در مرورگر خود، کدهای جاوااسکریپت را بی‌اثر کند و لذا باز هم امنیت کامل حاصل نشده و برای این منظور، ناچاراً باید در سمت سرور نیز اعتبارسنجی داده‌های فرم صورت گیرد. اما شاید بپرسید اگر اعتبارسنجی در سمت کاربر موجب تضمین امنیت نمی‌شود و در هر صورت، به اعتبارسنجی در سمت سرور نیاز باشد، اساساً چرا باید در سمت کاربر دست به اعتبارسنجی بزنیم؟ اگر بخواهیم یک پاسخ کوتاه اما کافی به این سوال بدهیم، باید بگوییم که: اگر فرض کنیم اعتبارسنجی در سمت کاربر در n درصد از موارد، مانع از ارسال فرم با داده‌های نامعتبر شود، برای این n درصد از موارد، از ارسال بی‌دلیل فرم و انجام اعتبارسنجی در سمت سرور که هم باعث کاهش کارایی (performance) صفحه و سایت شده و هم باعث مصرف منابع می‌شود، جلوگیری کرده‌ایم. بنابراین، ما از اعتبارسنجی در سمت کاربر استفاده می‌کنیم و اگر کاربری به هر دلیلی قِسِر در رفت، در سمت سرور یقه‌ی او را می‌گیریم.

قابلیت تکمیل خودکار فرم با صفت autocomplete

صفت autocomplete برای فعال یا غیر فعال کردن خصوصیت تکمیل خودکار داده‌های فرم به کار می‌رود. اگر مقدار on را برای این صفت برگزینیم، هنگام پر کردن فیلدهای فرم توسط کاربر، مرورگر به طور خودکار مقادیر فیلدها را بر اساس داده‌هایی که قبلاً توسط کاربر در فیلدهای مختلف وارد شده، پیشنهاد می‌دهد. اما انتخاب مقدار off باعث غیر فعال شدن این خصوصیت می‌شود.

مقداری که برای صفت autocomplete تعیین می‌کنیم، برای همه‌ی کنترل‌های فرم در نظر گرفته می‌شود، مگر اینکه کنترلی با استفاده از این صفت، این مقدار را برای خودش لغو (override) کند. برای مثال، در کد زیر قابلیت تکمیل خودکار برای همه‌ی کنترل‌های فرم به جز کنترل با name=”lname” فعال است.

HTML

<form action="#" method="post" autocomplete="on">
  <input type="text" name="fname"> <br> <br>
  <input type="text" name="lname" autocomplete="off"> <br> <br>
  <input type="submit" value="Submit">
</form>

درس قبل درس بعد