فرم ها در HTML

فرم ها در HTML

فرم ها

مقدمه

فرم های HTML شبیه به فرم هایی هستند که ما در زندگی روزمره با آن ها سروکار داریم. فرم ها در اشکال و اندازه های متنوعی وجود دارند. بعضی از آن ها دارای فیلد های متنی هستند که کاربر باید متنی مانندنام و نام خانوادگی را در آن ها وارد کند، بعضی دیگر چند گزینه در اختیار کاربر قرار داده و می خواهند تا یکی از گزینه ها را انتخاب کند مانند پرسش های کنکور و بعضی دیگر به کاربر امکان قرار دادن تیک در کنار مواردی را می دهند. تقریبا تمام اشکال استاندارد فرم توسط HTML پشتیبانی می شوند. کاربر باید تعدادی فیلد را پر کرده و آن ها را به سرور ارسال کند. فرم ها در سرور بوسیله یک زبان برنامه نویسی تجزیه و تحلیل می شوند. ممکن است فرم تنها برای تعامل صفحه با کاربر ایجاد شده باشد که در این صورت از یک اسکریپت در کنار فرم استفاده می شود. د اینجا ما بر طراحی ظاهر فرم تمرکز داریم نه ارسال و پردازش آن.

form: تمام اجزای فرم را دربرمی گیرد.
input: اغلب فیلدها را ایجاد کرده و صفات آن بیانگر نوع فرم هستند.
textarea: برای فیلدهایی طراحی شده که کاربر می خواد متنی طولانی را وارد کند.
select: برای ایجاد لیست های لغزنده ست، برای ایجاد گزینه های آن از عنصر option استفاده می شود. Button: برای ایجاد دکمه ها- نظیر ارسال- به کار می رود.

پردازش فرم

<form method= action= onsubmit= > <input name= type= value= size= maxlength= checked= src= accesskey= > <form method= "post" action ="mailto:bhop@mailsara.ac.uk"> <p>Please type the mail to us: </p> <input name="MyMessage" type="text" > <input type="submit" value="submit" name="submit"> </form>

عنصر فرم دو نوع اصلی دارد.

Method: پروتکل تحویل اطلاعات فرم را مشخص می کند. دارای دو نوع مقدار get , post می باشد.

get: حالت پیش فرض است. اگر یک URL به عنوان مقدار صفت action تعیین شود یک ؟ که به دنبال آن مقدار ورودی می آید به سرور فرستاده خواهد شد.

post: در این مورد مقدار ورودی، درون فرم به سرور فرستاده می‌ شود.

Action: مکانی را که اطلاعات فرم باید فرستاده شوند، مشخص می کند.

اگر کاربر در کادر Hello World وارد کند، این عبارت به آدرس فرستاده می شود:

MyMessage=Hello+world

اگر خط اول عبارت را به این صورت تغییر دهیم و کاربر همان عبارت را وارد کند:

<form method= "get" action="www.monadianghadir.blogfa.com">

این صفحه درخواست شود:

http:// www.monadianghadir.blogfa.com /?MyMessage=Hello+world

اگر فرم چند مقدار input داشته باشد، هر یک از این مقادیر با & از هم جدا خواهد شد:

http://www.w3.org/?MyMessage=Hello+world&MySecondMessage=From+me

اگر بخواهیم از طریق فرم با صفحه تعامل برقرار شود:

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

عنصر input

<form method= action= onsubmit= > <input name= type= value= size= maxlength= checked=src= accesskey= >

دارای سه صفت اصلی name، type،value و چند صفت دیگر به شرح زیر است.
Name: مقداری است که به ورودی افزوده می شود و بیان گر آن است که اطلاعات از کجا آمده است.
type: نوع ورودی را مشخص می کند. دارای انواع مقادیر text، submit، radio، checkbox، rest، image hidden ،file ،password است.
text:

<input name ="MyMessage" type="text" value="متن را وارد نمایید:" size="40"maxlength="10" />



submit:
وظیفه تحویل فرم را بر عهده دارد و یک دکمه به این منظور ایجاد می کند.

<form method= "post" action ="mailto:monadianghadir@gmail.com"> لطفا آدرس ایمیل خود را وارد نمایید: <input name="MyMessage" type="text" /> <input type = "submit" name="Mail" value = "SendMail" /> <form/>

لطفا آدرس ایمیل خود را وارد نمایید:

Radio:

<p><زبان مورد نظرتان را انتخاب نمایید:/p> <p>Persian: <input type ="radio" name="language"value="persian"checked="checked" /></p> <p>English: <input type ="radio" name="language"value="English"></p> <p>Arabic: <input type ="radio" name="language"value="Arabic" /></p>

زبان مورد نظرتان را انتخاب نمایید:

Persian:

English:

Arabic:

از آنجا که تمام موارد دارای صفت Name یکسانی هستند، به عنوان یک ابزار واحد عمل می کند و تنها یکی از گزینه ها در هر زمان می تواند انتخاب شده باشدو مقدار اولیه Persian تعیین شده است.
checkbox:

<p>تمام زبان هایی که می دانید مشخص نمایید:</p> <p>Persian: <input type = "checkbox" name="language" value="Persian" /></p> <p>Arabic: <input type="checkbox" name="language" value="Arabic" /></p> <p>English: <input type="checkbox" name="language" value="English" /></p> <input type="submit" name="Choice" value="Choices Made" />

تمام زبان هایی که می دانید مشخص نمایید:

Persian:

Arabic:

English:

اگر دو گزینه اول انتخاب شودند، مقدار ارسالی به سرور:

language=Persian&language=Arabic&Choice=Choices+Made


button:

اجرای اسکریپت های محلی را ممکن می سازد.

<input type="button" value="Click Me" onclick="processclick()" />


Reset:

اگر کاربر در ورود اطلاعات اشتباه کرده باشد، بوسیله این دکمه می‌ تواند تمام قسمت های فرم را به حالت اولیه برگرداند.


password:

در مواردی که اطلاعات ورودی محرمانه بوده و نمی خواهیم که قابل مشاهده باشند، کاربرد دارد. هر کاراکتر ورودی توسط کاربر به صورت * نمایش داده می شود.


value:

در اکثر موارد مقدار اولیه فرم را مشخص می کند،نوع radio تنها نوعی است که مقدار ولیه برای آن ضروری است.

file:

گاهی اوقات ورودی خواسته شده فایلی از رایانه کاربر می باشد، در این صورت به جای تایپ نام فایل و آدرس آن، کاربر می تواند به فایل مزبور از طریق بررسی رایانه دسترسی داشته باشد.

<p>لطفا عکس خود را وارد نمایید: </p> <input type="file" name="imagefile" value="C:\Files\test\photo.jpg"/>


لطفا عکس خود را وارد نمایید:

Hidden:

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

<input type="hidden" name="from" value="1" />

چیزی در صفحه نمایش داده نمی شود اما هنگامی که فرم به سرور فرستاده شود یکی از مقادیر،from=1 خواهد بود.

value:این صفت مقدار اولیه را تعیین می کند. radio تنها نوعی است که در آن تعیین مقدار اولیه اجباری است. اگر فیلدهای فرم توسط کاربر پر نشوند، این مقدار به سرور ارسال خواهد شد.

size:عرض فرم را یا به پیکسل و یا کاراکتر مشخص می کند.

Maxlength: برای نوع text , password کاربرد داشته و حداکثرتعداد کاراکترها را برای ورودی تعیین می کند.

checked:مخصوص انواع text و checkbox و تعیین کننده مقدار اولیه دکمه هاست.

selection ها:

<select name= size= multiple= > <option value= label= > <optgroup label= >

بسیاری از فرم ها مجموعه ای از گزینه را ایجاد کرده و از کاربر می‌خواهند یکی از آنها را انتخاب کند. عنصر select لیستی از گزینه ها را برای انتخاب در اختیار کاربر قرار می دهد.

<p>لطفاً رنگ خود را انتخاب نمایید:</p> <select name="colors" size="6" multiple="multiple"> <option value = "green">green</option> <option value = "blue">blue</option> <option value = "red">red</option> <option value = "pink">pink</option> <option value = "gray">graay</option> <option value = "black" selected="selected">black</option> <option value = "yellow">yellow</option> </select>

لطفاً رنگ خود را انتخاب نمایید:

صفت name، نام اطلاعاتی را که به سرور فرستاده می شوند را مشخص می کند و size تعداد گزینه هایی که در آن نمایش داده شوند را تعیین می کند. صفت multiple را تعیین می کند که یک یا چند گزینه قابل انتخاب باشند. اگر امکان انتخاب چند گزینه فراهم شود کاربر با نگه داشتن ctrl می تواند چند گزینه را انتخاب کند. عناصر option درون عنصر select قرار گرفته و هر کدام از آنها یکی از گزینه ها را تعیین می کند. اگر صفت select برای گزینه ای تنظیم شود، آن گزینه در هنگام نمایش صفحه در حال انتخاب خواهد بود. در مثال بالا black تنظیم شده است. اگر green توسط کاربر انتخاب شود، مقدار فرستاده شده به سرور چنین خواهد بود:

color=green&color=black

برای منوهای با تعداد گزینه بالا می توان گزینه را تقسیم بندی کرد. برای این کار از عنصر optgroup استفاده می شود.

<p>لطفاً رنگ خود را انتخاب نمایید:</p> <select name="music" size="4" multiple="multiple"> <optgroup label="origin"> <option value = "green">green</option> <option value = "red">red</option> <option value = "blue">blue</option> </optgroup> <optgroup label="other"> <option value = "pink">pink</option> <option value = "yellow" selected="selected">yellow</option> </optgroup> </select>

ناحیه متنی

<textarea name= rows= cols= readonly= />

به منظور ایجاد ناحیه ورود اطلاعات با چندین خط به کار می‌رود

یک ناحیه هفت خطی که هر خط گنجایش 60 کاراکتر دارد، ایجاد می‌کند. البته از لحاظ تعداد خطوط ورودی محدودیت ندارد بلکه تعداد خطوطی که نمایش داده می‌شود را تعیین می‌کند. برای تعیین مقدار اولیه:

<textarea name="para" rows="7" cols="60" readonly="readonly">This is the first row of the input buffer and this is the second line.</textarea>

با تنظیم صفت readonly، متن ابتدایی غیرقابل تغییر خواهد بود.

عنصر button

<button name= value= type= >

به دلیل توان کم دکمه ها که با input ایجاد می شوند دکمه های دیگری ایجاد شده که شبیه همان دکمه ها و جانشین انواع button، submit، reset هستند. تفاوت عمده این دکمه ها امکان قرار گرفتن هر محتوایی درون آن هاست.

<button name="form" value="submit" type="submit" > <h2>FORM</h2> <h3>Submit to Server Now</h3> </button>

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



نظرات کاربران



عبارت امنیتی : حاصل 8 × 6 می شود :
متن پیام :