HTML / عنونة عناصر النموذج
أهمية عنونة العناصر
إضافة نص عادي كإسم لعنصر موضوع في النموذج لا يعتبر أفضل طريقة لفعل ذلك لأن المتصفح لن يعرف أنهما مرتبطين ببعضهما.
في هذا الدرس سنتعلم الطريقة الصحيحة لعنونة عناصر النموذج باستخدام الوسم <label>.
الطريقة الصحيحة لعنونة العناصر
طريقة وضع أسماء لعناصر النموذج كما فعلنا سابقاً لا تُعتبر أفضل طريقة لفعل ذلك و ليست الطريقة التي يجب إتباعها لفعل ذلك. في هذا الدرس ستتعلم الطريقة الصحيحة لعنونة العناصر.
في المثال التالي الطريقة التي قمنا فيها بوضع عنوان لمربع النص ليست الطريقة التي يجب إتباعها رغم أنها تظهر بشكل عادي جداً في المتصفح. المشكلة في هذه الطريقة هي أن المتصفح لا يعرف أن النص Username مرتبط بمربع النص الموضوع بعده و بالتالي في حال قام المستخدم بالنقر على النص فإنه لن يعرف أنه يريد البدء بالكتابة بداخل مربع النص الخاص به و بالتالي سيضطر المستخدم أن يقوم بالنقر بداخل مربع النص حتى يتمكن من الكتابة فيه.
مثال:
خد الكواد نسخ واضغط هنا جرب الكود<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<!-- موضوعة خصيصياً لمربع النص الموضوع بعدها Username المتصفح لا يعرف أن الكلمة -->
Username<br>
<!-- لهذا السبب يجب أن ينقر المستخدم بداخل مربع النص حتى يتمكن من الكتابة بداخله -->
<input type="text" name="username"><br><br>
<input type="submit">
</form>
<p><b>Note:</b> If you click on "Username" the carret of typing will not move inside the input field.</p>
</body>
</html>
الطريقة الصحيحة لعنونة العناصر
أي عنصر في النموذج تريد وضع نص خاص له سواء بجانبه أو فوقه يفترض أن تضعه بداخل <label>.
عند إضافة النص بداخل <label> و ربطه بالعنصر الموضوع من أجله يصبح تعامل المتصفح مع هذا العنصر أفضل حيث أنه في حال نقر المستخدم على النص الموضوع للعنصر فإنه سيتم إعتبار أنه نقر على العنصر نفسه و بالتالي يمكنه مباشرةً البدء بالكتابة فيه.
في المثال التالي قمنا بإضافة مربع نص <input type="text"> مربوط بإسم <label> في النموذج:
<label for="username">Username</label><br>
<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<!-- الظاهرة في الصفحة سيتم Username عند النقر على الكلمة
"username" يساوي id وضع الماوس بداخل مربع النص الذي يملك -->
<label for="username">Username</label><br>
<input type="text" id="username" name="username"><br><br>
<input type="submit">
</form>
<p><b>Note:</b> If you click on "Username" the carret of typing will move inside the input field.</p>
</body>
</html>