فرم های HTML برای دریافت اطلاعات از کاربران استفاده می شود. آنها به طور گسترده در صفحات وب یا برنامه ها برای نظرسنجی یا فرآیندهای ثبت نام استفاده می شوند.

اصول اولیه فرم HTML شامل عناصر متداول HTML، برچسب ها، ویژگی ها، مفاهیم یا بهترین شیوه های مورد نیاز برای ایجاد فرم های HTML خوب است. داده های جمع آوری شده برای پردازش به سرور ارسال می شود.

ساختار اصلی فرم HTML

نحوه استفاده از عناصر فرم HTML

نحوه استفاده از عنصر <ورودی> HTML

نحوه استفاده از عنصر <label> HTML

نحوه استفاده از عنصر HTML <textarea>

نحوه استفاده از عنصر <انتخاب> HTML

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

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

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

تکنیک های رایج اعتبارسنجی

ارسال فرم و روش ها

نحوه استایل دادن به فرم های HTML

بهترین شیوه ها و دسترسی

نتیجه

ساختار اصلی فرم HTML

می توانید از عنصر <form> برای ایجاد فرم HTML استفاده کنید

 <form action="submit_form" method=" post"> <label for="name">Name:</label> <input type="text" id="name" name=" name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Submit</button> </form>

عنصر <form> HTML محفظه ای برای چندین عنصر فرم HTML است. عنصر <form> می تواند شامل موارد زیر باشد:

<input>

<label>

<select>

<textarea>

<button>

<fieldset>

<legend>

<datalist>

<output>

<option>

<optgroup>

نحوه استفاده از عناصر فرم HTML

در این بخش، نحوه استفاده از برخی از عناصر فرم HTML را یاد خواهید گرفت.

نحوه استفاده از عنصر <ورودی> HTML

عنصر <input> رایج ترین عنصر فرم است. نوع اطلاعاتی که یک عنصر <input> می تواند نگه دارد به ویژگی <type> بستگی دارد.

عنصر <input> فقط می تواند نوع خاصی از داده را بپذیرد که با استفاده از ویژگی <type> به آن اختصاص داده شده است.

 <form action=""> <input type="text" id="name" name="username" placeholder="Enter your username" required /> <input type="password" id="security" name="password" placeholder="Enter your password" required /> <input type="email" name="email" placeholder="Enter your email" /> <input type="checkbox" name="subscribe" value="yes" /> Subscribe to the newsletter <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" /> Female <input type="submit" name="submit" /> </form>

در زیر ویژگی های مختلف <type> وجود دارد که می توان به عنصر <input> نسبت داد:

<input type="text"> : به کاربر اجازه می دهد متن را تایپ کند.

<input type="email"> : ورودی کاربر باید از فرمت ایمیل پیروی کند.

<input type="password"> : رمز عبور را از کاربر می پذیرد. گذرواژه‌ها برای محافظت از حریم خصوصی ورودی، معمولاً به صورت ستاره (*) یا نقطه نمایش داده می‌شوند.

<input type="checkbox"> : کاربر می تواند هیچ یا بسیاری از کادرهای انتخاب نمایش داده شده را انتخاب کند. چک باکس ها را می توان علامت زده و یا علامت آن را بردارید.

<input type="radio"> : به کاربر امکان می دهد فقط یکی از دکمه های رادیویی چند گزینه ای را انتخاب کند.

<input type="submit"> : کاربر را قادر می سازد فرم را ارسال کند.

موارد زیر سایر آپشن های احتمالی موجود در عنصر ورودی هستند:

<input name=" "> : به فیلد ورودی یک نام اختصاص می دهد. نام اختصاص داده شده هنگام ارسال فرم، داده های ورودی را مشخص می کند.

<input id=" "> : شناسه یک شناسه منحصر به فرد برای فیلد ورودی ایجاد می کند. معمولاً با CSS برای استایل و جاوا اسکریپت برای دستکاری های دیگر همراه است.

<input value=" "> : برای تنظیم مقدار اولیه فیلد ورودی استفاده می شود. مقدار اولیه پیش فرض به کاربر ایده ای از اطلاعات مورد نیاز می دهد.

<input placeholder=" "> : یک مقدار شبه کم رنگ تنظیم شده روی فیلد ورودی که وقتی کاربر شروع به تایپ کرد ناپدید می شود. اشاره ای به اینکه چه داده هایی را وارد کنید، مشابه ویژگی مقدار می دهد.

<input required> : مستلزم آن است که فیلد ورودی باید قبل از ارسال پر شود. در صورت پر نشدن پیغام خطا می دهد.

<input disabled> : همانطور که از نام آن پیداست، این امر مانع از تعامل کاربر با فیلد ورودی می شود. فیلد ورودی را از پذیرش ورودی غیرفعال می کند. با این ویژگی، فیلد ورودی غیرقابل کلیک می شود.

<input readonly> : کاربر فقط می تواند مقدار اولیه تنظیم شده را بخواند اما نمی تواند آن را تغییر دهد. برخلاف ویژگی غیرفعال، فیلد ورودی قابل کلیک است اما نمی توان آن را تغییر داد.

توجه داشته باشید که عنصر <input> حاوی ویژگی for نیست.

نحوه استفاده از عنصر <label> HTML

عنصر برچسب متن را با ورودی فرم، کادر انتخاب یا دکمه رادیویی مرتبط می کند.

 <form action=" "> <label for="name" id="user">Username:</label> </form>

عنصر برچسب اطلاعات مورد نیاز در قسمت متن را توصیف می کند.

عنصر برچسب برای دسترس‌پذیری مهم است، این امر باعث می‌شود کاربران صفحه‌خوان راحت‌تر به فرم پیمایش کنند. فناوری های کمکی برچسب را با صدای بلند برای کاربران می خوانند.

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

برچسب استفاده کلی از فرم را بهبود می بخشد، زمینه و راهنمایی را ارائه می دهد.

آپشن های متداول مورد استفاده برای عنصر label موارد زیر است:

<label for=" "></label> : برچسب را با عنصر فرم مربوطه، معمولا یک عنصر ورودی، مرتبط می کند. مقدار ویژگی for همیشه با مقدار id عنصر فرم مرتبط، معمولاً عنصر ورودی، یکسان است.

ویژگی id <label id=" "></label> : یک شناسه منحصر به فرد به برچسب می دهد. مقدار با ویژگی for عنصر فرم مربوطه، معمولاً یک عنصر ورودی، روی همان مقدار تنظیم می شود. برای انتخاب برچسب برای استایل در CSS یا سایر دستکاری ها در جاوا اسکریپت استفاده می شود.

نحوه استفاده از عنصر HTML <textarea>

یک فیلد ورودی متن چند خطی، به کاربران اجازه می دهد متن یا پاراگراف های طولانی تری بنویسند. صفات rows و cols اندازه اولیه کادر textarea را کنترل می کنند.

 <form action=""> <label for="testimony">Testimony:</label> <textarea name="testimony" id="testimony" cols="30" rows="10"></textarea> </form>

صفت rows ارتفاع (اندازه عمودی) کادر textarea را کنترل می کند، تعداد خطوط قابل مشاهده را تعیین می کند در حالی که ویژگی cols عرض (اندازه افقی) را کنترل می کند و تعداد کاراکترهای قابل مشاهده در هر خط را مشخص می کند.

توجه داشته باشید که کادر textarea می تواند بسته شود تا متن وارد شده را در عرض تعریف شده خود قرار دهد.

برخلاف فیلد ورودی تک خطی، عنصر textarea دارای ویژگی maxlength یا ویژگی value نیست. محتوا در تگ های باز و بسته قرار می گیرد.

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

نحوه استفاده از عنصر <انتخاب> HTML

عنصر <select> یک فهرست کشویی ایجاد می کند که به کاربران اجازه می دهد یک یا چند گزینه را از گزینه های فهرست شده انتخاب کنند.

 <form action=""> <label for="numbers">Choose a favorite number:</label> <select name="numbers" id="numbers" size="5" multiple> <option value="" disabled selected>Select a number</option> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> <option value="four">4</option> <option value="five">5</option> <option value="six">6</option> <option value="seven">7</option> <option value="eight">8</option> <option value="nine">9</option> <option value="ten">10</option> </select> </form>

عنصر <option> در عنصر <select> قرار دارد. عنصر <option> مواردی را که باید انتخاب شوند نگه می دارد. هر <option> یک مورد را در فهرست کشویی نشان می دهد.

پیش بینی می شود هر عنصر <option> دارای یک ویژگی <value=" "> باشد، که مقدار ارسالی را در هنگام ارسال فرم حاوی عنصر <select> نگه می دارد. اگر صفت <value=" "> حذف شود، محتوای متن عنصر <option> به مقداری تبدیل می شود که باید ارسال شود.

ویژگی <name=" "> کنترل انتخاب را در سمت سرور هنگام ارسال فرم مشخص می کند. <name=" "> برای پردازش داده های فرم در سرور مهم است.

با قرار دادن ویژگی <selected> در عنصر <option> می توانید یکی از گزینه ها را به عنوان انتخاب پیش فرض انتخاب کنید. اگر هیچ گزینه ای انتخاب نشده باشد، اولین گزینه در فهرست به صورت پیش فرض انتخاب می شود.

ویژگی <size=" "> تعداد گزینه هایی را که می توانید به طور همزمان در منوی کشویی مشاهده کنید، با تنظیم ویژگی <size=" "> در <select> تعیین می کند. توجه داشته باشید که با اسکرول کردن به پایین گزینه های دیگر دیده می شوند.

از جمله ویژگی <disabled> در عنصر <select> ، گزینه select را غیرفعال می‌کند و از انتخاب هر گزینه توسط کاربران جلوگیری می‌کند. گزینه select غیرقابل کلیک می شود.

همچنین، چندین گزینه را می توان با گنجاندن ویژگی <multiple> در عنصر <select> انتخاب کرد. برای انتخاب چندین گزینه می توانید کلید Ctrl (یا Command در مک) را نگه دارید.

درک عنصر <select> و استفاده از ویژگی های لازم می تواند فرم شما را برای انتخاب گزینه های مختلف و برای پردازش آسان عنصر <select> در سمت سرور برای کاربران راحت کند.

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

به عبارت ساده، این فرآیند تحلیل این است که آیا داده های وارد شده در فرم صحیح، کامل و مطابق با فرمت مشخص شده هستند یا خیر.

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

دقت داده ها: از ارسال داده های نادرست یا ناقص جلوگیری می کند.

امنیت: داده ها را تحلیل می کند تا از ارسال داده های نادرست یا مخرب جلوگیری کند و در نتیجه حملات مضر یا نقض داده ها را کاهش دهد.

تجربه کاربر: در صورت وارد کردن اطلاعات اشتباه توسط کاربر، با دادن یک پیغام خطای سریع، پر کردن فرم ها را کم استرس تر می کند. همچنین، می توان از آن برای پیشنهاد قالب مورد انتظار استفاده کرد.

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

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

اعتبار سنجی سمت مشتری: مرورگر کاربر تحلیل ها را قبل از ارسال انجام می دهد. مرورگر چگونه فرم ها را تایید می کند؟ مرورگرها از ویژگی های جاوا اسکریپت، CSS یا HTML برای اعتبارسنجی فرم ها استفاده می کنند. مزیت اعتبارسنجی سمت سرویس گیرنده پیام خطای سریعی است که کاربر در صورت نادرست یا ناقص بودن داده دریافت می کند. پاسخ سریع است و نیازی به تأیید اعتبار از سمت سرور ندارد. یکی از معایب این است که اعتبار سنجی سمت مشتری توسط یک کاربر با تجربه قابل دور زدن است.

اعتبار سنجی سمت سرور: سرور داده های فرم را پس از ارسال تحلیل می کند. اعتبار سنجی سمت سرور قوی تر و ایمن تر است. تأیید مضاعف را انجام می‌دهد و داده‌های فرم را دوباره تأیید می‌کند، حتی اگر اعتبار سنجی سمت کلاینت با شکست مواجه شود یا دور زده شود. اعتبار سنجی سمت سرور معمولاً با استفاده از زبان های برنامه نویسی مانند PHP یا ASP.NET انجام می شود.

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

تکنیک های رایج اعتبارسنجی

اینها ویژگی های رایج HTML هستند که به شما در تصمیم گیری در مورد الگوی اعتبار سنجی فرم کمک می کنند.

محدودیت های طول

می توانید از ویژگی maxlength برای تعیین حداکثر تعداد کاراکترهایی که یک فیلد ورودی می تواند نگه دارد استفاده کنید.

 <form> <input type="text" id="username" name="username" placeholder="Username" maxlength="20" required> <button type="submit">Submit</button> </form>

فیلدهای مورد نیاز

نیاز دارد که فیلدهای ورودی خاصی قبل از ارسال فرم پر شود. برای اجرای این تکنیک از ویژگی <required> استفاده می شود. زمانی که فیلد مورد نیاز توسط کاربر پر نشده باشد پیغام خطا نمایش داده می شود.

 <form> <input type="text" id="username" name="username" placeholder="Username" required> <input type="email" id="email" name="email" placeholder="Email" required> <button type="submit">Submit</button> </form>

فرمت داده

اطمینان حاصل می کند که داده های وارد شده توسط کاربر از فرمت مورد نیاز پیروی می کنند. ویژگی <input type="email"> که برای ایمیل تنظیم شده است، از کاربر می خواهد که قالب ایمیل صحیح (به عنوان مثال: me@example.com) را قبل از ارسال فرم وارد کند.

همین اتفاق می افتد اگر ویژگی type روی عدد <input type="number"> تنظیم شود، کاربر فقط می تواند داده های 0-9 را قرار دهد.

 <form> <input type="email" id="email" name="email" placeholder="Email" required> <button type="submit">Submit</button> </form>

قدرت رمز عبور

ویژگی <pattern=""> برای تعیین پیچیدگی رمز عبور مانند حداقل طول، و گنجاندن حروف بزرگ یا کوچک، اعداد و کاراکترهای خاص استفاده می شود.

ویژگی <title=""> زمانی که کاربر روی فیلد ورودی قرار می گیرد یا زمانی که رمز عبور وارد شده با فرمت رمز عبور مشخص شده مطابقت ندارد، پیام خطا را نمایش می دهد. هرچه پیچیدگی رمز عبور بیشتر باشد، حساب کاربری بالاتر از دسترسی غیرمجاز محافظت می شود.

 <form> <input type="password" id="password" name="password" placeholder="Password" pattern="(?=.\d)(?=.[az])(?=.*[AZ]).{8,}" title="Password must contain at least one number, one uppercase letter, one lowercase letter, and at least 8 or more characters" required> <button type="submit">Submit</button> </form>

مقادیر عددی

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

 <form> <input type="number" id="age" name="age" placeholder="Age" min="18" max="100" required> <button type="submit">Submit</button> </form>

داشتن یک روش خوب اعتبار سنجی فرم به ایجاد فرم هایی با داده های دقیق کمک می کند و آسیب پذیری در برابر حملات مخرب را کاهش می دهد.

ارسال فرم و روش ها

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

روش های ارسال فرم

داده های فرم با استفاده از ویژگی method به سرور ارسال می شود. دو روش متداول وجود دارد:

روش دریافت

با روش get <method="get"> ، داده های فرم با استفاده از URL موجود در نوار آدرس مرورگر به سرور ارسال می شود.

 <form action="http://example.com" method="get"> <input type="text" name="name" /> <input type="submit" value="Submit" /> </form>

با استفاده از نمونه کد بالا، زمانی که کاربر یک نام (مثلا نام کاربر KC است) را در فیلد ورودی به نام ''name'' وارد می کند و روی دکمه ارسال کلیک می کند، داده های فرم در URL به سرور ارسال می شود. مانند این: "http://example.com?name=KC".

روش GET ایمن نیست، زیرا معمولاً برای ارسال مقادیر کمی از داده های غیر حساس استفاده می شود.

روش POST

ویژگی روش post <method=post> داده‌های فرم را در بدنه درخواست HTTP به جای URL به سرور ارسال می‌کند.

 <form action="http://example.com" method="get"> <input type="text" name="name" /> <input type="submit" value="Submit" /> </form>

با استفاده از همان نمونه کد بالا، روش POST داده های فرم را به این شکل به سرور ارسال می کند: "https://example.com/submit.php".

باید توجه داشته باشید که درخواست POST حاوی داده های فرم در URL نیست، بلکه به اسکریپت سمت سرور (submit.php) اشاره می کند که داده های فرم را پردازش می کند.

داده های فرم ارسال شده قابل مشاهده نیست. درخواست POST برای ارسال اطلاعات حساس مانند رمزهای عبور استفاده می شود، زیرا داده ها در URL قابل مشاهده نیستند، بلکه در درخواست بدنه HTTP ارسال می شوند.

نحوه استایل دادن به فرم های HTML

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

انتخابگرها : انتخابگرهای CSS مانند انتخابگرهای عنصر، انتخابگر کلاس یا انتخابگرهای ID می‌توانند برای انتخاب عناصر خاص در کد HTML برای استایل‌سازی استفاده شوند.

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

Box Model : با آگاهی از آپشن های CSS مانند padding، border و margin که بر فاصله و چیدمان تأثیر می‌گذارند، می‌توانید عناصر HTML را استایل دهید.

رنگ‌ها و پس‌زمینه : رنگ متن یا پس‌زمینه شما را می‌توان با استفاده از آپشن های CSS مانند رنگ و رنگ پس‌زمینه (یا پس‌زمینه-تصویر) استایل داد.

پاسخگویی : با پرس و جوهای رسانه ای، می توانید فرم خود را پاسخگو کنید و با اندازه های مختلف صفحه نمایش و دستگاه ها سازگار شوید.

Layout : می‌توانید طرح‌بندی یک فرم را کنترل کنید تا با آپشن های CSS مانند نمایش، شناور و موقعیت‌یابی، کاربر پسند شود.

بهترین شیوه ها و دسترسی

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

ساختارها و معناشناسی

همیشه از عناصر HTML معنایی مناسب (مانند <form> , <input> , <label> و غیره) برای ساختار نه تنها فرم ها بلکه هر سند HTML دیگر استفاده کنید.

عناصر را به درستی تودرتو قرار داده و برچسب ها را به فیلد ورودی مربوطه خود مرتبط کنند.

مطمئن شوید که فیلدهای ورودی شما دارای ویژگی های نوع مناسب هستند.

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

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

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

طراحی تعاملی

فرم های شما باید پاسخگو باشند و با اندازه های مختلف صفحه نمایش و دستگاه ها سازگار شوند.

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

طراحی و کنتراست

از فونت ها و رنگ هایی استفاده کنید که به راحتی قابل مشاهده باشند.

تضاد رنگ بین متن و پس‌زمینه باید خوانایی را تضمین کند، به‌ویژه برای کاربرانی که دید ضعیفی دارند.

نقش ها و ویژگی های ARIA

نقش‌ها و آپشن های ARIA (Accessible Rich Internet Application) دسترسی را برای کاربران صفحه‌خوان یا سایر فناوری‌های کمکی بهبود می‌بخشد.

آپشن های ARIA ( aria-labelledby ، aria-describedby و aria-invalid ) زمینه و بازخورد اضافی برای عناصر فرم فراهم می‌کنند.

نتیجه

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

می توانید با استفاده از گواهی طراحی وب واکنش گرا freeCodeCamp درباره فرم های HTML و طراحی وب واکنش گرا بیشتر بدانید.

خبرکاو