HTML / تجميع عناصر النموذج المشتركة
مفهوم تجميع العناصر
تجميع العناصر في نموذج HTML يعد من الأساليب الفعالة التي تساعد في تنظيم وتجميع مجموعة من العناصر ذات الصلة ضمن حدود معينة، مما يجعل النموذج يبدو أكثر ترتيباً وجمالية.
يتمثل الهدف الرئيسي من تجميع العناصر في تحسين تجربة المستخدم، حيث يتمكن من رؤية العناصر المشتركة بشكل واضح ومرتب.
عند استخدام حدود حول عناصر النموذج، يمكن للمستخدم أن يتفهم بسهولة المجموعات المختلفة من البيانات التي يحتاج إلى إدخالها. على سبيل المثال، يمكن تجميع المعلومات الشخصية مثل الاسم والبريد الإلكتروني في مجموعة واحدة، بينما يمكن تجميع تفضيلات اللغة في مجموعة أخرى. هذه الطريقة تعزز من وضوح النموذج وتجعل المعلومات أكثر يسراً في الفهم.
في هذا الدرس، سنتعرف على كيفية استخدام الوسم <fieldset> لرسم حدود حول عناصر النموذج، بالإضافة إلى كيفية إضافة عنوان لكل مجموعة باستخدام الوسم <legend>.
إضافة حدود حول العناصر
لإضافة حدود حول مجموعة من عناصر النموذج، يمكنك استخدام الوسم <fieldset>. هذا الوسم يعمل على إنشاء مربع حول العناصر التي ترغب في تجميعها، مما يسهل على المستخدم فهم العلاقة بين هذه العناصر. يمكنك أيضاً إضافة عنوان لهذا المربع باستخدام الوسم <legend>، مما يوفر توضيحاً إضافياً حول محتويات المجموعة.
خصائص الوسم <fieldset>
عند استخدام الوسم <fieldset>، يمكنك الاستفادة من بعض الخصائص المهمة:
id: تستخدم لإعطاء معرف فريد لمجموعة العناصر، مما يسهل ربطها مع وسوم أخرى مثل<label>.class: يمكن استخدامها لتطبيق أنماط CSS معينة على المجموعة، مما يزيد من جمالية التصميم.disabled: يجعل جميع العناصر داخل<fieldset>غير قابلة للتفاعل، مما يمنع المستخدم من إدخال بيانات فيها.
خصائص الوسم <legend>
الوسم <legend> يستخدم لتحديد عنوان المجموعة. يتم وضعه داخل الوسم <fieldset>، ويظهر في أعلى المربع، مما يوفر سياقاً إضافياً حول العناصر الموجودة بداخله. يمكن أن يساعد ذلك المستخدمين على فهم المعلومات المطلوبة بشكل أسرع.
في المثال التالي، قمنا بإضافة حدود وعنوان للنموذج نفسه:
<!DOCTYPE html>
<html>
<body>
<h2>Sample Form with fieldset</h2>
<form action="/tryit/submitted" method="post">
<!-- حتى يظهروا بداخل المربع <fieldset> قمنا بوضع جميع العناصر بداخل الوسم -->
<fieldset>
<!-- <legend> العنوان الذي سيظهر في أعلى النموذج قمنا بوضعه بداخل الوسم -->
<legend>Login Form</legend><br>
<label for="username">Username</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</fieldset>
</form>
</body>
</html>
مجموعتان من عناصر النموذج
في المثال التالي، قمنا بتقسيم العناصر الموجودة في النموذج إلى مجموعتين متميزتين، كل منهما تحتوي على عنوان خاص بها، مما يسهل على المستخدم فهم وتصنيف المعلومات بشكل أفضل:
<!DOCTYPE html>
<html>
<body>
<h2>Sample Form with fieldset</h2>
<form action="/tryit/submitted" method="post">
<!-- هنا وضعنا حدود و عنوان للمجموعة الأولى -->
<fieldset>
<legend>Name</legend>
<label for="firstName">First Name</label><br>
<input type="text" id="firstName" name="firstName"><br><br>
<label for="lastName">Last Name</label><br>
<input type="text" id="lastName" name="lastName">
</fieldset>
<br>
<!-- هنا وضعنا حدود و عنوان للمجموعة الثانية -->
<fieldset>
<legend>Favourite Language</legend>
<input type="radio" id="ar" name="language" value="arabic" checked>
<label for="ar">Arabic</label><br>
<input type="radio" id="en" name="language" value="english">
<label for="en">English</label><br>
<input type="radio" id="fr" name="language" value="french">
<label for="fr">French</label>
</fieldset>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
نموذج شامل بعناوين وحدود
في المثال التالي، قمنا بتقديم نموذج شامل يحتوي على حدود وعناوين لكل عنصر موجود فيه، مما يجعل المعلومات مرتبة ومنظمة بشكل أفضل:
<!DOCTYPE html>
<html>
<body>
<h2>Sample Form with fieldset</h2>
<form action="/tryit/submitted" method="post">
<!-- هنا وضعنا حدود و عنوان لكل عناصر النموذج -->
<fieldset>
<legend>Questionnaire</legend><br>
<!-- هنا وضعنا حدود و عنوان للمجموعة الأولى -->
<fieldset>
<legend>Name</legend>
<label for="firstName">First Name</label><br>
<input type="text" id="firstName" name="firstName"><br><br>
<label for="lastName">Last Name</label><br>
<input type="text" id="lastName" name="lastName">
</fieldset>
<br>
<!-- هنا وضعنا حدود و عنوان للمجموعة الثانية -->
<fieldset>
<legend>Favourite Language</legend>
<input type="radio" id="ar" name="language" value="arabic" checked>
<label for="ar">Arabic</label><br>
<input type="radio" id="en" name="language" value="english">
<label for="en">English</label><br>
<input type="radio" id="fr" name="language" value="french">
<label for="fr">French</label>
</fieldset>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>