HTML - Input form Attributes سمات عناصر الفورم

خصائص <input> المرتبطة بالنماذج في HTML

تقدم عناصر <input> في HTML مجموعة من الخصائص التي تتحكم في كيفية تفاعلها مع النماذج. هذه الخصائص تُستخدم لتحديد النموذج الذي ينتمي إليه عنصر الإدخال، وكيفية إرسال البيانات، وغيرها من السلوكيات.

✅ أهم الخصائص المرتبطة بالنماذج:

الخاصية	الوصف
form	يحدد النموذج الذي ينتمي إليه عنصر <input>. يجب أن تتطابق قيمته مع قيمة خاصية id في عنصر <form> المطلوب.
formaction	يحدد عنوان URL الذي سيتم إرسال البيانات إليه عند تقديم النموذج. يتجاوز هذا العنوان الخاصية action في عنصر <form>.
formenctype	يحدد كيفية ترميز البيانات عند إرسالها. يتجاوز هذه الخاصية خاصية enctype في عنصر <form>.
formmethod	يحدد طريقة HTTP المستخدمة عند إرسال البيانات (GET أو POST). يتجاوز هذه الخاصية خاصية method في عنصر <form>.
formtarget	يحدد النافذة أو الإطار الذي سيتم عرض الاستجابة فيه بعد تقديم النموذج. يتجاوز هذه الخاصية خاصية target في عنصر <form>.
formnovalidate	يحدد ما إذا كان يجب تعطيل التحقق من صحة المدخلات عند تقديم النموذج. يتجاوز هذه الخاصية خاصية novalidate في عنصر <form>.

🧪 أمثلة توضيحية:

1. استخدام خاصية form لربط عنصر إدخال بنموذج معين:

<form action="/action_page.php" id="myForm">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="myForm">

2. استخدام خاصية formaction لتحديد وجهة مختلفة لزر الإرسال:

<form action="/default_action.php">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/special_action.php" value="Submit as Admin">
</form>

3. استخدام خاصية formenctype لتحديد نوع ترميز البيانات:

<form action="/upload.php" method="post">
  <label for="file">Upload file:</label>
  <input type="file" id="file" name="file"><br><br>
  <input type="submit" value="Upload">
  <input type="submit" formenctype="multipart/form-data" value="Upload as Multipart">
</form>

4. استخدام خاصية formmethod لتحديد طريقة الإرسال:

<form action="/submit.php">
  <label for="username">Username:</label>
  <input type="text" id="username"
::contentReference[oaicite:0]{index=0}
name="username"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

5. استخدام خاصية formtarget لفتح النتائج في تبويب جديد:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit in new tab">
</form>

6. استخدام خاصية formnovalidate لتعطيل التحقق:

<form action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate value="Submit without validation">
</form>

7. خاصية novalidate في <form> لتعطيل التحقق كليًا:

<form action="/action_page.php" novalidate>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit without any validation">
</form>

💡 ملاحظات:

• بعض هذه الخصائص لا تعمل إلا مع أنواع معينة من <input> مثل submit أو image.
• الخصائص التي تُكتب داخل <input> يمكنها تجاوز الإعدادات العامة الموجودة في <form>.
• يمكنك استخدام هذه الخصائص لتخصيص سلوك الأزرار المختلفة داخل نفس النموذج.