آموزش html - قسمت هشتم - فرم
شاید تا این مدت به فکر این افتاده باشید که بتوانید با دریافت اطلاعات ازکاربر خود تعامل بهترو بیشتری با او داشته باشید؟
فرم ها ازعناصری تشکیل شده اند که به کاربراجازه ورود اطلاعات را میدهند. در واقع اطلاعات (اطلاعات فرم) به طرف برنامه ای که بر روی سرور قرار دارد ، فرستاده می شود و بعد از تجزیه و تحلیل بر روی سرور،نتیجه به مخاطب نمایش داده می شود.
از نمونه عناصر فرم می توان به موارد زیر اشاره کرد.
• text fields(فیلدهای متنی)
• textarea(ناحیه متنی)
• radio buttons(دکمه های رادیویی)
• checkboxes (جعبه بررسی)
• drop-down menus (لیست های پایین افتان)
دستور<form> در واقع نقطه آغاز و پایان فرم را تعیین می کند و شما قادر خواهید بود انواع دستورات html (برای مثال تگهای جدول و عکس که قبلا آموخته اید)را در آن به کار ببرید.
ازصفات دستور <form>موارد زیر را می توان نام برد:
method="post or get"
action="url or filename"
method:
بوسیله ی این صفت تعیین می کنید که اطلاعات فرم به چه نحوی به مقصد مورد نظر منتقل شوند.
get: در این حالت داده ها و اطلاعات فرم از طریق url مرورگر منتقل خواهند شد و محدودیت هایی نیز خواهید داشت چراکه بعضی کاراکترها مثل & قابل استفاده نخواهند بود. همچنین از آنجا که داده ها در url مرورگر نمایش داده میشوند برای انتقال داده هایی مانند پسورد و ... مناسب نمی باشد.
post: در صورتی که از method=post استفاده نمایید اطلاعات به صورت داخلی - internal - منتقل میشوند و در url نمایش داده نمیشوند. در این روش هیچ محدودیتی برای حجم داده های ارسالی و نوع کاراکترها نخواهید داشت.
action:
معمولا مقدار این صفت آدرس فایلی است که پردازش فرم را انجام میدهد. برای آدرس دهی باید طبق قوانین آدرس دهی که قبلا فرا گرفتید عمل کنید.
<html>
<body>
<form action=" address " method="post">
</form>
</body>
</html>
بر خلاف بسیاری از دستورات html فرم ها در مرورگر به تنهایی نمایش داده نمیشوند. به عنوان مثال دستورات مثال بالا هیچ چیزی را در مرورگر نمایش نخواهد داد. برای اینکه اطلاعات را از کاربر دریافت کنیم علاوه بر دستور فرم نیازمند دستورات دیگری هستیم که فیلدهای ورودی را درفرم مشخص کنند. اکثر فیلدهای ورودی در زبان html بوسیله دستور input مشخص میشوند. شکل کلی دستور input به صورت زیر است. که در این حالت type نوع فیلد ورودی و name نام فیلد ورودی را مشخص میکند.
<input type="fieldType" name="fieldName" />
نکته قابل ذکر در رابطه با نام فیلدها این است که وقتی فرمی به برنامه ای که بر روی سرورقراردارد، فرستاده می شود هر یک از ویژگی های آن فرم با name مربوطه مدیریت می شود.به این ترتیب که ،اطلاعات هر کدام از عناصر فرم برای اینکه با یکدیگر تمایز داشته باشند با name های یکتایی از هم جدا می شوند و هنگامی که می خواهیم به اطلاعات هر عنصر از قبیل گزینه ی انتخاب شده و یا متن نوشته شده ، فرم دسترسی پیدا کنیم ،name آنها در واقع نوع و کیفیت رفتار مخاطب را بر می گرداند.
در ادامه با انواع فیلدهای ورودی بیشتر آشنا میشویم!
فیلدهای متنی text:
زمانی که شما بخواهید به عنوان کاربر اطلاعاتی نظیر حروف و اعداد را وارد کنید این فیلد کاربرد فراوانی خواهد داشت .
First name : <input name="First_name" type="text" value="enter your First name" size="25" maxlength="25" />
<br />
Last name :<input name="Last_name" type="text" value="enter Your Family name" size="30" maxlength="30" />
ویژگی پر کاربرد درtext :
• size=NO که میزان کارکترهای وارد شده را تعین میکند اما بصورت پیش فرض 20 کاراکتر است!
• maxlength=NO حداکثر تعداد کارکتر های ورودی را کنترل می کند.
• name=” Textbox _Name” : برای نام دهی
• value=”preview_Text” متن اولیه در آن نوشته می شود.
در صورتی که تمایل داشته باشید فیلد ها بصورتی باشند که در هنگام تایپ کردن دیده نشوند - فیلد ورودی پسورد - باید نوع فیلد را password انتخاب نمایید:
User Name: <input name="userName" type="text" value="user name" size="25" maxlength="25" />
<br />
Password :<input name="myPass" type="password " value="password" size="30" maxlength="30" />
textarea :
در یک textarea شما می توانید به میزان نامحدود کاراکتر وارد کنید ، که در مثال زیر بوضوح قابل مشاهده است.
<textarea name="content" rows="10" cols="30">
In The Name Of God!
</textarea>
• cols=NO : برای تعیین عرض این محوطه
• rows=NO : برای تعیین سطر این محوطه
دکمه های رادیویی (radio buttons):
شما زمانی ازدکمه های رادیویی استفاده خواهید کرد که مایلید از بین تعدادی گزینه، یکی را انتخاب کنید.
<input type="radio" name="group1" value="Milk"> Milk<br />
<input type="radio" name="group1" value="Butter" checked> Butter<br />
<input type="radio" name="group1" value="Cheese"> Cheese
• Name=”radio_name” اسم گروهی ازدکمه های radio ،هنگامی قرار است از بین تعدادی از آنها تنها یکی قابل انتخاب باشد، باید name آن دسته از از دکمه های radio یکسان باشد.
• value=” preview_Text” متن اولیه در آن نوشته می شود.
• checked: اگر بخواهیم دکمه ای بصورت اولیه انتخاب شده باشد این عبارت را می نویسیم.
Checkbox
وقتی بخواهیم از بین گزینه ها انتخاب های گوناگونی را داشته باشیم checkbox ها بهترین راه حل هستند.که در ادامه مثالی را مشاهده خواهید کرد.
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
• Name=”checkbox_name” اسم گروهی از checkbox ها
• value=”check_value” این مقدار در نظر گرفته شده ،برگردانده می شود.
• checked: اگر بخواهیم checkboxبصورت اولیه انتخاب شده باشد ،این عبارت را می نویسیم.
معرفی <select>
برای اینکه بتوانیم لیستی از موارد اتخابی تهیه کنیم از این تگ استفاده می کنیم ، که هر مورد را جلوی تگ <option> می نویسیم.
<select name="food">
<option value="Mike">Milk</option>
<option value="Butter" selected> Butter </option>
<option value="Cheese"> Cheese </option>
</select>
• name="selecName": برای نام دهی
• size=NO که تعداد مواردی که همزمان قابل نمایش است را تعین میکند .
• Multiple:این ویژگی باعث می شود تا کاربر از لیست با فشار دادن دکمه ی ctrl یا shift چند گزینه را انتخاب نماید.
• Selected : این ویژگی باعث می شود تا این مقدار بطور پیش فرض انتخاب شده باشد.
• value=”option_value” این مقدار در نظر گرفته شده ،برگردانده می شود.
Submit:
این عنصر برای تایید فرم استفاده می شود. زمانی که بر روی دکمه Submit فشار داده می شود فرم به آدرسی که به action نسبت داده می شود،فرستاده می شود.در حالیکه می توان با java script این گونه عناصر را کنترل کرد.
Press The Submit <input name="Submit" type="submit" value="Ok" />
• Name=”submit_name” اسم این دکمه
• value=”submit_text” مقداری که روی دکمه نوشته می شود
reset :
برای ساختن دکمه ای که فرم را به حالت اولیه باز می گرداند.
Press The Reset <input name="reset" type="reset" value="reset" />
• Name=”reset_name” اسم این دکمه
• value=”reset_text” مقداری که روی دکمه نوشته می شود
button:
برای ساختن دکمه به کار برده می شود.این دکمه به تنهایی کاری برای ما انجام نمی دهد.با دانستن زبان script می توانیم دستوراتی به این دکمه ها داد تا کاری را انجام دهند.
Press The Button <input name="button" type=" button " value=" button " />
• Name=” button _name” اسم این دکمه
• value=” button _text” مقداری که روی دکمه نوشته می شود.
image button:
این ویژگی کارکردی شبیه دکمه ی submit دارد که در واقع این طور است که وقتی بر روی عکسی کلیک می شود فرم به آدرسی که به action نسبت داده می شود،فرستاده می شود.
<input type="image" src="url" name="image" width="60" height="60">
ویزگی های به کار رفته شده در قسمت عکس ها بطور مفصل بحث شده است و برای جلوگیری از زیاد شدن حجم مطالب از ذکر آنان خودداری می کنیم.
در انتها به 2 ویژگی در تمامی تگهای اصلی فرم وجود دارد اشاره می کنیم:
1. disabled: اگر از این تگ استفاده کنیم آن عنصر نمایش داده می شود اما غیر فعال می باشد.
2. tabindex=NO الویت حرکت cursor در هنگامی که دکمه tab از صفحه کلید فشار داده می شود.به این صورت که هر چه شماره کمتر باشد الویت بیشتر است.در صورت برابری شماره ها حرکت cursor به ترتیب قرار گرفتن آنها حرکت می کند.
ادامه » آموزش html - قسمت نهم - فریم
بازگشت « آموزش html - قسمت هفتم - پس زمینه