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>:

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

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

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

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

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

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

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

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

مثال للتوضيح:

<form>
  <label for="username">Username: </label>
  <input type="text" name="username" id="username"><br>
</form>

حقل كلمة المرور – 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>

مربعات الاختيار – 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>

إذا كنت تريد جعل زر أو مربع الاختيار محددًا بشكل افتراضي ، فيمكنك إضافة السمة ‘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>

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

مربعات التحديد – 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>:

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

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

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

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

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

مثال للتوضيح:

<form>
    <label for="selectfile">Upload:</label>
    <input type="file" name="file" id="selectfile">
</form>

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

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

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

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

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

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

أزرار الإرسال وإعادة التعيين – 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>

عنصر الزر – button

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

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

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

عنصر الـ 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>

المدخلات المخفية – 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>

عناصر نموذج HTML

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

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>