‎‎فرمهاHTML Forms

Previous >    <Next  

‎يك فرم درHTML براي جمع آوري ورودي كاربر استفاده ميشود .ورودي هاي كاربران اغلب براي ‎پردازش به سرور ارسال ميگردد.

‎‎مثال ـ نمونه فرم






--(go to editor for change code and run)

‎‎عنصر فرمThe <form>‎ Element -‎

‎عنصرHTML ‎<form>‎ براي ايجاد فرم HTML است، كه براي ورودي هاي كاربر مورد ‎استفاده قرار ميگيرد .قالب كلي آن مطابق زيراست.

‎ 
<form>
.
form elements
.
</form>

‎عنصر فرم محفظه ايست براي عناصر مختلف ورودي مثل فيلد متني، چك باكس، راديوباتن، كليدتائيدو ‎غيره .همه عناصر مختلفي كه در فرم استفاده ميشوند در بخش HTML Form Elements ‎پوشش داده شده است.

‎‎عنصر وروديThe ‎<input>‎ Element -‎

‎عنصر‎<input>‎ بيشترين كاربرد را درعنصرفرم دارد .عنصر ‎<input>‎ ‎بفرمت هاي مختلف بستگي به ويژگي‎type‎ در فرم ظاهر ميشود .در جدول زير بعضي از ‎انواع آن آمده است.

‎
‎type‎ ‎‎شـــرح
‎<input type=‎"text‎">‎‎ ‎‎نمايش يك فليد متني در يك خط
‎<input type=‎"rado‎">‎‎ ‎‎نمايش دكمه هاي راديوئي براي انتخاب يكي از موارد
‎<input type=‎"checkbox‎">‎‎ ‎‎نمايش چك باكس براي انتخاب موارد دلخواه
‎<input type=‎"submit‎">‎‎ ‎‎نمايش كليدي براي تائيد اطلاعات فرم
‎<input type=‎"button‎">‎‎ ‎‎نمايش كليدي باقابليت كليك

‎عنصر‎<inupt>‎با همه مقادير فابل قبول در فصل HTML Input Types ‎پوشش داده شده است.

‎‎فيلدهاي متنيText Fields -‎

‎<input type=‎"text‎">‎‎در يك خط فيلد متني را براي وارد نمودن اطلاعات نمايش ‎ميدهد.

‎‎مثال ـ فرمي با فيلد هاي متني جهت ورود اطلاعات

‎ 
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

--(go to editor for change code and run)

‎‎اين مجموعه كد بالا توسط مرورگر چگونه در صفحه نمايش داده ميشود .بفرم زير:

First name:

Last name:
‎

‎نكته ـ خود فرم در صفحه مشاهده نميشود .ويژگي‎<width>‎ بصورت پيش فرض فيلد متني ‎ 25‎كراكتر ميباشد.

‎‎عنصر برچسبThe ‎<label>‎ Element -‎

‎‎به برچسب هائي كه در مثال بالا وجود دارد، توجه نمائيد.

‎تگ‎<label>‎ برچسبي را براي هرعنصري در فرم تعريف مي نمايد .اين عنصر ‎براي صفحه خوان مفيد ميباشد .به كاربر صفحه خوان كمك مي نمايد، هنگاميكه روي فيلد ورودي تمركز ‎مي نمايد، صفحه خوان با صداي بلند برچسب را ميخواند.

‎عنصر‎<label>‎ همچنين به كاربراني كمك مي نمايد، كه در كليك به نواحي كوچك ‎داراي مشكل ميباشند .با كليك در برچسب مربوطه، آن ناحيه تغيير حالت ميدهدوبه آنها كمك ميكند.

‎برابري مقدارويژگي‎for‎ در عنصر ‎<label>‎ با مقدار ‎id‎‎در عنصر‎<input>‎ باعث اتصال اين دو عنصر ميشود.

‎‎دكمه هاي راديوئيRadio Buttons -‎

‎<input type=‎"radio‎">‎‎دكمه هاي راديوئي تعريف ميشود.اين دكمه ها بكاربر اجازه ‎ميدهد،كه يكي از آنها انتخاب كند.

‎‎مثال ـ فرمي با دكمه هاي راديوئي

‎ 
<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

--(go to editor for change code and run)

‎‎حاصل كد هاي فوق كه توسط مرورگر بنمايش در مي آيد مطابق زيراست.

‎‎زبان وب مورد علاقه تان را انتخاب نمائيد.

   
   
   

‎‎چك باكسهاCheckbxes -‎

‎با‎<input type=‎"checkbox‎"> ‎ يك چك باكس تعريف ميشود .چك باكس بكاربر ‎اجازه ميدهد، موارد دلخواهش را انتخاب نمايد .ميتواند هيچ موردي را انتخاب نكنديا چند مورد را ‎انتخاب نمايد.

‎‎مثال ـ فرمي با چك باكس

‎ 
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

--(go to editor for change code and run)

‎‎حاصل كد هاي فوق كه توسط مرورگر به نمايش در مي آيد، مطابق زيراست.



‎‎دكمه ارسال يا تائيدThe Submit Button -‎

‎با‎<input type=‎"submit‎">‎ براي ارسال داده فرم بيك فرم ساز، دكمه اي را ‎تعريف ميكند.فرم ساز يا فرم گردان معمولا يك فايل در سروربوده يا اسكريپتي براي پردازش ‎داده هاي وروديست.

‎‎مثال ـ فرمي با دكمه ارسال(submit )

‎ 
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

--(go to editor for change code and run)

‎‎حاصل كدهاي فوق كه توسط مرورگر به نمايش در مى آيد مطابق زير است.

First name:

Last name:


‎Then Name Attribute for ‎<input>‎‎

‎‎ويژگي‎name‎ براي ‎<input>‎

‎توجه داشته باشيدكه هرفيلد ورودي بايد داراي نامي براي ارسال ياsubmit نمودن داشته باشد . ‎اگر ويژگي نام حذف شود، اطلاعات فيلد فوق در همه حالات ارسال نمي شود.

‎‎مثال ـ در اين مثال فيلد‎"first_name‎"‎با submit ارسال نميشود .

‎ 
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

--(go to editor for change code and run)

‎‎برنامهactive_page.php

‎برنامه فوق كه در ويژگي‎action‎ فرم ها استفاده ميشود، صرفا براي كنترل روند ‎اجراي مثالهاي بخشهايHTML Forms ميباشد .معمولا چنين نوع برنامه براساس عناصر فرم ومشخصات ‎آنها بايد تنظيم گردد .بسيا ري از روتين هاي اعتبارسنجي عناصردرهمين برنامه تنظيم ميشود. ‎روتين هاي داده ها به فايلها يا بانك اطلاعاتي در آن قرار ميگيرد.

‎‎اسكريپتphp كه در اين مثالها استفاده ميشود، مطابق زير است .

‎ 
<?php 
$allinfo='';
foreach ($_GET as $name => $value) {
    $allinfo.= "_GET = $name : $value<br>";
}
foreach ($_POST as $name => $value) {
    $allinfo.= "_POST = $name : $value<br>";
}
echo $allinfo;
?>
Previous >    <Next