HTML Form Elements

-

في هذا الدرس بنتعرف على شو هي Form elements ، بالإضافة الى أنواعها المختلفة وطرق استخدامها.

يحتوي HTML على elements التالية :

input> Element>

احد elements الأكثر استخداما ويمكن استخدامه بأكثر من طريقة بالاعتماد على نوع type attribute .

مثال : 

الكود التالي يستخدم عند الحاجة الى ادخال نص مكون من سطر واحد.

 <input type="text" id="UserName" name="username" required><br>

الكود التالي يستخدم عند الحاجة الى استخدام الصور:

<input type="image" id="Car" name="Car" src="mercedes-benz-s-class.jpg">

تم تغطية جميع input> elements> في الدرس HTML input elements

label> Element>

الفكرة من هذا elementهو إضافة نص في الصفحه، ويستخدم لإضافة معلومات او توضيح للمستخدم، 

يحتوي هذا element على attribute باسم <for> تستخدم لتخصيص هذا label ل input> element>حيث يتم الربط مع Id الخاص ب <input>

مثال لعرض label مع <input> الخاص باسم المستخدم بكون شكل الكود:

طبق المثال التالي في صفحة html


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

لاحظ for> attribute> الخاصة ب Label تم ربطها مع Id الخاص ب <input>  لكل من اسم المستخدم وكلمة المرو.

ملاحظة: في حال ما تم الربط او تم الربط بشكل غير صحيح فا هذا اكيد ما بأثر على الصفحه والصفحة بتشتغل عادي بدون مشاكل.

select> Element>

يستخدم هذا element عند التعامل مع قائمة من الأشياء drop-down list

طبق المثال التالي: 


<!DOCTYPE html>
<html>
<body>
<h2> HTML Select Element</h2>
<form action="CheckUserNamePassword">
    <label for="cars">Choose a car:</label>
    <select id="cars" name="cars">
      <option value="BMW">BMW</option>
      <option value="mercedes">mercedes</ption>
      <option value="Honda">Honda</option>
      <option value="jaquar">jaquar</option>
    </select>
</form> 
</body>
</htm>

النتيجة

في هذا element لإضافة item الى القائمة بنستخدم option> elements> مع إعطاء Value القيمة الي بتم عرضها في المتصفح، والوضع الافتراضي اول item في List هو المختار، واكيد بتقدر تغيرو عن طريق selected attribute

يعني لو المطلوب نختار مثال من القائمة السابقة Mercedes هي اول item بظهر في List بكون شكل الكود:


<!DOCTYPE html>
<html>
<body>
<h2>HTML Select Element</h2>
<form action="CheckUserNamePassword">
    <label for="cars">Choose acar:</label>
    <select id="cars" name="cars">
      <option value="BMW" >BMW</option>
      <option value="mercedes" selected>mercedes</option>
      <option value="Honda">Honda</option>
      <option value="jaquar">jaquar</option>
    </select>
</form> 
</body>
</htm>


تمام. طيب شو لو كان المطلوب نختار أكثر من Item، اكيد الأمر بسيط فقط التغير بكون بإضافة<attribute> باسم multiple  وبكون الكود بالشكل التالي: 


<!DOCTYPE html>
<html>
<body>
<h2>HTML Select Element</h2>
<form action="CheckUserNamePassword">
   <label for="cars">Choose a car:</label>
    <select id="cars" name="cars" size="6" multiple>
      <option value="BMW" >BMW</option>
      <option value="mercedes" selected>mercedes</option>
     <option value="Honda">Honda</option>
      <option value="jaquar">jaquar</option>
    </select>
</form> 
</body>
</html>

لاختيار اكثر من item لازم نستخدم Ctrl Key من لوحة المفاتيح مع اختيار items المطلوبة(اضغط Ctrl من لوحة المفاتيح مع Items لاختيار اكث من واحد).

لعرض اكثر من item ف الشاشة بنستخدم attribute المسمى size  ومن خلال هذا attribute بنحدد كم عدد الitems  الي بتظهر في الشاشة . 

يعني لو كان المطلوب عرض 2 سيارة من القائمة السابقة بكون شكل الكود:


<!DOCTYPE html>
<html>
<body>
<h2>HTML Select Element</h2>
<form action="CheckUserNamePassword">
    <label for="cars">Choose acar:</label>
    <select id="cars" name="cars" size="2" multiple>
      <option value="BMW" >BMW</option>
     <option value="mercedes" selected>mercedes</option>
      <option value="Honda">Honda</option>
      <option value="jaquar">jaquar</option>
    </select>
</form> 
</body></html>

النتيجة: 

button> Element>

من الاسم واضح ان هذا element يستخدم عند عمل clickلتنفيذ شيء ما في الصفحة. 

<button type="button" onclick="alert(Hello, Welcome)">Welcome Message</button>

مثال :

طبق الكود السابق واكيد بتشوف عند النقر فوق button بتكون النتيجة Hello, Welcome 

fieldset> and <legend> Elements>

تستخدم هذه elements لتجميع مجموعه من elementsالتي لها علاقة ببعض في مكان واحد(الهدف ترتيب elements في الشاشة ) بحيث يستخدم <legend> يستخدم لإعطاء اسم لهذه المجموعة، ويستخدم <fieldset> لوضع مجموعه elements داخل اطار . 

تمام نطبق مثال حتي نفهم المقصود:


<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="">
 <fieldset>
  <legend>Login Info</legend>
  <label for="fname">User Name:</label><br>
  <input type="text" id="UserName" name="username" ><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value=""><br><br>
  <input type="submit" value="Submit">
</fieldset>
</form> 
</body>
</html>
النتيجة:
output> Element>

يستخدم هذا element لعرض نتيجة تنفيذ حساب معين.
طبق الكود التالي: 

<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>
<form action=""
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="number" id="a" name="a" value="50">
  +
  <input type="number" id="b" name="b" value="0">
  =
  <output name="x" for="a b"></output>
</form>
</body>
</html>
النتيجة:
datalist> Element>
يستخدم هذا element مع list مربوطة مع input>element> ، والطريق بتكون تعريف <input> من نوع List وربط ال Id الخاص ب <datalist> مع input> List>
طبق المثال التالي :

<!DOCTYPE html>
<html>
<body>
<h2> HTML datalist Element</h2>
<form action="">
    <label for="cars">Choose a car:</label>
    <input list="cars" name="cars">
    <datalist id="cars" n>
      <option value="BMW">BMW</option>
      <option value="mercedes">mercedes</option>
      <option value="Honda">Honda</option>
      <option value="jaquar">jaquar</option>
    </datalist>
</form> 
</body>
</html>
النتيجة :

textarea> Element>

يستخدم هذا element لإدخال النصوص والتي تكون مكونه من أكثر من سطر. ويمكن التحكم بعدد الاسطر Lines عن طريق attribute  rows، وللتحكم بعرضها نستخدم cols attribute
طبق الكود التالي:

<!DOCTYPE html>
<html>
<body>
<h2> HTML textarea Element</h2>
<form action="">
    <label for="message">Messages Details</label>
    <textarea id="message" name="message" rows="15" cols="25">
        
    </textarea>
</form> 
</body>
</htm>