نموذج HTML هو قسم من المستند يحتوي على حقول مختلفة مثل حقول النص وحقول كلمة المرور وخانات الاختيار وأزرار الاختيار وزر الإرسال والقوائم وما إلى ذلك. يمكن استخدام نماذج HTML حيث نريد جمع بعض البيانات من زائر الموقع. على سبيل المثال ، في حالة تسجيل المستخدم ، قد ترغب في جمع معلومات مثل الاسم وعنوان البريد الإلكتروني ورقم الهاتف وما إلى ذلك.
سيأخذ النموذج مدخلات، ثم يخزنها في تطبيق خلفي مثل CGI أو ASP Script أو PHP script وما إلى ذلك. سيقوم التطبيق الخلفي بتنفيذ المعالجة المطلوبة على البيانات التي تم تمريرها مثل تخزينها في قاعدة البيانات. هناك العديد من عناصر النموذج المتاحة مثل حقول النص، وحقول منطقة النص، والقوائم المنسدلة، وأزرار الاختيار، ومربعات الاختيار، وما إلى ذلك.
هيكل نموذج HTML
تحدد علامة <form> النموذج الذي يتم استخدامه لتجميع مدخلات المستخدم. يجب كتابة جميع عناصر النموذج داخل علامتي <form> و </form>.
<form>
. . . .
Form elements
. . . .
</form>
عناصر نماذج HTML
|
الصفات
|
الوصف |
|
<form>
|
يحدد نموذج HTML لإدخال المدخلات من قبل الجانب المستخدم. |
|
<input>
|
يحدد عنصر تحكم الإدخال. |
|
<select>
|
يحدد عنصر تحكم إدخال متعدد. |
|
<option>
|
يحدد خيارًا في قائمة منسدلة. |
|
<textarea>
|
يحدد القائمة المنسدلة. |
|
<button>
|
يحدد تسمية لعنصر الإدخال. |
|
<fieldset>
|
يقوم بتجميع العنصر ذي الصلة في نموذج. |
|
<legend>
|
يحدد تسمية توضيحية لعنصر <fieldset>. |
|
<optgroup>
|
يحدد مجموعة من الخيارات ذات الصلة في قائمة منسدلة. |
|
<label>
|
يحدد تسمية للحقل. |
1. عنصر "Input":
أهم عنصر في الشكل هو <input>. يمكن عرض عنصر <input> بعدة طرق ، اعتمادًا على سمة النوع.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML form input attribute</title>
</head>
<body>
<h2>Heading</h2>
<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
والنتيجة ستكون كالتالي :
First name: Last name:
2. عنصر "Select":
يحدد العنصر <select> القائمة المنسدلة. يتم استخدامه غالبًا عندما يتعين عليك إظهار عدد العناصر.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</title>HTML form input attribute<title>
</head>
<body>
<form action="action-page.php">
<select name="Cars">
<option value="Audi"> Audi </option>
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
</select>
<input type="submit">
</form>
</body>
</html>
والنتيجة ستكون كالتالي :
- تحدد سمة الإجراء (action) الذي سيتم تنفيذه عند إرسال النموذج. يجب عليك إضافة الوجهة حيث يتم إرسال النموذج. مثل action="action-page.php"
- يحدد العنصر <option> الخيارات المختلفة التي يمكن تحديدها.
- بشكل افتراضي ، يتم تحديد العنصر الأول في القائمة المنسدلة.
- لتحديد خيار محدد مسبقًا ، أضف السمة المحددة إلى الخيار: <option value = "abc" selected>.
3. عنصر "Textarea":
يحدد العنصر <textarea> حقل إدخال متعدد الأسطر.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</title>سمة Textarea<title>
</head>
<body>
<h2>Textarea</h2>
<p/>The textarea element defines a multiline input field.<p>
<form action="action-page.php">
<textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea. </textarea>
<br>
<input type="submit">
</form>
</body>
</html>
والنتيجة ستكون كالتالي :
4. عنصر "Button":
يحدد العنصر <button> الزر القابل للنقر.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML form button attribute</title>
</head>
<body>
<button type="button">Click Here</button>
</body>
</html>
والنتيجة ستكون كالتالي :
5. سمة "Method":
تحدد سمة method أسلوب HTTP (GET أو POST) لاستخدامها عند إرسال بيانات النموذج. GET هي الطريقة الافتراضية عند إرسال بيانات النموذج.
<form action="action-page.php" method="get">
<form action="action-page.php" method="post">
الفرق بين GET و POST
|
النقاط المهمة
|
GET |
POST |
|
تمرير البيانات
|
يمكن إرسال كمية محدودة من البيانات لأنه يتم إرسال البيانات في header. |
يمكن إرسال كمية كبيرة من البيانات لأنه يتم إرسال البيانات في body. |
|
الحماية
|
لا يتم تأمين طلب الحصول على البيانات لأن البيانات هي جزء من عنوان URL ، وهذه البيانات محفوظة في محفوظات المتصفح وسجلات الخادم في نص عادي. |
طلب النشر مؤمن لأنه لا يتم عرض البيانات في شريط URL ولا يتم تخزين المعلمات في محفوظات المتصفح أو في سجلات خادم الويب. |
|
المرجعية
|
يمكن وضع إشارة مرجعية على الطلب وتخزينه مؤقتًا. |
لا يمكن وضع إشارة مرجعية على الطلب وحفظه مؤقتًا. |
|
سهولة الاستخدام
|
لا تكون طريقة GET مناسبة عند إرسال بيانات حساسة مثل معرف المستخدم أو كلمات المرور. |
يعد POST مفيدًا عندما ترسل بيانات حساسة لأن بياناتك يتم إرسالها في شكل مشفر. |
|
كمية البيانات
|
كمية البيانات مقيدة ، في العادة إلى 2048 حرفًا. |
لا قيود على كمية البيانات التي يمكن إرسالها. |
|
الاختراق
|
أسهل في الاختراق. |
أكثر صعوبة في الاختراق. |
6. سمة "Name":
تحدد سمة Name اسم عنصر <input>. من الممارسات الجيدة استخدام هذه السمة ، كما أنها جيدة أيضًا لغرض تحسين محركات البحث.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML form name attribute</title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="Firstname" value="Tito">
Last name:
<input type="text" name="lastname" value="Mido">
<input type="submit" value="Submit">
</form>
</body>
</html>
والنتيجة ستكون كالتالي :
First name: Last name:
7. تجميع بيانات النموذج مع <fieldset>:
يُستخدم عنصر <fieldset> لتجميع البيانات ذات الصلة في نموذج ويحدد العنصر <legend> تسمية توضيحية لعنصر <fieldset>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</title>Form field collection and Legend attributes<title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="Tito">
Last name:
<input type="text" name="lastname" value="Mido">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
والنتيجة ستكون كالتالي :
Personal information:
First name: Last name: