تعد HTML form جزءًا مهمًا من تطوير الويب الذي يسمح للمستخدمين بالتفاعل مع موقع الويب وإرسال البيانات إلى الخادم. Form تُستخدم لمجموعة واسعة من الأغراض ، مثل تجميع المستخدم form ، ومعالجة مدخلات المستخدم ، وتمكين إجراءات المستخدم على موقع الويب. في هذه المقالة ، سوف نستكشف السمات والأنواع المختلفة لحقول الإدخال ، وتحديد العناصر ، ومناطق النص ، والأزرار التي يشيع استخدامها في HTML form.
حقول الإدخال
<input type="text">: لإنشاء حقل إدخال نص حيث يمكن للمستخدمين إدخال أحرف أبجدية رقمية.<input type="password">: يعرض حقل إدخال كلمة المرور يخفي الأحرف المدخلة.<input type="email">: يوفر التحقق من صحة البريد الإلكتروني لحقول الإدخال التي تتطلب عنوان بريد إلكتروني صالحًا.<input type="number">: يقيد الإدخال على القيم الرقمية فقط.<input type="checkbox">: يمثل مربع اختيار يمكن للمستخدمين تحديده أو إلغاء تحديده.<input type="radio">: يمثل زر اختيار يسمح للمستخدمين بتحديد خيار واحد من مجموعة خيارات.<input type="file">: يمكّن المستخدمين من تحديد الملفات وتحميلها.<input type="submit">: يعرض الزر الذي يرسل form عند النقر فوقه.<input type="reset">: يعرض زرًا يعيد تعيين form الحالة الأولية.<input type="date">: يوفر منتقي التاريخ لتحديد التواريخ.<input type="time">: يسمح للمستخدمين بإدخال قيم الوقت.
حدد العناصر
<select>: إنشاء قائمة منسدلة بخيارات يمكن تحديدها.<option>: يحدد خيارًا ضمن القائمة المنسدلة ، الموضوعة داخل<select>العلامة.<optgroup>: الخيارات المتعلقة بالمجموعات معًا في القائمة المنسدلة.<select multiple>: يسمح للمستخدمين بتحديد خيارات متعددة في وقت واحد عن طريق الضغط باستمرار على مفتاح Ctrl(أو مفتاح Command في Mac) أثناء النقر.
Textareas
<textarea>: لإنشاء حقل إدخال نص متعدد الأسطر حيث يمكن للمستخدمين إدخال وتحرير مجموعات نصية أطول. يمكن تغيير حجمها وتكوينها باستخدام سمات مثل rows وتحديد cols أبعادها.
أزرار
<button>: يمثل زرًا يمكنه تشغيل إجراءات مختلفة داخل ملف form. يمكن استخدامه لتقديم form ، لكل form وظيفة JavaScript ، أو التنقل إلى صفحة مختلفة.
استخدام المثال:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
يعرض هذا المثال استخدام form العناصر المختلفة ، بما في ذلك input الحقول textarea ، والزر. لا تتردد في تخصيص العناصر والسمات بناءً على متطلباتك المحددة. checkbox select dropdown submit form