HTML

از طریق استفاده از عنصر <form> و چند تگ مرتبط قادر به دریافت اطلاعات از بازدیدکنندگان صفحاتتان و یا تبادل اطلاعات بین صفحات مختلف خواهید شد. با کمک این گروه از تگ ها قادر به نمایش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، رادیو باتونها (radio-buttons) و ... شده و همچنین امکان گذاشتن دکمه های ارسال (submit button) و یا حذف (reset) را خواهید داشت. این فصل با شرح تگ های form و input و ... به چگونگی ایجاد ارتباط با بازدیدکنندگان و گرفتن اطلاعات از آنها بصورت لاتین و یا فارسی خواهد پرداخت.

توجه داشته باشید که برای پردازش اطلاعات دریافتی از کاربر باید با یکی از زبانهای cgi از قبیل ASP، perl، PHP، CFM ، JSP یا Java آشنائی داشته باشید. مثالهای cgi مدرسه وب از ربان اسکریپت Perl استفاده میکنند.

مثالها:

ورودیهای متن یا Text fields
مثالی ساده در مورد ایجاد text field ها . با کمک text field ها کاربران قادر به وارد کردن و تایپ متن خواهند شد.

ورودیهای رمز عبور یا Password fields

مثالی ساده در مورد ایجاد password field ها . با کمک password field ها کاربران قادر به ورود رمز عبور یا پسورد خواهند شد.

مثالهای بیشتر

---

فرمها (Forms)

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

درون تگ فرم گروه زیادی از عناصر و تگهای مختلف قابل استفاده هستند از قبیل عناصر ورود متن یک سطری(text fields)، عناصر ورود متنهای چند سطری (Textarea)، منوهای drop-down و radio buttons و ...

---

تگ Input

به عنوان پر مصرف ترین تگ مربوط به ورود اطلاعات باید از تگ <input> نام برد. در این تگ شناسه ای به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد. مقادیر ممکن برای این شناسه به قرار زیرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضی از type های کاربردی خواهیم پرداخت:

ورودیهای متن (Text Fields)

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

کد اچتمل	نمایش توسط مرورگر
<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>	First name: Last name:
<form dir="rtl" > نـــــــــــــــام: <input type="text" name="firstname"> <br> نام خانوادگی: <input type="text" name="lastname"> </form>	نـــــــــــــــام: نام خانوادگی:

توجه داشته باشید که تگ <form> چیزی را به نمایش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمایش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشید.لازم به یادآوری است که اغلب مرورگرها در حالت پیش فرض برای ورودیهای متن اندازه 20 کاراکتر را در نظر میگیرند و اگر میخواهید که اندازه پیش فرض ورودیهای متن را تغییر دهید باید از شناسه ای به نام size استفاده کنید.

ورودیهای Radio Buttons

اگر میخواهید که بازدیدکننده گزینه ای را از بین چند گزینه محدود انتخاب کند، از مقدار "radio" برای شناسه type استفاده کنید:

کد اچتمل	نمایش توسط مرورگر
<form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>	Male Female
<form dir="rtl"> <input type="radio" name="sex" value="male"> مرد <br> <input type="radio" name="sex" value="female"> زن </form>	مرد زن

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

ورودیهای Checkboxes

اگر میخواهید که بازدیدکننده یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، از مقدار "checkbox" برای شناسه type استفاده کنید:

کد اچتمل	نمایش توسط مرورگر
<form> <input type="checkbox" name="bike"> I have a bike <br> <input type="checkbox" name="car"> I have a car </form>	I have a bike I have a car
<form dir="rtl"> <input type="checkbox" name="bike"> دوچرخه دارم <br> <input type="checkbox" name="car"> ماشین دارم </form>	دوچرخه دارم ماشین دارم

---

شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)

در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال یا Submit Button استفاده میشود و در اثر کلیک کاربر بروی این دکمه "Submit" ، اطلاعات درون فرم به فایلی دیگر ارسال خواهند شد. برای تعیین مقصد ارسال اطلاعات باید درون تگ form از شناسه ای به نام action استفاده کنید. مقدار شناسه action آدرس یا url فایلی است که به دریافت و سپس پردازش اطلاعات دریافتی خواهد پرداخت. معمولا فایلهای بخش action برنامه ها و اسکریپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها میباشد.

تعیین مقدار "submit" برای شناسه type سبب نمایش دکمه Submit یا ارسال خواهد گردید.

کد اچتمل	نمایش توسط مرورگر
<form name="input" action="form_action.cgi"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>	Username:
<form name="input" action="form_action.cgi" dir="rtl"> نام کاربر <input type="text" name="user"> <input type="submit" value="Submit"> </form>	نام کاربر

در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کلیک کنید. مرورگر به محض کلیک دکمه ارسال، اطلاعات درون فرم را که در این مثال متنی ساده است به سمت فایلی که در شناسه action تعیین شده است ارسال کرده و در این مثال برنامه ای به زبان Perl با نام form_action.cgi در سمت سرور به ذخیره و سپس نمایش متنی خبری خواهد پرداخت.

---

ورود متن فارسی در عناصری مانند Text field یا Text area:

همانطور که در مثالهای بالا مشاهده کردید در مورد المانهای Text field و Textarea با کمک شناسه dir میتوان سمت و جهت ورود اطلاعات را "از راست به چپ" تعیین کنید. ولی اگر کاربری ویندوز فارسی نداشته باشد، از کامپیوترهای مکینتاش استفاده کند و یا سیستمش را فارسی نکرده باشد قادر به ورود اطلاعات به زبان فارسی نخواهد بود و نویسه های تایپ شده لاتین خواهند بود!، در اینگونه موارد چه باید کرد؟
معمولا برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو روش زیر استفاده میکنند:

استفاده از اپلتهای جاوا با این مزیت که سورس و کد اصلی فارسی سازی قابل استفاده توسط دیگران نیست!!

استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلی JavaScript قابل مشاهده و استفاده توسط دیگران است!

مدرسه وب بر اساس دستورالعملهای "پروژه فارسی وب" از روش دوم استفاده کرده و از کد جاوا اسکریپت فراهم شده توسط این پروژه استفاده میکند. مثال زیر نحوه استفاده از کد فارسی ساز جاوا اسکریپتی مذکور را شرح خواهد داد:

فارسی ساز جاوا اسکریپتی
مثالی در مورد نحوه استفاده از فارسی ساز جاوا اسکریپتی در یک فرم متشکل از Textfield ها

---

مثالهای بیشتر

حالتهای مختلف ورودی Input
در تگ input و با کمک شناسه type و مقادیر مختلف برای آن میتوان انواع مختلف اطلاعات را از وبگرد گرفت.

Checkboxes
مثالی در مورد نحوه تعریف فرمی متشکل از Checkbox ها

Radiobuttons
مثالی در مورد نحوه تعریف فرمی متشکل از Radiobutton ها

فهرست کرکره ای ساده
مثالی در مورد نحوه تعریف فرمی متشکل از drop down box ها

فهرست کرکره ای دیگر
مثالی در مورد نحوه تعریف فرمی متشکل از drop down box ها با تعیین پیش گزینه

Textarea
مثالی در مورد نحوه تعریف فرمی متشکل از Textarea ، ناحیه ای برای ورود بیش از یک سطر متن (نکته: استفاده از ادیتور ما برای این مثال امکان پذیر نیست! اگر گفتید چرا!؟)

تعریف فرمی با کمک دکمه یا button
مثالی در مورد نحوه تعریف فرمی با کمک دکمه یا button

ترسیم مرز در اطراف فرم
مثالی در مورد نحوه تعریف فرمی دلخواه و ترسیم مرزی بدور آن به همراه تعیین عنوانی برای فرم با کمک عنصر Fieldset

ارسال ایمیل با کمک فرمها
مثالی در مورد نحوه ارسال ایمیل با کمک فرمها

ساختن فهرستی از سایتهای مورد علاقه
مثالی در مورد نحوه استفاده از تگ فرم و منوهای کرکره ای و کمی جاوا اسکریپت برای ساخت فهرستی از سایتها

---

تگهای فرم

Start Tag	Purpose	کاربرد
<form>	Defines a form for user input	تعریف فرم ورود اطلاعات
<input>	Defines an input field	تعریف ورودی از نوع Input
<textarea>	Defines a text-area (a multi-line text input control)	تعریف ورودی متن چند سطری یا text-area
<label>	Defines a label to a control	تعریف برچسب یا label
<fieldset>	Defines a fieldset	تعریف fieldset
<legend>	Defines a caption for a fieldset	تعریف عنوان برای fieldset ها
<select>	Defines a selectable list (a drop-down box)	تعریف فهرستهای انتخابی یا drop-down box
<optgroup>	Defines an option group	تعریف option group ها
<option>	Defines an option in the drop-down box	تعریف گزینه ای از drop-down box ها
<button>	Defines a push button	تعریف دکمه فشاری، متفاوت با button تگ input