تماس درباره   صفحه اصلی
  برنامه نويسی مبتنی بر وب > فرم  
 
 

فرم هاي ورودي


در اين درس با انواع مختلف عناصر ورودی و نحوه ارسال آنها به سرور توسط فرم توضيح داده می شود.

تگ فرم
تگ input
Textfield
Radio Button
Checkbox
Submit


فرم ها برای دريافت انواع مختلف ورودی از کاربر استفاده می شوند. فرم ها به کاربر اجازه می دهند نظرات خود درباره سايت شما را ارسال کنند و يا معيارهای جستجوی در يک پايگاه داده را تعيين کنند.

فرم داده های ورودی کاربر را به سرور می فرستد، برنامه ای روی سرور اطلاعات ارسال شده را پردازش می کند.

فرم ناحيه است شامل عناصر فرم است. عناصر فرم به کاربر اجازه می دهند اطلاعات را وارد کند. فيلدهای متنی(text field)، دکمه راديوئی(radio button) و جعبه های انتخاب(checkbox) از جمله عناصر درون فرم هستند.

جدول زير تگ های که درون فرم ها استفاده می شوند را ليست می کند.

شرح تگ
يک فرم ورودی برای کاربرتعيين می کند <form>
يک فيلد ورودی تعيين می کند <input/>
يک ناحيه متنی را تعريف می کند <textarea>
يک برچسب برای يک کنترل را تعيين می کند <label>
يک مجموعه فيلد تعيين می کند <fieldset>
يک عنوان برای مجموعه فيلد تعريف می کند <legend>
يک ليست قابل انتخاب کردن را تعيين می کند <select>
يک گروه انتخاب را تعيين می کند <optgroup>
يک گزينه در جعبه انتخاب را تعيين می کند <option>
يک دکمه را تعريف می کند <button>

تگ فرم

کليه عناصر فرم درون تگ form محصور می شوند. تگ فرم به صورت کلی زير است:

<form action="server page URL" method="post|get">
… input elements
</form>

چندين فرم در يک صفحه می تواند باشد اما فرم های تودرتو مجاز نيست. فرم دارای دو خاصيت مهم action و method است که در ادامه توضيح داده می شوند.

نکته. تگ فرم در صفحه مرورگر قابل رويت نيست.


تگ input

تگ input مهمترين عنصر فرم است که برای دريافت داده از کاربر استفاده می شود. فرم کلی آن به صورت زير است:

<input name="name" type="text|number|password|checkbox|radio| submit|reset|button|image"
value="value" maxlength="n" size="n" align="top|bottom|middle|left|right" checked />

هر فقره داده ورودی بايد دارای يک نام باشد که توسط برنامه پردازشگر برای شناسائی داده استفاده می شود. خاصيت name نام فيلد را برای دسترسی معين می کند.

عناصر ورودی می توانند به شکل های مختلفی مانند فيلدهای متنی، کلمه عبور، دکمه های راديوئی، جعبه های انتخاب و دکمه submit باشند. نوع ورودی توسط صفت type مشخص می شود. اگر نوع ورودی معين نشود به طور پيش فرض ورودی از نوع text در نظر گرفته می شود.

صفت value مقدار پيش فرضی به عنصر ورودی تخصيص می دهد. وقتی فرم برای اولين بار ظاهر می شود اين مقدار ديده می شود.

برای محدود کردن کاراکترهای ورودی صفت maxlenght را بکار ببريد. به طور پيش فرض ماکزيمم طول 20 کاراکتر است. اگر کاربر سعی کند بيشتر از طول تعيين شده را وارد کند فرم يک بوق خطا می زند.

صفت size اندازه ناحيه فيلد روی صفحه را بر حسب کاراکتر مشخص می کند.


Textfield

فيلدهای متنی برای گرفتن حروف و اعداد از کاربر هستند.


مثال. دريافت نام و نام خانوادگی کاربر.

<form>
First name:
<input type="text" name="firstname" />
<br/>
Last name:
<input type="text" name="lastname" />
</form>

که در برازر به صورت زير ديده می شود:

Textfield example

مثال. برای دريافت رمزعبور ورودی را از نوع password تعيين کنيد. کاراکترهای وارد شده درون اين فيلد به صورت ستاره يا دايره ديده می شوند.

<form>
Password: <input type="password" name="pwd" />
</form>

کد فوق در مرورگر به صورت زير ديده خواهد شد:

Password example

Radio Button

نوع ورودی radio يک دکمه راديوئی را نشان می دهد. دکمه های راديوئی به کاربر اجازه می دهند تنها يکی از چند گزينه را انتخاب نمايند.


مثال. گرفتن جنسيت کاربر.

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

در مرورگر به صورت زير ديده می شود:

Radio Button example

Checkbox

نوع ورودی checkbox برای تعيين يک جعبه انتخاب است. جعبه های انتخاب وقتی که می خواهيد کاربر يک يا چند گزينه را انتخاب نمايد استفاده می شوند.


مثال.

<form>
<input type="checkbox" name="bike" />I have a bike
<br/>
<input type="checkbox" name="car" />I have a car
</form>

کد فوق در مرورگر به صورت زير ديده می شوند.

Checkbox example

Submit

نوع submit يک دکمه ارسال را مشخص می کند. توسط دکمه ارسال اطلاعات درون فرم به سمت سرور فرستاده می شود. داده ها توسط فايلی که در صفت action درون تگ form مشخص شده دريافت می شوند. اين فايل معمولا شامل اسکريپتی است که داده های گرفته شده را پردازش می کند.


مثال. در کد زير اگر کاربر نام خود را در فيلد متنی وارد و دکمه Submit را کليک کنيد ورودی به صفحه form_action.asp ارسال می شود.

<form name="input" action="form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

اين کد در مرورگر به صورت زير مشاهده می شود:

Submit example

صفت method درون تگ form نوع ارسال داده را مشخص می کند که يکی از دو مقدار get (متد پيش فرض) و post می تواند باشد. متد get داده را به URL درخواستی در action اضافه و به سرور ارسال می کند. متد post داده را درون يک پيغام جداگانه قرار داده و ارسال می کند. get برای فرم های ساده است و کاربر را قادر می سازد URL مقصد را به صورت يک لينک ذخيره کند. درحاليکه post برای فرم هائی است که شامل تعداد زيادی عنصر هستند و برای ارسال مطمئن تر داده های فرم بکارمی رود.

نکته. get تنها برای داده های ASCII است بنابراين اگر داده ها به زبان غير از انگليسی هستند بايد از متد post استفاده کرد.


يک نمونه فرم ورودی ( برای ديدن کد HTML در مرورگر گزينه View→ Source يا را انتخاب کنيد).
ارسال فرم به ايميل


 

 


 

صفحه اصلی| PDF| درباره| تماس