آموزش HTML بخش دوازدهم :: تبادل اطلاعات بین صفحات مختلف

​

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


با کمک اين گروه از تگ ها قادر به نمايش باکسهاي ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه هاي ارسال (submit button) و يا حذف (reset) را خواهيد داشت.
توجه داشته باشيد که براي پردازش اطلاعات دريافتي از کاربر بايد با يکي از زبانهاي cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائي داشته باشيد. مثالهاي cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.

فرمها (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" استفاده ميشود.
کد HTML نمايش توسط مرورگر

<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 استفاده کنيد:
کد HTML نمايش توسط مرورگر

<form>
<input type="radio" name="---" value="male"> Male
<br>
<input type="radio" name="---" value="female"> Female
</form>
Male
Female​

​

<form dir="rtl">
<input type="radio" name="---" value="male"> مرد
<br>
<input type="radio" name="---" value="female"> زن
</form>
مرد
زن​

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

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

<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 يا ارسال خواهد گرديد.
کد HTML نمايش توسط مرورگر

<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 قابل مشاهده و استفاده توسط ديگران است!

مدرسه وب بر اساس دستورالعملهاي "پروژه فارسي وب" از روش دوم استفاده کرده و از کد جاوا اسکريپت فراهم شده توسط اين پروژه استفاده ميکند.

تگهاي فرم

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