آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)

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

در این قسمت ابتدا به سراغ ساختار اساسی فرم‌ها و سپس به بررسی دقیق هر یک از عناصر آن با ذکر جزئیات و کاربردهایشان خواهیم پرداخت.

ساختار اساسی فرم

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

یک فرم شامل سه بخش مهم می‌باشد:

• تگ form که شامل URL صفحه ای که اطلاعات فرم را پردازش می‌کند.
• عناصر فرم، مانند کادرهای متنی، کادرهای علامت، لیست‌ها و ...
• دکمه Submit که داده هایی را که از کابر گرفته را برای صفحه پردازشگر رویداد سرور میفرستد.

مثال زیر ساختار اصلی یک فرم را نشان می‌دهد:

<form action="php/showform.php" method="post">
<h3> Personal Information </h3>
<fieldset id="pesronal">
<label> F-name: </label>
<input type="text" name="f-name" size="30" /> <br />
<label> L-name: </label>
<input type="text" name="l-name" size="30" /> <br />
<label> Age: </label>
<input type="text" name="age" size="30" /> <br />
...
<p id="buttons">
<input type="submit"value="Send" />
<input type="reset" value="Start Over" />
</p>
</fieldset>
</form>

نتیجه در مرورگر :

تگ <form> :این تگ برای ایجاد فرم‌ها استفاده می‌شود. در واقع هر فرمی به وسیله تگ باز <form> شروع می‌شود و با تگ بسته </form> پایان می‌یابد. عناصر فرم باید حتما داخل این عنصر با کار روند.

این تگ شامل  تعدادی صفت است که در ادامه بررسی خواهیم کرد:

action : فرم‌ها بعد از اینکه توسط کاربر پر می‌شوند می‌بایست برای یک برنامه پردازشگر که معمولا به یکی از زبان‌های تحت سرور همانند php , asp.net , jsp و... نوشته می‌شوند. فرستاده شوند. ما باید در این صفت آدرس صفحه پردازشگر که قرار است فرم به آن ارسال سود را مشخص کنیم.

<form action="php/showform.php">

method : همانطور که از اسم این صفت پیداست روش ارسال فرم را مشخص می‌کند.صفت متد دو مقدار زیر را می‌پذیرد:

• get
• post

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

1. متد get از URL (آدرس) صفحه برای ارسال داده‌ها استفاده می‌کند و آن‌ها را در قالب جفت‌های name=value به آدرس صفحه پردازشگر متصل می‌کند. اما متد post به صورت مخفی (در واقع از طریق Http Request ها) برای این کار استفاده می‌کند..

برای بهتر متوجه شدن این موضوع به فرمی که در بالا طراحی کرده ایم توجه کنید:

اول صفت method  آن را برابر با get قرار دهید و آن را در مرورگر اجرا کنید.حال فرم را پر کنید به طور مثال:

حالا بر روی دکمه Send کلیک کنید و به نوار آدرس نگاه کنید:

2. از آن جا که متد get از آدرس برای ارسال داده‌ها استفاده می‌کند، امکان نمایش محتویات فیلدها (حتی فیلدهای رمزی) در نوار آدرس وجود دارد که این نشان دهنده عدم امنیت کافی در ارسال داده از این طریق است. اما متد post به دلیل ارسال مخفی داده ها، امنیت کافی دارد.

3. تفاوت سوم در محدودیت حجم داده‌های ارسالی از طریق URL توسط مرورگرها معمولا در ارسال به این طریق محدودیت قائل می‌شوند که البته این مورد از مرورگز تا مرورگز متفاوت است. اما در روش ارسال داده‌ها از طریق متد post هیچ محدودیتی در حجم داده‌های ارسالی وجود ندارد.

4. یکی دیگر از تفاوت‌های این دو روش در سرعت ارسال داده هاست که معمولا سرعت انجام این کار از طریق get کمی بیشتر از post است.

?name=value&name2=value2&name3=value3....

http://www.mysite.com/processor.php?name=sajad&family=deris&age=17

enctype : در این صفت رمزگذاری اطلاعات فرم را مشخص می‌کند. که سه مقدار زیر را می‌تواند اختیار کند.

• appliction/x-www.form-URLencoded : این مورد که گزینه پیشفرض این صفت نیز هست مشخص می‌کند. که داده‌های ارسالی به روش زیر می‌بایست رمز گذاری شوند :

تمامی کاراکتر‌های space به کاراکتر + و کاراکترهای خاص (مانند & , ? , / , $ , و...) و غیر الفبایی (در سیستم کدگذاری ascii) به کارکترهای هگزادسیمال معادشان تبدیل شوند.

• multipart/form-data : از این گزینه هنگامی استفاده می‌شود که داخل فرم یک عنصر file uploading وجود داشته باشد. یعنی مقدار صفت type برای تگ input برابر با file باشد.(با این تگ در ادامه آشنا خواهید شد.)
• text/plain : از این گزینه می‌بایست هنگامی استفاده کرد که فرم به جای یک صفحه پردازشگر به یک ایمیل خاص ارسال می‌شود. در این گزینه فقط کاراکتر‌های space به + تبدیل شده و بقیه کاراکترها به همان شکلی که هستند ارسال می‌شوند.

<form action="mailto:[email protected]?subject=hello.....">

تگ <label> : از این تگ برای ایجاد برجسبها در کنار عناصر دیگر فرم استفاده می‌شود. در واقع labelها ، همان متن‌های کوتاهی هستند که کاری را که یک عنصر می‌کند به کاربر نشان میدهند.  ودارای یک صفت می‌باشد:

for : از این صفت برای نسبت دادن یک برچسب به یک عنصر خاص استفاده می‌شود. با این صفت می‌توان تمرکز بیشتری بر روی عناصر یک form داشت. این صفت ID یک عنصر از form را به عنوان مقدار می‌پذبرد.

مثال زیر نحوه استفاده از این تگ را همراه با دکمه‌های رادیویی نشان می‌دهد:

<form>
<input type="radio" name="type" id="male" />
<label for="male">Male</label>
<br />
<input type="radio" name="type" id="female" />
<label for="female">Female</label>
</form>

نتیجه در مرورگر :

بسیار خب. تا به اینجا با طریقه ایجاد یک فرم و طریقه ارسال آن به صفحه پردازشگر آشنا شدید. در جلسه دوم با تگ <input> و صفت‌های آن آشنا خواهیم شد.

نویسنده

طاها دریس