طراحی وب سایت

استفاده از تگ datalist در فرم های اچ تی ام ال (HTML)

یکی دیگر از ویژگی های فرم ها در HTML5 این است که از طریق آن ها می توان این امکان را به کاربران داد تا چنانچه اولین حرف یک واژه را تایپ کردند، اگر گزینه ای با آن تطبیق داشت داخل پنجره ای به نمایش در آید. برای روش شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input name="country" list="country_name"> <datalist id="country_name"> <option value="Afghanistan"> <option value="Albania"> <option value="Algeria"> </datalist> </form> </body> </html> پیش از توضیح پیرامون کد فوق ابتدا آن را در مرورگر اجرا می کنیم: با وارد کردن حرف a می بینیم که گزینه هایی که با حرف a شروع می شوند به کاربر پیشنهاد می شوند. حال که با عملکرد کد فوق آشنا شدیم می توان به توضیح کد فوق پرداخت.ابتدا با استفاده از تگ <datalist> و </datalist> تعدادی گزینه تعریف می کنیم. برای تعریف گزینه از تگ <option> استفاده می کنیم و با استفاده از Attribute یی تحت عنوان value مقداری برای آن در نظر می گیریم. علاوه بر این در تگ آغازین <datalist> می بایست با دستور id نامی برای تگ <datalist> انتخاب کنیم. به هر تعداد که بخواهیم می توان در تگ <datalist> از تگ های <option> استفاده کنیم. در نهایت در تگ <input> دستور list را نوشته و مقدار آن را برابر با مقداری که برای id در نظر گرفتیم قرار می دهیم.
به کار گیری دستور autofocus در فرم های اچ تی ام ال (HTML)

اگر بخواهیم زماینکه وارد صفحه ای می شویم بدون آنکه نیاز داشته باشیم داخل فیلدی کلیک کنیم به صورت خودکار نشانگر موس داخل آن فیلد قرار گیرد، می بایست از دستوری تحت عنوان autofocus استفاده کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input name="text"> <input name="text"> <input name="text" autofocus> </form> </body> </html> می بینیم که سه فیلد داخل فرم قرار داده ایم اما در فیلد سوم از دستور autofocus استفاده کرده ایم. حال فایل خود را در مرورگر اجرا می کنیم: می بینیم که نشانگر موس به صورت خودکار وارد فیلد سوم شده است.
استفاده از range در تگ input برای انتخاب طیفی از اعداد در فرم های اچ تی ام ال (HTML)

اگر بخواهیم این امکان را برای کاربران فراهم آوریم که بتوانند طیفی از اعداد را در فرم های اچ تی ام ال (HTML) انتخاب کنند می بایست از مقدار range برای type استفاده کنیم. برای روشن شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="range" name="temperature"> </form> </body> </html> حال به اجرای این فایل در مرورگر می پردازیم: می بینیم که یک اسلایدر روی صفحه قرار گرفته است. اگر اسلایدر را به منتها الیه سمت چپ بکشیم عدد صفر را انتخاب کرده ایم و اگر اسلایدر را به منتها الیه سمت راست بکشیم عدد صد را انتخاب کرده ایم. علاوه بر این می توان مقدار حداقل و حداکثر نیز برای این اسلایدر به صورت زیر در نظر گرفت: <body> <form action="send-form-information.php" method="post"> <input type="range" name="temperature" min="0" max="70"> </form> </body> می بینیم که با Attribute هایی از جنس min و max می توان مقادیر حداقل و حداکثری برای اسلایدر خود در نظر بگیریم.
به کارگیری دستور email در تگ input برای وارد کردن ایمیل در فرم های اچ تی ام ال (HTML)

اگر بخواهیم فیلدی تعریف کنیم که فقط آدرس های صحیح ایمیل را دریافت کند می بایست از کد زیر استفاده کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="email" name="email_address"> </form> </body> </html> همانطور که در کد فوق مشخص است مقدار type را برابر با email قرار داده ایم. مرورگر را به روز رسانی می کنیم: همانطور که در تصویر فوق می بینیم آدرس ایمیل را به صورت کامل وارد نکرده و com یا ir و ... را ننوشته ایم. با فشردن دکمه Tab می بینیم که با رنگ قرمز به کاربر اخطار داده می شود. با وارد کردن آدرس کامل اخطار هم از بین خواهد رفت.
استفاده از url به منظور وارد کردن آدرس های اینترنتی در فیلدهای فرم اچ تی ام ال (HTML)

چنانچه بخواهیم فیلدی ایجاد کنیم که از آن طریق کاربران بتوانند آدرس وب سایتی را وارد فرم کنند می بایست از کد زیر استفاده کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="url" name="web_address"> </form> </body> </html> همانطور که در کد فوق مشاهده می شود مقدار type را برابر با url قرار داده ایم. مرورگر را به روز رسانی می کنیم: همانطور که در تصویر فوق مشخص است آدرس کامل سایت گوگل را وارد کرده ایم. حال آدرسی ناقص بدون http:// را به صورت زیر وارد می کنیم: می بینیم که آدرس را به صورت ناقص وارد کرده ایم. پس از وارد کردن آدرس وب و فشردن دکمه Tab روی کیبورد می بینیم که با یک رنگ قرمز به ما نشان داده می شود که آدرس صحیح وارد نشده است.
به کارگیری از reset در فرم های اچ تی ام ال (HTML) برای حذف نوشته های داخل فرم

یکی دیگر از مقادیری که می توان برای type در نظر گرفت reset است. کاری که reset انجام می دهد این است که کلیه اطلاعات فرم را پاک می کند: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="text" name="fistName"> <input type="reset" name="resetForm" value="پاک کردن فرم"> </form> </body> </html> همانطور که در کد فوق می بینیم ابتدا یک فیلد برای وارد کرد نام ایجاد کرده ایم. سپس در دومین تگ <input> مقدار type را برابر با reset قرار داده ایم. حال فرض کنیم که در فیلد اول کلمه ای را وارد می کنیم. با کلیک روی دکمه "پاک کردن فرم"، اطلاعات فرم پاک می شوند: حال چنانچه بخواهیم دکمه پاک کردن فرم را غیر فعال کنیم می بایست کد فوق را به صورت زیر تکمیل نماییم: <body> <form action="send-form-information.php" method="post"> <input type="text" name="fistName"> <input type="reset" name="resetForm" value="پاک کردن فرم" disabled="disabled"> </form> </body> به منظور غیر فعال کردن یک فرم می توان از Attribute یی تحت عنوان disabled استفاده کرده و مقدار آن را برابر با disabled قرار دارد. اکنون مجدد مرورگر خود را به روز رسانی می کنیم: می بینیم که دکمه از این پس قابل کلیک کردن نیست و غیر فعال شده است.
آپلود کردن فایل در فرم های اچ تی ام ال (HTML)

گاهی اوقات نیاز داریم تا این امکان را برای کاربران سایت خود فراهم سازیم تا فایلی همچون عکس خود را آپلود کنند. برای این منظور می بایست از کد زیر استفاده کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="file" name="fileUpload"> </form> </body> </html> در کد فوق می بینیم که مقدار type را برابر با file قرار داده ایم و نامی هم برای name به صورت دلخواه انتخاب کرده ایم که در این مثال fileUplead است: Attribute جدیدی که در کد فوق با آن آشنا شدیم name نام دارد. در واقع هر تگ <input> فرم در صفحات اچ تی ام ال (HTML) که فاقد این Attribute باشد توسط وب سرور شناخته نخواهد شد. در واقع با این Attribute به تگ مربوطه هویت می دهیم و با این کار خواهیم توانست داده های ورودی تگ مد نظر را مورد تحلیل قرار دهیم.
نحوه وارد کردن رمزعبور در فیلدهای فرم در اچ تی ام ال (HTML)

چنانچه بخواهیم فیلدی در فرم خود قرار دهیم که کاربران از آن طریق بتوانند رمز عبور خود را وارد نمایند بایستی مقدار Attribute مرتبط با type را از text به password تغییر دهیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="password"> </form> </body> </html> با اجرای کد فوق در مرورگر با نتیجه زیر مواجه خواهیم شد: می بینیم که به محض وارد کردن داده ها، کاراکترهای ورودی از چشم کاربر مخفی خواهد شد (لازم به ذکر است که به جای password از text هم می توان استفاده کرد اما این در حالی است که به خاطر مسائل امنیتی استفاده از مقدار password کار صحیح تری نسبت به text است).
آشنایی با فرم ها در اچ تی ام ال (HTML)

یکی از اجزای جدایی ناپذیر وب سایت های دینامیک، استفاده از فرم ها برای جمع آوری اطلاعات از کاربران اینترنتی است. در واقع زمانیکه می خواهیم در یک سایت یا وبلاگ ثبت نام کنیم، در خبرنامه ثبت نام کنیم و یا حتی نام کاربری و رمز عبور خود را وارد سایتی کنیم به فرم ها نیاز داریم.همانطور که قبلاً هم به آن اشاره شد در این سری از آموزش ها تمرکز روی طراحی سایت های استاتیک است اما از آنجا که استفاده از فرم ها، هم نیازمند آگاهی از اصول طراحی سایت های استاتیک همچون تگ های مرتبط با فرم ها است و هم برنامه نویسی دینامیک توسط زبان هایی همچون PHP، در این سری از آموزش ها بخش طراحی استاتیک فرم های اچ تی ام ال (HTML) را آموزش خواهیم داد.برای ساخت یک فرم در صفحات اچ تی ام ال (HTML) از تگی تحت عنوان <form></form> استفاده می کنیم. یکی از اصلی ترین Attribute های تگ <form> در زبان اچ تی ام ال (HTML) چیزی است تحت عنوان action. کاری این که این Attribute انجام می دهد این است که اطلاعاتی که کاربر داخل بخش های مختلف فرم وارد می کند را برای یک فایل مثلاً با پسوند php که مسئول تحلیل اطلاعات فرم ها است ارسال می کند. Attribute دیگری که داخل تگ <form> قرار می گیرد method نام دارد که Value یا مقدار آن می تواند get یا post باشد(با توجه به اینکه اینگونه موارد خارج از حوزه تدریس این دوره آموزشی بوده و بیشتر مرتبط با دوره آموزش PHP است، از ارائه توضیحات تکمیلی پیرامون این مسائل خودداری خواهیم کرد).تگ <form> بدون استفاده از تگی تحت عنوان <input> هیچ کاری انجام نخواهد داد. در واقع تگ <input> به معنی "ورودی" این وظیفه را دارا است تا فضایی روی صفحات اچ تی ام ال (HTML) ایجاد کند تا کاربر بتواند اطلاعات خود را داخل آنها تایپ نماید (لازم به ذکر است که تگ <input> همانند تگی همچون <img> نیاز به تگ پاپانی به شکل </input> ندارد).حال برای روشن شدن این مسئله کد زیر را وارد ویرایشگر متن خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="text"> </form> </body> </html> همانطور که در کد فوق می بینیم، داخل تگ <body> ابتدا تگ <form> را نوشته ایم. برای این تگ دو Attribute تحت عناوین action و method در نظر گرفته ایم که action مقداری برابر با send-form-information.php داشته و method هم مقداری برابر با post دارد. به خاطر داشته باشیم که نام فایلی که برای action در نظر گرفته ایم نامی دلخواه است و در این آموزش فقط جهت روشن تر شدن مطلب چنین کدی را به فرم خود اضافه کرده ایم.سپس داخل تگ های <form> و </form> یک تگ <input> اضافه کرده ایم و از Attribute یی تحت عنوان type برای مشخص کردن نوع این داده ورودی فرم استفاده کرده ایم که text است که فیلدی ایجاد می کند یک خطی و به صورت پیش فرض 20 کاراکتر طول دارد. لازم به ذکر است کاربر در این خانه از فرم می تواند هر متنی را تایپ نماید (اگر از type استفاده نکنیم، به صورت پیش فرض گزینه text مد نظر قرار داده خواهد شد). اکنون با ذخیره کردن این فایل و اجرای آن در مرورگر خروجی این صفحه را خواهیم دید: می بینیم که اصطلاحاً یک Field یا "فیلد" فرم روی صفحه ایجاد شده است. گاهی اوقات در برخی از وب سایت ها می بینیم که برخی خانه های فرم از پیش داری متنی هستند که این متن توسط برنامه نویس وارد فرم شده است و چنانچه کاربر نیاز داشت می تواند آن متن را تغییر دهد. برای افزودن چنین ویژگی به تگ <input> خود می بایست کد فوق را به صورت زیر تکمیل کنیم: <body> <form action="send-form-information.php" method="post"> <input type="text" value="Iran"> </form> </body> همانطور که می بینیم داخل تگ <input> از Attribute یی تحت عنوان value استفاده کرده ایم و مقدار در نظر گرفته شده برای آن را هم معادل با Iran گذاشته ایم. اکنون مرورگر خود را به روز رسانی می کنیم: می بینیم که واژه Iran داخل این خانه از فرم قرار گرفته است. فرض کنیم که این خانه از فرم مخصوص وارد کردن نام کشور محل سکونت کاربران است. حال کاربر با مشاهده این خانه اگر در ایران زندگی می کرد که نیاز به تغییر داده ورودی این خانه از فرم ندارد و اگر هم در کشور دیگری زندگی می کرد به سادگی می تواند این مقدار اولیه فرم را پاک کند و هر مقداری دیگر که تمایل داشت را وارد فرم خود نماید.
به کارگیری از تگ caption در جداول اچ تی ام ال (html)

گاهی اوقات در طراحی صفحات وب نیاز داریم تا برای جداول خود یک عنوان در نظر بگیریم که این کار با استفاده از تگ <caption> امکان پذیر است. برای آشنایی با این تگ، کد زیر را وارد ویرایشگر متن خود می کنیم:<!DOCTYPE html> <html> <head> <title>Netshahr</title> </head> <body> <table border="1"> <caption>This is a table</caption> <tr> <td>item 1</td> <td>item 2</td> </tr> <tr> <td>item 3</td> <td>item 4</td> </tr> </table> </body> </html> در ارتباط با به کارگیری تگ <caption> این نکته را همواره می بایست به خاطر داشته باشیم که جایگاه قرار گیری این تگ بلافاصله پس از تگ <table> است: همانطور که در تصویر فوق مشخص است، عنوانی برای این جدول تحت به صورت This is a table در نظر گرفته شده است.