HTML Form Attributes
-
بنتعلم في هذا الدرس على معنى Form Attributes والاناع المختلفة لها، وطريقة تطبيقها
تمام التمام نبدأ ب Action Attribute
Action Attribute
في هذا attribute يتم تعريف action المستخدم عند عمل submit ل form ،
طيب نطبق المثال التالي حتى نفهم الموضوع:
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="CheckUserNamePassword">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username" required><br>
<label for="lname">Password:</label><br>
<input type="password" id="Password" name="Password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</htm>
النتيجة
ملاحظة : في حال عدم تحديد action في form . بكون action الافتراضي للصفحة الحالية.
Target Attribute
في هذا Attribute يتم تحديد مكان الاستجابة عند عمل submit ل form
القيم الي ممكن تطبيقه على هذا Attribute
| القيمة Value | الوصف |
| blank_ | تكون النتيجة في صفحة ثانية مستقلة |
| self_ | تكون النتيجة بنفس الصفحة وهو الوضع الافتراضي |
| parent_ | تكون النتيجة في صفحة parent frame |
| top_ | يتم عرض النص بشكل كامل في نفس الصفحه full body of the window |
| framename | يتم عرض النتيجة في Iframe حسب الاسم |
الوضع الافتراضي هو self_.
طبق المثال التالي:
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="CheckUserNamePassword" target="_blank">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username" required><br>
<label for="lname">Password:</label><br>
<input type="password" id="Password" name="Password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</htm>
جرب تضغط على submit وشوف النتيجة اكيد بتكون ان تم فتح صفحه جديده باسم action
Method Attribute
في هذا attribute يتم تحديد HTTP method التي ستستخدم عند عمل Submit ل Form
وفي نوعين من هذا attribute
- Get
- Post
في الطريقتين يتم التعامل مع طلبات HTTP للبيانات في form لكن الفرق في كيفية التعامل مع البيانات المرسلة والمستخدمة. في الجدول التالي ذكرنا اهم الاختلافات بين الطرقتين .
| الاختلاف | POST | GET |
| Form data | يدمج البيانات form data مع URL بالشكل:Name/Value | يدمج البيانات form data في Body ولا يتم عرض هذه البيانات في URL |
| قيود على نوع البيانات form data | يوجد قيود فقط ASCII characters مسموح بها | لا يوجد قيود يمكن استخدام ASCII characters و Binary data |
| الاختراق Hacked | يمكن وبسهوله | يمكن ولكن بصعوبة |
| الأمان Security | مستوى الحماية منخفض وذلك بسبب ان البيانات ترسل مع URL ، وبالتالي يمكن حفظ browser history and server logs | مستوى الحماية عالي لان البيانات و parameters لا يتم حفظها في browser history و server logs |
| Cached | يمكن عمل Cached | لا يمكن عمل Cached |
| الاستخدام | تستخدم مع البيانات الغير حساسة بسبب ان هذه البيانات ترسل مع URL | تستخدم عند وجود بيانات حساسة بسبب ان هذه البيانات ترسل في Body |
| طول URL | طول URL محدود (2048 characters) | لا يوجد حدود لان URL ما يستخدم |
طبق المثال التالي :
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="CheckUserNamePassword" target="_blank" method="get">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username" required><br>
<label for="lname">Password:</label><br>
<input type="password" id="Password" name="Password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
استخدمنا "method="get
حكينا في Get ال Parameters ترسل مع URL وفي مثالنا السابق وفي حال استخدمنا Get بكون شكل URL:
لاحظ اسم المستخدم وكلمة المرور موجودين في URL بأسماء واضحه ومن السهل معرفتها.
طيب في حال استخدمنا Post كيف ممكن نحصل Form data
لاحظ ان ما في Parameters. تمام طيب وين وكيف ممكن نستخدم من هذه data
استقبال هذه البيانات يختلف حسب اللغة المستخدمة في الاستقبال
مثال اذا كنا بنستخدم action في MVC بتكون طريقة الوصول الى هذه البيانات :
public ActionResult CheckUserNamePassword (FormCollection form)
{
string UserName = Convert.ToString(form["UserName"]);
}
Autocomplete Attribute
تستخدم هذه attribute للتحكم بخاصية autocomplete بحيث يتم التفعيل او الغاء التفعيل. وعند التفعيل يتم عرض القيم السابقة التي استخدمها المستخدم في المتصفح .
طريقة التطبيق
<form action="/PageName" autocomplete="on">
Novalidate Attribute
تستخدم هذه attribute لعدم التحقق validated من القيم المدخلة في form.وهذا يعني ان يتم عمل submit ل form دون التحقق من القيم.
طريقة الكتابة
<form action="CheckUserNamePassword" target="_blank" method="post" novalidate>
اترك تعليقك