تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
لأن البيانات التي تريد الحصول عليها متنوعة (إسم، سن، عنوان، رقم هاتف، بريد إلكتروني،..) فإن HTML توفر العديد من الحقول التي يمكنك استخدامها داخل النماذج، لتتمكن من جمع كل هذة الأنواع المختلفة من البيانات.
العنصر <input>
أكثر الحقول أهميةً واستخداماً هو الحقل <input> وترجع أهميته إلى إمكانية ظهروه بأكثر من شكل إعتماداً على نوعه، حيث يوفر العنصر <input> العديد من الأنواع.
| 1 2 3 | <input name="firstname" type="text"> |
في حالة عدم تعيين نوع العنصر <input> سيتم استخدام القيمة الإفتراضية وهي text.
العنصر <select>
يمَكّنك العنصر <select> من إنشاء قائمة منسدلة بالعديد من الخيارات.
| 1 2 3 4 5 6 7 8 9 10 | <form action=""> اختر نوع السيارة <select name="car"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select></form> |
كي نقوم بإنشاء قائمة منسدلة، نقوم بفتح العنصر <select> ثم نقوم بوضع كل خيار بين وسمين <option> </option>
| 1 2 3 | <option value=“fiat”>Fiat</option> |
الخاصية value تحتوي على القيمة التي سيتم إرسالها، والنص الموجود بين الوسمين هو الذي ستظهر في القائمة.
بشكل إفتراضي، أول عنصر في القائمة سيتم تحديده، وإذا أردت تعيين عنصر أخر على أنه القيمة الإفتراضية للحقل <select> يمكنك وضع الخاصية selected مع العنصر المطلوب هكذا:
| 1 2 3 | <option value="fiat" selected>Fiat</option> |
عدد القيم التي سيتم إظهارها
يمكنك إستخدام الخاصية size لتحديد عدد العناصر المطلوب إظهارها:
| 1 2 3 4 5 6 7 8 9 10 | <form action=""> اختر نوع السيارة <select size="3" name="car"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select></form> |
اختيار أكثر من قيمة
يمكنك اختيار اكثر من قيمة من القائمة المنسدلة باستخدام الخاصية multiple ، قم بالضغط على زر ctrl/command ثم بالضغط بزر المؤشر على العناصر التي تريد اختيارها.
| 1 2 3 4 5 6 7 8 9 10 | <form action=""> اختر نوع السيارة <select size="3" name="car" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select></form> |
العنصر <textarea>
في بعض الأحيان تحتاج إلى إدخال محتوى يتكون من أسطر متعددة، يمكنك استخدام العنصر <textarea> في الحقول التي تطلب من الزائر ادخال الكثير من الكلمات مثل ”نص الرسالة“:
| 1 2 3 4 5 6 7 | <form action=""> الرسالة: <textarea name="message" rows="5" cols="30"> نص الرسالة هنا</textarea> </form> |
الخاصية rows تحدد عدد الأسطر المرئية التي ستظهر داخل مربع الإدخال، بينما الخاصية cols تحدد العرض المرئي لمربع الإدخال.
النص الموجود بين الوسمين <textarea> سيظهر بشكل افتراضي داخل مربع الإدخال ويمكن للزائر تغييره.
العنصر <button>
يُمَكّنك العنصر <button> من إضافة أزرار قابلة للنقر:
| 1 2 3 4 5 | <form action=""> <button class="button" type="button" onclick="alert('مرحباً، لقد قمت بالضغط على الزر للتو!')">إضغط هنا</button> </form> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .button{ width: auto; position: relative; background-color: #000; color: #ffffff; padding: 7px 15px; margin: 0; font-weight: normal; font-size: 12px; display: inline-block; text-align: center; line-height: 21px; border: none; cursor: pointer; text-decoration: none; vertical-align: middle; transition: 0.3s; border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } |
عندما تقوم بالنقر على الزر سيتم تنفيذ الكود الموجود بداخل الخاصية onclick، هذة الخاصية تسمح لك بإضافة أكواد Javascript، يتم تنفيذها عند النقر على العنصر <button>.
أيضاً يمكنك استخدام الخاصية type مع العنصر <button> ليحل محل العنصر <input type=”submit”> :
| 1 2 3 4 5 6 7 | <form action=""> <textarea name="message">محتوى الرسالة يكتب هنا</textarea> <br> <button type="submit">إرسال</button> </form> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .button{ width: auto; position: relative; background-color:#0088ff; color: #ffffff; padding: 7px 15px; margin: 0; font-weight: normal; font-size: 12px; display: inline-block; text-align: center; line-height: 21px; border: none; cursor: pointer; text-decoration: none; vertical-align: middle; transition: 0.3s; border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } |
