HTML Form

-

HTML Form هو مكان في صفحة HTML يحتوي على مجموعه من controls وتسمى  أيضا input elements مثل ( input textbox، checkboxes، radio buttons، submits buttons ... الخ) ويتم من خلاله تجميع البيانات المدخلة من input elements عن طريق المستخدم. مثال تسجيل الدخول يحتوي على مكان لإدخال اسم المستخدم input textbox ومكان ثاني لإدخال كلمة المرور input textbox بالإضافة الى submits button. وهذه elements بتم تجميعها داخل form .

تمام 

طريقة الكتابة : 

<form>
  <!--form elements-->
</form>

مثال : 

نعمل محاكاه لشاشة تسجيل الدخول 

طبق الكود التالي في صفحة HTML 


<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
  <label for="fname">User Name:</label><br>
  <input type="text" id="UserName" name="username"><br>
  <label for="lname">Password:</label><br>
  <input type="text" id="Password" name="Password" ><br><br>
  <input type="submit" value="Login">
</form> 
</body>
</html>

نتيجة التنفيذ:


نفهم الكود:
<form action="">
  <label for="fname">User Name:</label><br>
  <input type="text" id="UserName" name="username"><br>
  <label for="lname">Password:</label><br>
  <input type="text" id="Password" name="Password" ><br><br>
  <input type="submit" value="Login">
</form> 
لاحظ بدأنا ب form>tag> وعملنا attribute لها باسم action. هون بتم ربط هذا form مع server لغرض تنفيذ الامر المطلوب.
في داخل هذا <Form> اضفنا مجموعه من elements وهي
 <label>،<input type="text">  ، <input type="submit">
عند النقر فوق submit يتم استدعاء function الي تم تحدديه في البداية في action attribute 
نتعرف اكثر على input> element>
يستخدم هذا element في أكثر من مكان وبأكثر من طريقة بالاعتماد على type attribute: