آموزش html از مبتدی تا پیشرفته

[moji5]

از طريق استفاده از عنصر <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="---" 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 استفاده کنيد:
کد اچتمل نمايش توسط مرورگر

<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
__________________