index   E-mail to me   Google

FORMS

    


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

توجه داشته باشيد که برای پردازش اطلاعات دريافتی از کاربر بايد با يکی از زبانهای 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" استفاده ميشود.

کد اچتمل

نمايش توسط مرورگر

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

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


  • تگهای فرم

    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



        

     

     

    Top page

    Backup_ID.htm Best_Google_Search.htm Chat_Rome_Full.htm Firewall1.htm Firewall2.htm Help_Google_For_You.htm Html.htm* Metateg.htm Page_Rank_In_Google.htm Ranking_Internet.htm Search.htm Service_Google.htm Technical_Search.htm Web_Log_1&2.htm Web_Log_3&4.htm Web_Log_5&6.htm Buy_Computer.htm Buy_Mobail.htm Buy_Printers.htm Corner_Timer.htm Dictionary_Computer.htm Media_Pic.htm NTFS.htm Partition_Magic1.htm Partition_Magic2.htm Short_Key_IE.htm Short_Key_Win_Xp.htm Short_Key_Winamp.htm Show_Desktop.htm Sound_Card.htm System_Restore.htm Technologist_Win_XP.htm Introduction.htm Web_HTML.htm Elements.htm Tags.htm Farsi.htm Formatting.htm Characters.htm Links.htm Tables.htm Frames.htm** Lists.htm Forms.htm Images.htm Background.htm Fonts.htm Style_Sheet.htm Ex_Frames_1.htm Ex_Frames_2.htm