نماذج HTML
يتم استخدام نموذج HTML لتجميع مدخلات المستخدم. غالبًا ما يتم إرسال إدخال المستخدم إلى الخادم للمعالجة.
مثال
عنصر <form>
يُستخدم عنصر HTML <form>لإنشاء نموذج HTML لإدخال المستخدم:
<form>
.
form elements
.
</form>
العنصر <form>عبارة عن حاوية لأنواع مختلفة من عناصر الإدخال ، مثل: حقول النص ومربعات الاختيار وأزرار الاختيار وأزرار الإرسال وما إلى ذلك.
يتم تناول جميع عناصر النموذج المختلفة في هذا الفصل: عناصر نموذج HTML .
عنصر <input>
عنصر HTML <input>هو عنصر النموذج الأكثر استخدامًا.
يمكن <input>عرض العنصر بعدة طرق ، اعتمادًا على type
السمة.
وهنا بعض الأمثلة:
| نوع | وصف |
|---|---|
| <نوع الإدخال = "نص"> | يعرض حقل إدخال نص أحادي السطر |
| <نوع الإدخال = "راديو"> | يعرض زر اختيار (لاختيار أحد الخيارات العديدة) |
| <نوع الإدخال = "مربع الاختيار"> | يعرض خانة اختيار (لتحديد صفر أو أكثر من العديد من الخيارات) |
| <نوع الإدخال = "إرسال"> | يعرض زر إرسال (لإرسال النموذج) |
| <نوع الإدخال = "زر"> | يعرض زرًا قابلاً للنقر |
يتم تناول جميع أنواع المدخلات المختلفة في هذا الفصل: أنواع مدخلات HTML .
حقول النص
يحدد <input type="text">حقل الإدخال أحادي السطر لإدخال النص.
مثال
نموذج مع حقول الإدخال للنص:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
ملاحظة: النموذج نفسه غير مرئي. لاحظ أيضًا أن العرض الافتراضي لحقل الإدخال هو 20 حرفًا.
عنصر <label>
لاحظ استخدام <label>العنصر في المثال أعلاه.
<label>تحدد العلامة تسمية للعديد من عناصر النموذج .
العنصر <label>مفيد لمستخدمي قارئ الشاشة ، لأن قارئ الشاشة سيقرأ الملصق بصوت عالٍ عندما يركز المستخدم على عنصر الإدخال.
يساعد العنصر <label>أيضًا المستخدمين الذين يجدون صعوبة في النقر فوق مناطق صغيرة جدًا (مثل أزرار الاختيار أو مربعات الاختيار) - لأنه عندما ينقر المستخدم على النص داخل <label>العنصر ، فإنه يبدل زر الاختيار / مربع الاختيار.
يجب أن تكون forسمة <label>العلامة مساوية idلسمة <input>
العنصر لربطهما معًا.
أزرار الراديو
يحدد <input type="radio">زر الاختيار.
تتيح أزرار الاختيار للمستخدم تحديد واحد من عدد محدود من الخيارات.
مثال
نموذج به أزرار اختيار:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
اختر لغة الويب المفضلة لديك:
مربعات الاختيار
يحدد <input type="checkbox">مربع الاختيار .
تتيح مربعات الاختيار للمستخدم تحديد خيارات صفرية أو أكثر من عدد محدود من الخيارات.
مثال
نموذج به مربعات اختيار:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
زر الإرسال
يعرّف <input type="submit">الزر لإرسال بيانات النموذج إلى معالج النموذج.
عادةً ما يكون معالج النموذج عبارة عن ملف على الخادم مع برنامج نصي لمعالجة بيانات الإدخال.
يتم تحديد معالج النموذج في action
سمة النموذج.
مثال
نموذج به زر إرسال:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
سمة الاسم لـ <input>
لاحظ أن كل حقل إدخال يجب أن يحتوي على nameسمة ليتم إرسالها.
إذا nameتم حذف السمة ، فلن يتم إرسال قيمة حقل الإدخال على الإطلاق.
مثال
لن يرسل هذا المثال قيمة حقل الإدخال "الاسم الأول":
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>