ساخت اجزای فرم 1

فرم چيست؟

فرمها تنها عنصري هستند که بيننده سايت ميتواند اطلاعاتي را بطور مستقيم وارد کرده که اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده يا فرستاده ميشود. شما ميتوانيد داخل يک  صفحه يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع نظرسنجي از بينندگان که هر کدام از اين فرمها را با استفاده از خصوصيت   name=” “در تگ <form>  بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم پردازش شود. فرمها داراي اجزاي متفاوتي با وظيفه مشخص ميباشند که بايد قبل از تگ پايان دهنده </form>  آنها را بکار برد.  بعضي از اين اجزا عبارتند از: کادرهاي متني text fields ، قسمت انتخابات چند گزينه اي checkboxes وتک گزينه اي  radio buttons ، ليستهاي پايين کشيدني drop-down lists و دکمه هاي تأييد submit وپاک کننده reset .

فرمها توسط برنامه هايي نظير ASP, CGI و با افزودن خصوصيات action=” “, method=” “, enctype=” “ در تگ <form> اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.

دکمه (button)

کليه اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي فايده هستند، چون بعد از فشردن اين دکمه است که اطلاعات وارده در فرم پردازش ميشوند. پس ابتدا به ساختن اين دکمه ميپردازيم. براي ساختن دکمه ها در يک فرم به دو روش ميتوانيم عمل کنيم:

روش اول: با استفاده از تگ <button></button> که داراي دو خصوصيت name=” “براي نامگذاري و type=” “براي مشخص کردن نوع دکمه که submit و يا reset  ميباشد . در بين تگ آغازکننده و پايان دهنده هر چي نوشته شود در ظاهر دکمه نمايان ميشود

<button name="button 01" type="submit"> OK </button>

روش دوم: با استفاده از تگ <input> که مانند روش اول دو خصوصيت    name=” “که بايد کلمه button  در جلوي آن بيايد و type=” “که ميتواند هم submit باشد و يا reset.

<input name="button" type="submit">

فرقي که اين دو روش با هم دارند در اينست که شما در روش اول هر نوشته اي را بخواهيد در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده ميشود اما در روش دوم شما دخالتي در اين کار نداريد و به صورت پيش فرض کلمه submit , reset  نمايان ميشود. البته ميتوانيد بجاي دکمه هاي ساخته شده توسط مرورگراز عکس هم استفاده کنيد يعني شکل يک دکمه را طراحي کنيد و در فرم قرار دهيد که خصوصيت type=” “  را برابر با کلمه image قرار ميدهيد و با خصوصيت src=” “  آن را آدرس دهي ميکنيد:

<input name="button" type="image" src="images/button01.gif">

لازم بذکر است که در اين تکنيک فقط از حالت submit دکمه بايد استفاده کرد.

text field, text area

 خب بعد از ساختن دکمه ها ميپردازيم به بقيه اجزاي يک فرم. از اين به بعد ما با تگ

 وخصوصياتش زياد کار داريم . ما براي وارد کردن متن در فرم بسته به نيازمان از دو مدل کادرمتني ميتوانيم استفاده کنيم، يکي براي وارد کردن يک خط متن کوتاه که چند کلمه بيشتر نباشد و کادر ما هم به صورت خطي ميباشد و ديگري براي يک متن بلند است و کادر ما داراي چندين رديف ميباشد.

در مدل اول ازاين تگ استفاده ميکنيم:

<input name="textfield 01" type="text”>

دقت کنيد که کلمه text بايد در جلوي خصوصيت type=” “بيايد تا مرورگر بفهمد چه اجزائي از يک فرم را نمايش ميدهد. توسط خصوصيت size=” “  که با عدد مقدار دهي ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسطmaxlength=” “  حداکثر تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.

Textfield :

 اگر قرار باشد که بيننده داخل اين کادر خطي ،  کلمه رمز را وارد کند پس بجاي خصوصيت  type=”text”  بايد از type=”password” استفاده کنيد تا هر متني که وارد شود بصورت ستاره در مرورگر نمايش داده شود.

Password :

 اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد شد که بايد از تگ<textarea></textarea> استفاده کنيد که جدا از خصوصيت name=” “از خصوصيات cols=” “ , rows=” “براي کنترل رديفها و ستونهاي کادر بکار ميبريد.

this is a textarea example.

label

زمانيکه شما اجزاي فرم را اضافه مي کنيد، مي توانيد کنار هر کدام يک متني وارد کنيد تا نام آن قسمت درمرورگر مشخص شود. اما با افزودن تگ <label> کنترل بيشتري روي نام واجزاي يک فرم خواهيد داشت چون مي توانيد توسط اين تگ يکي از اجزاي فرم را احاطه کنيد، بدين صورت:

<label> Name :
<input type="text" name="textfield01">
</label>

که اين کد به صورت زير ظاهر مي شود،

دراين تگ، توسط خصوصيت for مي توانيد مشخص کنيد که label مربوط به کدام قسمت فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،

<label for="textfield01"> Name : </label>
<input type="text" name="textfield01">

Tab order

يکي از خصوصيات مفيد تگهاي html بنام tabindex است که کاربرد زيادي در عنصر فرم دارد و به همين خاطر در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با زدن دکمه Tab بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز مي شود که مي توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت کردن بين اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم، بسيار سخت تر از حرکت با دکمه Tab کيبورد است. با اضافه کردن خصوصيت tabindex به تگهاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد مي توانيم تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت کنيد که مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:

<input type="text" name="field1" tabindex="1">
<input type="password" name="pass1" tabindex="2">
<textarea name="area1" cols="10" rows="5" tabindex="3"></textarea>

file field

گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه و به سرور فرستاده شود. براي اين حالت بايد در فرم، تگ <input> را نوشت و خصوصيت type آنرا برابر با کلمه file قرار داد. هنگاميکه اين خصوصيت را وارد مي کنيد، مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي فايل بنام Browse نمايان مي کند. در نظر داشته باشيد که براي اين تگ تنظيمات وب سروربسيار مهم است وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم قرار است که به ايميل فرستاده شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم حتماً enctype="multipart/form-data"  را نوشته و در تگ file field هم accept="text/plain"  را وارد کنيد که در اين حالت فايلهاي متني txt به درستي فرستاده مي شود. کلاً در بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.