الكورس

Advertisements

HTML Forms | In Arabic


HTML Forms – فى هذا الفصل هنتعرف على النماذج فى لغة HTML. وكيفية إستخدامها؟ وانواع عناصر الإدخال وكل المعلومات حولها، مع بعض الأمثلة التوضيحية.


 

النماذج – HTML Forms

 

نماذج HTML مطلوبة لجمع أنواع مختلفة من إدخالات المستخدم، مثل تفاصيل الاتصال: الاسم وعنوان البريد الإلكترونى وكلمات المرور و أرقام الهاتف، او تفاصيل مثل معلومات بطاقة الإئتمان ..إلخ.

تحتوي النماذج على عناصر خاصة تسمى عناصر التحكم مثل: مربع الإدخال ومربعات الاختيار وأزرار الاختيار وأزرار الإرسال وما إلى ذلك.

يتم استخدام العنصر <form> لإنشاء نموذج HTML.

 

مثال للتوضيح

نموذج إدخال بسيط:




<form action="" method="POST">
    <label for="name">Your Name: </label>
    <input type="text" name="name" id="name"><br>
    <label for="email">Your Email: </label>
    <input type="email" name="email" id="email"><br>
    <label for="password">Your Email: </label>
    <input type="password" name="password" id="password"><br>
    <input type="submit" value="Login">
</form>




 

عنصر الإدخال – input

 

هذا هو العنصر الأكثر استخدامًا في نماذج HTML، يسمح لك وسم الـ <input> بتحديد أنواع مختلفة من حقول إدخال المستخدم ، اعتمادًا على قيمة السمة type.

يمكن أن يكون عنصر الإدخال من نوع:

  1. text: حقل النص.
  2. password: حقل كلمة المرور.
  3. checkbox: مربع الاختيار.
  4. radio: زر الاختيار.
  5. submit: زر الإرسال.
  6. reset: زر إعادة التعيين.
  7. file: مربع اختيار الملف.

بالإضافة إلى العديد من أنواع الإدخال الجديدة المقدمة في: HTML5 New Input types.

 

السمات الخاصة بوسم الـ <input>:

السمةالإستخدام
typeتُستخدم لتحديد نوع الإدخال، سواء كان (نص – كلمة مرور – ..إلخ).
nameتُستخدم لإعطاء اسم لعنصر الإدخال الذي يتم إرساله إلى الخادم ليتم التعرف عليه والحصول على القيمة.
valueتُستخدم لتوفير قيمة أولية لعنصر الإدخال.
maxlengthتُستخدم لتحديد الحد الأقصى لعدد الأحرف التي يمكن للمستخدم إدخالها في مربع الإدخال.
sizeتُستخدم لتحديد حجم عنصر الإدخال من حيث الأحرف.

 

الحقول النصية – inputs text

 

الحقول النصية هي مناطق سطر واحد تسمح للمستخدم بإدخال النص.

يتم إنشاء عناصر الإدخال النصية أحادية السطر باستخدام وسم <input>، الذي له سمة type بقيمة ‘text‘. كالتالى:

<form>
  <input type="text" name="username" id="username"><br>
</form>

إذا كنت تريد أن يقوم المستخدم بإدخال عدة أسطر ، فيجب عليك استخدام وسم الـ<textarea> بدلاً من ذلك.


 

عنصر التسمية – label

 

يحدد الوسم <label> تسمية للعديد من عناصر النموذج.

يعد الوسم <label> مفيدًا لمستخدمي قارئ الشاشة ، لأن قارئ الشاشة سيقرأ تحميل الملصق label عندما يركز المستخدم على عنصر الإدخال.

يساعد الوسم <label> أيضًا المستخدمين الذين يجدون صعوبة في النقر فوق مناطق صغيرة جدًا (مثل أزرار الاختيار أو مربعات الاختيار) – لأنه عندما ينقر المستخدم على النص الموجود داخل العنصر <label> ، فإنه يبدل زر أو  مربع الاختيار.

 

مثال للتوضيح:
<form>
  <label for="username">Username: </label>
  <input type="text" name="username" id="username"><br>
</form>

يجب أن تكون السمة for للوسم <label> مساوية لسمة id فى الوسم <input> لربطهما معًا.


 

حقل كلمة المرور – Password

 

حقول كلمة المرور مماثلة لحقول النص، والفرق الوحيد هو أنه يتم إخفاء الأحرف في حقل كلمة المرور ، أي أنها تظهر كعلامات نجمية أو نقاط، وذلك لمنع شخص آخر من قراءة كلمة المرور على الشاشة.

هذا أيضًا عنصر إدخال نص أحادي السطر يتم إنشاؤه باستخدام وسم الـ <input> له سمة type بقيمة ‘password.

 

مثال للتوضيح:
<form>
  <label for="password">Your password: </label>
  <input type="password" name="password" id="password"><br>
</form>


 

أزرار الإختيار – Radio buttons

 

تُستخدم أزرار الاختيار للسماح للمستخدم بتحديد خيار واحد بالضبط من مجموعة خيارات محددة مسبقًا.

يتم إنشاؤه باستخدام وسم الـ <input> له سمة type بقيمة ‘radio’.

 

في ما يلي مثال لأزرار الاختيار التي يمكن استخدامها لجمع معلومات نوع المستخدم (ذكر – أنثى):
<h2>Gender</h2>
<form>
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female"><br>
</form>

Gender




 

مربعات الاختيار – Checkboxes

 

تسمح مربعات الاختيار للمستخدم بتحديد خيار واحد أو أكثر من مجموعة خيارات محددة مسبقًا.

يتم إنشاء مربعات الإختيار باستخدام وسم الـ <input> له سمة type بقيمة ‘checkbox‘.

 

في ما يلي مثال على مربعات الاختيار التي يمكن استخدامها لجمع معلومات حول (أفضل لغة/لغات برمجة للمستخدم):
<h2>Favorite Languages</h2>
<form>
    <label for="html">HTML</label>
    <input type="checkbox" name="favlang" id="html">
    <label for="js">JavaScript</label>
    <input type="checkbox" name="favlang" id="js">
    <label for="php">PHP</label>
    <input type="checkbox" name="favlang" id="php">
</form>

Favorite Languages

إذا كنت تريد جعل زر أو مربع الاختيار محددًا بشكل افتراضي ، فيمكنك إضافة السمة ‘checked‘ لعنصر الإدخال، هكذا:

<h2>Favorite Languages</h2>
<form>
    <label for="html">HTML</label>
    <input type="checkbox" name="favlang" id="html" checked>
    <label for="js">JavaScript</label>
    <input type="checkbox" name="favlang" id="js">
    <label for="php">PHP</label>
    <input type="checkbox" name="favlang" id="php">
</form>

Favorite Languages

 

السمات الخاصة بوسم الـ <checkbox> والـ <radio>:

السمةالإستخدام
typeيُستخدم لتحديد نوع الإدخال، سيتم تعيينه على (checkbox أو radio).
nameيُستخدم لإعطاء اسم لعنصر الإدخال الذي يتم إرساله إلى الخادم ليتم التعرف عليه والحصول على القيمة.
value يُستخدم لتحديد القيمة التي سيتم استخدامها إذا تم تحديد الـ checkbox أو الـ radio.
checkedيُستخدم لجعل زر أو مربع الاختيار محددًا بشكل افتراضي.

 

مربعات التحديد – Select boxes

 

مربع التحديد select box هو قائمة منسدلة بالخيارات تسمح للمستخدم بتحديد خيار واحد أو أكثر من قائمة الخيارات المنسدلة.

يتم إنشاء مربع التحديد باستخدام وسم الـ <select> بداخلة وسم أو أكثر من الـ <option>. كالتالى:

<form>
    <label for="month">Month:</label>
    <select name="month" id="month">
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
    </select>
</form>

 

السمات الخاصة بوسم الـ <select>:

السمةالإستخدام
sizeتحدد عدد الخيارات المرئية في القائمة المنسدلة.
multipleتحدد إمكانية تحديد خيارات متعددة مرة واحدة.
nameتحدد اسمًا للقائمة المنسدلة.

 

السمات الخاصة بوسم الـ <option>:

السمةالوصف
valueتحدد القيمة التي سيتم استخدامها إذا تم تحديد خيار في مربع التحديد.
labelتحدد طريقة بديلة لخيارات وضع العلامات.
selectedتحدد أن هذا الخيار يجب أن يكون القيمة محددة مبدئيًا عند تحميل الصفحة.

 

حقل اختيار ملف – file

 

تقدم متصفحات الويب مثل Google Chrome و Firefox حقل إدخال لتحديد ملف مع زر استعراض يُمكّن المستخدم من خلاله التنقل في محرك الأقراص الثابتة المحلي وتحديد ملف من ملفات الجهاز.

تسمح حقول الملف للمستخدم بالاستعراض بحثًا عن ملف محلي وإرساله كمرفق مع بيانات النموذج.

يتم إنشاء هذا الحقل أيضًا باستخدام عنصر <input> ، حيث يتم تعيين قيمة سمة type بقيمة ‘file‘.

 

مثال للتوضيح:
<form>
    <label for="selectfile">Upload:</label>
    <input type="file" name="file" id="selectfile">
</form>

 

السمات الخاصة بحقل الملف:

السمةالإستخدام
nameيستخدم لإعطاء اسم لعنصر الإدخال الذي يتم إرساله إلى الخادم ليتم التعرف عليه والحصول على القيمة.
acceptيحدد أنواع الملفات التي يقبلها الخادم.

 

عنصر إدخال نص متعدد الأسطر – Textarea

 

Textarea هو عنصر إدخال نص متعدد الأسطر يسمح للمستخدم بإدخال أكثر من سطر واحد من النص.

يتم إنشاء عناصر تحكم إدخال النص متعدد الأسطر باستخدام الوسم <textarea>. كالتالى:

<form>
 <label for="address">Address details:</label>
 <textarea rows="4" cols="40" name="address">
    Address here...
 </textarea>
</form>

 

السمات الخاصة بوسم الـ <textarea>:

السمةالإستخدام
rowsتحدد العدد المرئي من الأسطر في منطقة النص.
colsتحدد العرض المرئي لمنطقة النص.
nameيستخدم لإعطاء اسم لعنصر الإدخال textarea الذي يتم إرساله إلى الخادم ليتم التعرف عليه والحصول على القيمة.

Advertisements

 

أزرار الإرسال وإعادة التعيين – submit & reset

 

يتم استخدام زر submit لإرسال بيانات النموذج إلى خادم الويب.

عند النقر على زر الإرسال ، يتم إرسال بيانات النموذج إلى الملف المحدد في سمة action لمعالجة البيانات المرسلة.

كما يعمل زر reset على إعادة تعيين كافة عناصر الإدخال في النماذج إلى القيم الافتراضية.

 

مثال للتوضيح:
<form action="process.php" method="POST">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
    <label for="pass">Password:</label>
    <input type="password" name="password" id="pass">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

فى المثال السابق: إذا أدخلت إسمك فى الحقل أو أى بيانات وضغط على زر submit ، سيتم إرسالها إلى ملف “process.php” الموجود فى سمة action. لكن إذا ضغط على زر reset سيتم إرجاع كل القيم الإفتراضية.


 

عنصر الزر – button

 

يحدد وسم الـ <button> زرًا قابلاً للنقر، كالتالى:

<button type="button" onclick="myFunction()">Show result</button>
<h2 id="demo"></h2>

<script>
 function myFunction () {
   document.getElementById('demo').innerHTML = "Hello world!";
 }
</script>

فى المثال السابق: عند النقر على زر ‘ show result ‘ سيتم استدعاء دالة ()myFunction ، الدالة ستقوم بوضع ” Hello World” فى عنصر h2، وستظهر النتيجة فى صفحة الويب على هيئة عنوان.


 

عنصر الـ fieldset و legend

 

وسم الـ <fieldset> يُستخدم لتجميع البيانات ذات الصلة في نموذج.

يُسهّل تجميع البيانات في النموذج على المستخدمين تحديد موقع كل عنصر لجعل النموذج أكثر سهولة في الاستخدام.

وسم الـ <legend> يٌحدد تسمية توضيحية لوسم <fieldset>.

مثال للتوضيح:
<form action="process.php">
    <fieldset>
        <legend>User info :</legend>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br>
        <label for="gender">Gender:</label><br>
        <input type="text" id="gender" name="gender"><br><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>
User info :





 

المدخلات المخفية – Hidden input

 

تُستخدم المدخلات المخفية في النموذج لإخفاء البيانات داخل الصفحة والتي يمكن دفعها لاحقًا إلى الخادم. يخفي عنصر الإدخال هذا داخل الكود ولا يظهر في الصفحة الفعلية.

 

مثال للتوضيح:
<form>
    <h4>User Info</h4>
    <input type="text" name="username" />
    <input type="hidden" name="user_id" value="20" />
    <input type="submit" name="submit" value="Submit" />
 </form>

User Info

فى المثال السابق: سيتم إرسال قيمة “user_id” بقيمة “20” مع قيمة “username” الذى سيتم تمريرها من قبل المستخدم إلى الخادم معًا.


 

عناصر نموذج HTML

 

العنصرالإستخدام
<form>يحدد نموذج HTML لإدخال بيانات المستخدم.
<input>يحدد عنصر إدخال.
<label>يحدد تسمية لعنصر <input>.
<select>يحدد قائمة منسدلة.
<option>يحدد خيارًا في قائمة منسدلة.
<textarea>يحدد عنصر إدخال متعدد الأسطر (منطقة النص).
<button>يحدد زر قابل للنقر.
<fieldset>يحدد مجموعات العناصر ذات الصلة في نموذج.
<legend>يحدد تسمية توضيحية لعنصر<fieldset>.

 

سمات النموذج – Form attributes

 

السمةالإستخدام
actionتحدد عنوان URL الذي يعالج إرسال النموذج.
methodتحدد طريقة HTTP لإرسال النموذج، القيم الممكنة:

1. طريقة POST: بيانات النموذج المرسلة كنص الطلب.
2. طريقة GET: بيانات النموذج الملحقة بعنوان URL.
nameيحدد اسم النموذج.
enctypeإذا كانت قيمة سمة الـ ‘method‘ هي POST، فإن enctype هو نوع MIME لإرسال النموذج، والقيم الممكنة:

application / x-www-form-urlencoded ] .1 ]: القيمة الافتراضية.
2. [ multipart /form-data ]: نستخدم هذه القيمة إذا كان النموذج يحتوي على عناصر <input> بنوع file.

 

POST Method

 

يرسل هذا الـ method بيانات النموذج كمعاملة نشر HTTP.

لا يمكن وضع إشارة على عمليات إرسال النموذج باستخدام طريقة “POST“.

تعد طريقة الـ “POST” أكثر قوة وأمانًا من الـ “GET” ، ولا تحتوي طريقة الـ “POST” على قيود الحجم.

 

مثال للتوضيح:
<!-- Send data by [ 'POST' Method ] -->
<form action="post_process.php" method="POST">
    <label for="fname">First Name:</label>
    <input type="text" name="fname" id="fname">
    <label for="sname">Second Name:</label>
    <input type="text" name="sname" id="sname">
    <input type="submit" value="Submit by post">
</form>

 

GET Method

 

تُلحق هذه الـ method بيانات النموذج بعنوان URL في أزواج اسم وقيمة.

تساعد هذه الطريقة في عمليات إرسال النموذج حيث يرغب المستخدم في وضع إشارة على النتيجة، هناك حد لمقدار البيانات التي يمكنك وضعها في عنوان URL (تختلف بين المتصفحات)، وبالتالي لا يمكنك التأكد من نقل جميع بيانات النموذج بشكل صحيح.

لا تستخدم أبدًا طريقة الـ “GET” لتمرير المعلومات الحساسة! (ستكون كلمة المرور أو البطاقة الإئتمانية و المعلومات الحساسة الأخرى مرئية في شريط عنوان المتصفح).

 

مثال للتوضيح:
<!-- Send data by [ 'GET' Method ] -->
<form action="get_process.php" method="GET">
    <label for="fname">First Name:</label>
    <input type="text" name="fname" id="fname">
    <label for="sname">Second Name:</label>
    <input type="text" name="sname" id="sname">
    <input type="submit" value="Submit by get">
</form>

 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Forms” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.





الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements