html form tag

<form> </form>

يتم وضع جميع الوسوم ال 9 التالية داخل هذا العنصر؛ وله 2 attributes أساسيين هما:

• Action: وتكون قيمتها عبارة عن مسار ملف قاعدة البيانات.
• Method: يكون له قيمتان نختار منهم هما post و get

ما هو الفرق بين get و post ؟

Post هي عبارة عن ارسال بيانات مثال على ذلك؛ انت عندما تقوم بتسجيل الدخول الى موقع ما فإنك تكتب البريد الإلكتروني وكلمة السر وعندما تضغط submit ف انت تقوم بإرسال هذه المعلومات الى قاعدة البيانات الخاصة بالموقع للتأكد ان هذه المعلومات صحيحة ويتم تسجيل دخولك الى الموقع بنجاح.

Get هي عبارة عن احضار بيانات مثال على ذلك؛ انت عندما تقوم بكتابة رابط موقع ما وتذهب اليه ف كأنك تطلب من السيرفر الخاص بالموقع عرض معلومات الموقع على المُتصفح الخاص بك فيظهر لك الموقع المطلوب.

html input tag

<input >

هذا العنصر يكون دائما داخل عنصر ال <form> </form> ويُستخدم عند عمل حقل ادخال حيث يُمكن للمُستخدم ادخال بيانات من كلمة السر والبريد الإلكتروني وغيرها.
ويوجد له attribute مهم جدا هو type وتكون قيمته عبارة عن نوع البيانات المطلوب من المُستخدم إدخالها مثل:

⚠ يمكنك تحديد اقصى عدد الرموز داخل حقل الادخال عن طريق اضافة attribute يُسمى maxlength وتكون قيمته عبارة عن اقصى عدد من الرموز يُمكن اضافته داخل حقل الادخال.
مثال على ذلك :

 
<form>
  <input  type="text"  maxlength="12" >
</form> 

html label tag

<label> </label>

Label ترجمتها مُلصق.
وتستخدم دائما بعد هذه العناصر:

• <input>
• <meter>
• <progress>
• <select>
• <textarea>

 
<form action="/test.php" method="post">
 
  <label for="pass">Password here : </label>
  <input id="pass" type="password">
 
  <label for="em">E-mail here : </label>
  <input id="em" type="email">
 
  <input type="submit">
 
</form> 

html fieldset, legend tags

<fieldset> </fieldset>
<legend> </legend>

fieldset يُستخدم هذا العنصر لوضع مجموعة من العناصر ذات الصلة بداخله. ويكون حولهم اطار.
يُستخدم دائما داخل ال form
ودائما ما يُستخدم معه عنصر ال <legend> وذلك لإضافة عنوان لهذه المجموعة.
مثال على ذلك:

 
<form action="/example.php" method="post">
  <fieldset>
    <legend> sign in form : </legend>
 
    <label for="pass">Password here : </label>
    <input id="pass" type="password">
    <br>
    <label for="em">E-mail here : </label>
    <input id="em" type="email">
    <br>
    <input type="submit">
 
  </fieldset>
</form> 

html select, option tags

<select> </select>
<option> </option>

نستخدم هذه العناصر عند عمل drop-down list وترجمتها قائمة منسدلة.
أولا نقوم باستخدام عنصر <select>
ثانيا داخل عنصر ال <select> يتم وضع عنصر ال <option> الذي يحتوي على اختيارات يقوم زائر الموقع باختيار اختيار واحد من بينهم.
وعنصر ال <option> دائما يكون داخل عنصر ال
<select> وعنصر ال <datalist>
مثال على ذلك:

 
<form>
  <label for="browsers">Choose your best browser : </label>
 
  <select id="browsers">
    <option value="Chrome"> Chrome </option>
    <option value="Firefox"> Firefox </option>
    <option value="Opera"> Opera </option>
  </select>
</form>

html datalist tag

<datalist> </datalist>
<option> </option>

نستخدم هذا العنصر <datalist> عندما نُريد من المُستخدم وضع قيم مُعينة فقط داخل حقل ادخال <input> وبالتالي دائما يكون هذا العنصر بعد عنصر ال <input> وفى هذه الحالة يحتوى عنصر ال <input> على attribute يُسمى list وتكون قيمته هي نفس قيمه attribute يُسمى id خاص ب عنصر ال <datalist> وبداخل عنصر ال datalist يوجد عنصر يُسمى option والذي سوف نشرحه هنا في هذا الشرح.
مثال على ذلك:

 
<form action="/example.php" method="post">
  <label for="box">Choose your best browser : </label>
 
  <input list="browsers" />
 
  <datalist id="browsers">
    <option value="Chrome"> </option>
    <option value="Firefox"> </option>
    <option value="Opera"> </option>
  </datalist>
 
  <input type="submit" />
</form> 

html textarea tag

<textarea> </textarea>

يُستخدم هذا العنصر عندما تريد من زائر الموقع ادخال نص طويل متعدد الاسطر.
وله 2 attributes أساسيين هما:

• row : وتكون القيمة بداخله عبارة عن رقم يحدد عرض ال text area
• Col : وتكون القيمة بداخله عبارة عن رقم يحدد طول ال text area

 
<form>
  <label for="tellus">Tell us about opinion : </label>
  <textarea id="tellus" cols="30" rows="10"> Text your message here ...</textarea>
 
  <input type="submit" value="Submit">
</form> 

html button tag

<button> </button>

يُستخدم هذا العنصر لعمل زر يُمكن الضغط عليه.
وله attribute أساسي هو type الذي يُحدد نوع الزر وله 3 قيم:

• button
• reset
• submit

 
<button type="button"> Click here </button> 

html output tag

<output> </output>

يُستخدم هذا العنصر لإظهار نتائج عملية حسابية ودائما ما يتم استخدام اكواد لغة برمجية مثل JavaScript لعمل هذه العملية الحسابية.

html optgroup tag

<optgroup> </optgroup>

opt هي اختصار ل option
هذا العنصر يُستخدم أيضا داخل عنصر ال <select>
وهو يُعتبر عنوان لمجموعة من الاختيارات وبالتالي يكون بداخله عنصر ال <option>
وله attribute خاص به يُسمى label وقيمته تكون عبارة عن عنوان المجموعة.
مثال على ذلك:

 
<label for="Frameworks">Choose your favorite Framework</label>
 
<select id="Frameworks">
 
  <optgroup label="front-end framework">
    <option value="React">React</option>
    <option value="Angular">Angular</option>
    <option value="Vue">Vue</option>
  </optgroup>
 
  <optgroup label="Back-end">
    <option value="Laravel">Laravel</option>
    <option value="Django">Django</option>
    <option value="Flask">Flask</option>
  </optgroup>
 
</select>