فرم ها در HTML

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

در این مقاله آموزش کامل طراحی و ایجاد فرم های تماس با ما با HTML ، لیست کشویی ، دستور get و ویژگی های action و method آشنا خواهید شد.

آشنایی با فرم‌ ها در HTML

افزودن فرم به وب‌ سایت توسط تگ <form> امكان پذیر است. كلیه عناصری كه به نحوی برای تشكیل فرم‌ها مورد نیاز هستند در تگ‌های ابتدایی و انتهایی <form> قرار می‌گیرند. در هر تگ <form> دو ویژگی با نام‌های action و method تعریف می‌شوند.

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

این ویژگی توسط مقادیر Post یا get قابل تعریف است. اما تصمیم در خصوص درج هر یك از دو مقادیر، به متغیرهای گوناگونی وابستگی خواهد داشت. این فاكتورها عبارتند از: سطح پیچدگی فرم مورد نظر، میزان ارسال داده‌ها.

با توجه به این متغیرها، اگر فرم مورد نظر نسبتا كوچك بوده و از امنیت قابل قبولی برخوردار نباشد استفاده از مقادیر get گزینه مناسب‌تری خواهد بود.

ویژگی‌های دیگری كه در تگ <Form> به كار گرفته می‌شوند:

ویژگی enctype یكی از ویژگی‌های ارزشمندی است كه در تگ‌های <form> مورد استفاده قرار می‌گیرد و به منظور تعیین نحوه رمزگذاری و ارائه داده‌ها در صفحه استفاده می‌شود. ویژگی lang، زبان مورد نظر را برای فرم مشخص می‌كند. از ویژگی‌های name و id نیز می‌توان برای تعیین نام فرم استفاده كرد.

ایجاد یك فیلد برای داده‌های ورودی متنی با فرم ها در HTML

استفاده از تگ <input/> و ویژگی Type سبب ایجاد فیلد معینی می‌شود كه امكان ورود داده‌ها را در یك خط خواهد داشت. این ویژگی را در تگ مذكور و به صورت type=”text” نمایش می‌دهیم. استفاده از فیلد داده‌های ورودی برای دریافت اطلاعاتی از قبیل نام و آدرس ایده مناسبی بوده و از اهمیت ویژه‌ای برخوردار است. برای افزودن چنین فیلدهایی حضور ویژگی name ضروری است. به كمك این ویژگی می‌توان نام مورد نظر را به آن فیلد متنی اختصاص داد. ابعاد فیلد داده‌های ورودی در هر یك از مرورگر وب‌ها متفاوت خواهد بود. اما محدوده‌ طولی آن را می‌توان توسط ویژگی size تعیین نمود. به منظور نظارت كامل بر تعداد كاراكترهای درج شده در هر فیلد و تجاوز نكردن آن‌ها از حد تعیین شده استفاده از ویژگی maxlength را توصیه می‌كنیم. مثال :

<input type= "text" name= "email" size= "30" maxlength= "64"/>

خروجی :

 ایجاد فیلد كلمه عبور

با استفاده از ویژگی type و درج آن به شكل type=”password” می‌توان فیلد كلمه عبور ایجاد كرد. این فیلد مانع از ظهور عبارات اصلی نوشته شده در آن می‌گردد. فیلدهای كلمه عبور از همان قواعد مربوط به فیلدهای متنی تبعیت می‌كند. با این تفاوت كه كاراكترهای موجود در آن‌ها به شكل نامفهومی ظاهر می‌گردند. این كاراكترها به صورت علامت دایره یا ستاره نشان داده می‌شوند. به این ترتیب عبارتی كه توسط كاربر نوشته شده به عنوان یك كلمه عبور تلقی می‌گردد و برای سایر افراد قابل مشاهده نخواهد بود. كلیه ویژگی‌های كه در تهیه فیلدهای متنی به كار می‌روند در این بخش نیز قابل استفاده هستند. به مثالی از تگ فیلد كلمه عبور توجه كنید:

<input type= "password" name= "password" size= "7" maxlength= "7"/>

خروجی به صورت زیر می‌باشد :

در وب‌سایت‌های مختلف غالبا محیط‌هایی تعبیه شده برای نمایش نظرات و پاسخ‌های محاطبان به كار می‌رود. درج تگ <text area> سبب ایجاد چنین محیطی در صفحه خواهد شد. بر خلاف فیلدهای متنی كه به موجب ویژگیهای خاص آن، هر كاربر مجاز به نوشتن تنها یك خط است. گنجایش محیط‌های متنی به گونه‌ای است كه فضای بیشتری را برای درج پاراگراف‌های متعدد، در اختیار كاربران می‌گذارد. ابعاد هر یك از این محیط‌ها توسط ویژگی‌های rows و cols تعیین می‌شود. ویژگی rows مشخص كننده‌ای طول این فضای نمایشی است و در واقع تعداد خطوط موجود در آن را معین می‌كند. پهنای این محیط‌ها از طریق ویژگی cols مشخص می‌شوند. به عنوان مثال دستور rows=”۴″ و cols=”۳۰″ سبب تشكیل محیطی می‌شود كه دارای ۴ خط بوده و امكان درج ۳۰ كاراكتر در هر خط را به كاربر می‌دهد. چنانچه متن نوشته شده در این محیط بیش از تعداد كاراكترهای مجاز باشد، نوار ابزار حركت‌دهنده‌ای، برای جای دادن سطرهای اضافی، ایجاد می‌شود.

مولفه <text area> به صورت دو تگ ابتدایی و انتهایی، ظاهر می‌شود. بنابراین هر كاربر با مشاهده این عبارت آن‌ها را در محیط متنی تعبیه شده، درج می‌كند. به مثالی از این فرم توجه كنید:

<textarea name= "comments" rows= "5" cols= "20"></textarea>

خروجی تگ بالا فرم زیر را در مرورگر به وجود خواهد آورد:

ایجاد cheek box با فرم ها در  HTML 

cheek box امكان انتخاب یك گزینه از بین چند گزینه را می‌دهد. با استفاده از تگ <input/> می‌توانید cheek box به فرم اضافه كنید. برای این منظور بایستی  ویژگی type را با cheek box مقدار‌دهی كنید.

در هنگامی كه یك گروه از cheek boxها را داشته باشید، بایستی آن‌ها name یكسانی داشته باشند. اما valueهای آن‌ها می‌تواند متفاوت باشد. به مثالی از این فرم توجه كنید:

<input type= "checkbox" name= "newsletter" value= "headlines"/>Breaking News
<input type= "checkbox" name= "newsletter" value= "sport"/>Sport
<input type= "checkbox" name= "newsletter" value= "showbiz"/>Entertainment
<input type= "checkbox" name= "newsletter" value= "finance"/>Economy

خروجی به صورت زیر می‌باشد:

افزودن radio button

برای اینكه بتوانید كاربر را مجاز به انتخاب یكی از گزینه‌های موجود از بین چند گزینه نمایید، از radio button ها استفاده كنید. عملكرد این دكمه‌ها همانند cheek box ها است با این تفاوت كه radio button ها، حق انتخاب یكی از گزینه‌ها را به كاربر می‌دهد. بیشترین كاربرد این دسته از radio button ها در مواردی است كه قصد گرفتن بله/خیر را از سوی كاربر داشته باشید. برای انتخاب چنین گزینه‌هایی در صفحه نیاز به تگ <input/> خواهید داشت. ویژگی type را معادل radio قرار دهید. به مثالی از این تگ توجه كنید:

<input type= "radio" name= "city" value= "chicago"/>Chicago
<input type= "radio" name= "city" value= "new_york"/>New York
<input type= "radio" name= "city" value= "los_angeles"/>Los Angeles
<input type= "radio" name= "city" value= "san_francisco"/>San Francisco

خروجی در مرورگر به صورت زیر می‌باشد:

ساخت فهرست با فرم ها در HTML

اگر در صدد ایجاد فهرست می‌باشید كافی است به تگ‌های <select> مراجع كنید و به ازا ساخت هر یك از فهرست‌ها نام خاصی را برای ویژگی name در نظر گرفته و آن را به تگ ابتدایی <select> اضافه نمایید. علاوه بر ویژگی name با ثبت ویژگی multiple در این دستورالعمل می‌توان امكان انتخاب بیش از یك گزینه را به كاربر ارائه كرد.

برای ایجاد یك فهرست scroll نیاز به استفاده از ویژگی size خواهیم داشت. برای نمونه چنانچه این ویژگی را معادل عدد ۵ قرار دهید در پنجره‌ای مرورگر وب فهرستی ظاهر می‌شود كه حاوی ۵ گزینه است. به این ترتیب می‌توان گزینه‌های بیشتری را در فهرست گنجاند. در میان تگ‌های ابتدایی و انتهایی <select> امكان درج تگ <options> وجود خواهد داشت. اغلب طراحان وب به منظور مطابقت با محیط XHTML در دستور العمل‌های خود از آوردن تگ انتهایی <options> اجتناب می‌ورزند. مثال:

<select name= "city">
<option value= "">select a city..</option>
<option value= "">LOs Angeles</option>
<option value= "">Pasadena</option>
<option value= "">San Diego</option>
<option value= "">Santa Barbara</option>
<option value= "">Berkeley</option>
<option value= "">San Francisco</option>
<option value= "">San Jose</option>
</select>

خروجی تگ‌های بالا به صورت زیر می‌باشد.

در مثال بالا از ویژگی size استفاده نشد. اما در مثال زیر ویژگی size به كار رفته است.

به مثالی از ویژگی size توجه كنید:

<select name= “event” size= “۸” multiple= “multiple”>
<option value= “۱”>Art Exhibit</option>
<option value= “۲”>Concert</option>
<option value= “۳”>Festival</option>
<option value= “۴”>Sporting</option>
<option value= “۵”>Theater</option>
</select>

حال نتیجه را ببینید:

ساخت كلید  Reset با فرم ها در HTML

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

با استفاده از ویژگی type و درج آن به شكل type=”reset” می‌توان دكمه پاك كردن (Reset) ایجاد كرد.

به یك نمونه از این تگ توجه كنید:

<form method="post" action="script.cgi">
<input type="text"><br>
<input type="text"><br>
<input type="reset">
</form>

نتیجه تگ‌های بالا در مرورگر دكمه‌ای به شكل   در خواهد آورد كه كاربر با هر بار كلیك بر روی آن می‌تواند نوشته‌های خود را كه در فرم تایپ كرده پاك كند.

ایجاد فیلد‌های مخفی

چنانچه در صفحه وب برای اجرای فرایندی از فیلد‌هایی مشخص استفاده كرده‌اید. اما علاقه‌ای به ظاهر شدن آن‌ها در صفحه ندارید می‌توانید هر یك از این فیلد‌ها را مخفی كنید. برای این منظور از تگ <input/> و ویژگی type استفاده كنید و این ویژگی را معادل عبارت hidden قرار دهید قرار دهید. در طی اجرای این فرایند از ویژگی‌های name و value نیز به منظور تعیین كننده اطلاعاتی است كه باید ارائه شود.

از این فیلدها جهت نگهداری اطلاعات موقتی می‌توانید استفاده كنید. این امر می‌تواند از محاسبات اضافی جلوگیری به عمل آورد. همچنین با استفاده از این ویژگی می‌توانید یك فرم را یه روش‌های مختلف به كاربران نمایش دهید. بر اساس نیاز كاربران صفحات وب متفاوتی برای كاربران نمایش داده می‌شود.

امكان ارسال فایل‌های ضمیمه با فرم ها در HTML

هر كاربر می‌تواند با استفاده از تگ <input/> و درج ویژگی type=”file” نسبت به ارسال فایل‌های ضمیمه اقدام كند. با اجرای این دستور فیلد متنی معینی در صفحه پدید می‌آید كه مسیر فایل مورد نظر را می‌توان در آن محیط درج نمود. با استفاده از گزینه یا دكمه‌ای كه در كنار این فیلد ظاهر می‌شود نیز امكان جستجوی درایوهای موجود در سیستم و انتخاب فایل میسر خواهد بود.

هنگام استفاده از فیلد‌هایی كه برای گزینش فایل‌ها مورد استفاده قرار می‌گیرند درج ویژگی enctype به همراه تگ <form> ضروری است. ویژگی مذكور برابر عبارت “multipart/form-data” قرار خواهد گرفت.

علاوه بر این لازم است ویژگی method را نیز به صفحه افزوده و آن را با عبارت post مقداردهی نمود.

محدودیت در ارسال فایل‌های ضمیمه

با درج ویژگی accept در تگ <input/> می‌توان انواع معینی از فایل‌ها را ارسال نمود. به این ترتیب كاربر قادر به ضمیمه كردن آن دسته از فایل‌هایی است كه در این ویژگی تعریف شده باشد. این ویژگی برابر انواع فایل‌های MIME قرار می‌گیرد. حال برای آنكه فقط امكان ضمیمه شدن فایل‌های تصویری فراهم شود این ویژگی را توسط عبارت “image*/” مقداردهی كنید. علامت ستاره گویای پذیرش تمامی فرمت‌هایی است كه از نوع MIMEimage هستند. برای محدود كردن گسترده انتخاب فایل‌های تصویری نیز می‌توان از طریق تعریف فرمت‌های ویژه برای ارسال تصاویر اقدام نمود. به این ترتیب تنها تصاویری زا می‌توان ضمیمه كرد كه دارای آن فرمت به خصوص باشند. مثلا با درج دستور accept=”image/gif jpg” تصاویری كه با فرمت‌های gif و jpeg تهیه شده‌اند.

قابلیت ضمیمه شدن را خواهند شد، برای اعمال محدودیت در انتخاب فایل‌های متنی نیز عبارت كلی “text/*” را می‌توان برای ویژگی مذكور تعریف كرد.

ارسال فایل‌های ضمیمه به یك آدرس Email بااستفاده از فرم ها در HTML

با تعیین آدرس Email مورد نظر در ویژگی action می‌توان فایل ضمیمه شده را به آدرس مذكور ارسال نمود با این وجود استفاده از چنین روشی از از امنیت بالایی برخوردار نبوده و به حد كافی از اصول امنیتی تبعیت نمی‌كند.

مثال:

<form action= "./cgi-bin/form_processing.pl" method= "post" name= "myform" id= "myform" enctype= "multipart/form-data">
<input type= "file" name= "submission"/>
</form>

خروجی به صورت زیر می‌باشد:

بعد از كلید بر روی دكمه Browse كادر محاوره زیر باز می‌شود كه با انتخاب فایل مورد نظر و كلیك بر روی دكمه Open فایل به صفحه اضافه خواهد شد.