از طريق استفاده از عنصر <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> | |
|
|
<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> | |
|
|
<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> | |
|
|
<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> | |
|
|
<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 ها
مثالهای بيشتر
Checkboxes
مثالی در مورد نحوه تعريف
فرمی متشکل از Checkbox ها
Radiobuttons
مثالی در مورد نحوه تعريف
فرمی متشکل از Radiobutton ها
فهرست کرکره ای ساده
مثالی در مورد نحوه
تعريف فرمی متشکل از drop down box ها
فهرست کرکره ای ديگر
مثالی در مورد نحوه
تعريف فرمی متشکل از drop down box ها با تعيين پيش گزينه
Textarea
مثالی در مورد نحوه تعريف فرمی
متشکل از Textarea ، ناحيه ای برای ورود بيش از يک سطر متن
(نکته: استفاده از اديتور ما برای اين مثال امکان پذير
نيست! اگر گفتيد چرا!؟)
تعريف فرمی با کمک دکمه يا button
مثالی
در مورد نحوه تعريف فرمی با کمک دکمه يا button
ترسيم مرز در اطراف فرم
مثالی در مورد
نحوه تعريف فرمی دلخواه و ترسيم مرزی بدور آن به همراه
تعيين عنوانی برای فرم با کمک عنصر Fieldset
ارسال ايميل با کمک فرمها
مثالی در مورد
نحوه ارسال ايميل با کمک فرمها
ساختن فهرستی از سايتهای مورد
علاقه
مثالی در مورد نحوه استفاده از تگ فرم و
منوهای کرکره ای و کمی جاوا اسکريپت برای ساخت فهرستی از
سايتها