شرح forms

يمكن إنشاء نماذج HTML باستخدام عناصر النموذج. يتم استخدام هذه العناصر لجمع البيانات من المستخدمين عبر الويب. فيما يلي بعض الأمثلة الشائعة لعناصر النموذج في HTML:

1) الحقل input: يستخدم هذا العنصر لإنشاء حقل يمكن للمستخدمين إدخال البيانات فيه، وتستخدم القيمة الخاصة بـ"النوع" لتحديد نوع الحقل. على سبيل المثال، يمكن استخدام " type=text" لإنشاء حقل نص، أو "type=email" لإنشاء حقل بريد إلكتروني.

HTML

<input type="text" name="firstname" placeholder="الاسم الأول">
<input type="email" name="email" placeholder="البريد الإلكتروني">

2) الحقل textarea: يستخدم هذا العنصر لإنشاء حقل نص طويل يمكن للمستخدمين إدخال البيانات فيه، وتستخدم القيمة الخاصة بـ"النوع" لتحديد نوع الحقل.

HTML

<textarea name="message" rows="5" cols="40">
write letter text her...
</textarea>

3) الحقل select: يستخدم هذا العنصر لإنشاء قائمة من الخيارات يمكن للمستخدمين اختيار واحدة منها، وتستخدم العناصر option لتحديد الخيارات.

HTML

<select name="gender">
    <option value="male">ذكر</option>
    <option value="fmale">أنثى</option>
</select>

Forms

يمكن كتابة وسم form في HTML باستخدام العنصر form، ويستخدم هذا الوسم لتحديد مجموعة من عناصر النموذج التي تشكل النموذج الكامل. يجب عليك تحديد الطريقة المستخدمة لإرسال البيانات (POST أو GET) باستخدام القيمة الخاصة بـ"الطريقة" في الوسم form.
هناك العديد من الخيارات الممكنة لوسم form في HTML، ولكن الشكل الأساسي لوسم form يبدو كالتالي:

HTML

<form action="url" method="POST/GET">
    < مجموعة من عناصر النموذج -->
</form>

حيث:
action: يحدد URL الذي سيتم إرسال البيانات إليه بمجرد تقديم النموذج. يمكن استخدام رابط URL الذي يؤدي إلى ملف PHP أو أي لغة برمجة أخرى لمعالجة البيانات المرسلة من النموذج.

method: يحدد طريقة إرسال البيانات. يمكن استخدام POST أو GET، حيث يتم استخدام POST عندما تحتوي النماذج على بيانات سرية ويتم استخدام GET عندما تحتوي النماذج على بيانات عامة.

يمكن إضافة العناصر المختلفة المذكورة أعلاه داخل الوسم form وذلك بحسب الاحتياجات، وفي النهاية يتم إضافة زر "submit" للنموذج لإرسال البيانات إلى الخادم.

HTML

<form action="/action_page.php" method="POST">
    <label for="name">الاسم:</label >
    <input type="text" id="name" name="name"><br><br>
    <label  for="email">البريد الإلكتروني:</label >
    <input type="email" id="email" name="email"><br><br>
    <label  for="password">كلمة المرور:</label >
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="إرسال">
</form>

يتم تحديد العنصر label لربط التسمية بحقل الإدخال، مما يجعل النموذج أكثر قابلية للاستخدام.

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.