عناصر النماذج في HTML

في هذا الفصل سيتم وصف جميع عناصر النموذج HTML.

عنصر <input>

أهم عنصر في النموذج هو <input> العنصر.

يختلف عنصر <input> بناءً على النوع يمكن لتلك الخاصية أن تتغير إلى أشكال متعددة.

ملاحظة:في الفصل التالي سيتم شرح جميع أنواع إدخالات HTML.

عنصر <select> (قائمة منسدلة)

<select> يحدد عنصرقائمة منسدلة:

مثال

<select name="cars">
<option value="volvo">فولفو</option>
<option value="saab">ساب</option>
<option value="fiat">فيات</option>
<option value="audi">أودي</option>
</select>

جربها بنفسك

<option> يحدد عنصر <option> الخيارات التي يمكن اختيارها.

عادة ما يعرض القائمة عادة الخيار الأول كخيار مسبقًا.

يمكنك استخدام خاصية selected لتعريف الخيار المحدد مسبقًا.

مثال

<option value="fiat" selected>فيات</option>

جربها بنفسك

عنصر <textarea>

<textarea> يحدد عنصر <textarea> حقل إدخال النص المتعدد الأسطر (نص حقل النص）：

مثال

<textarea name="message" rows="10" cols="30">
القطة كانت تلعب في الحديقة.
</textarea>

جربها بنفسك

يُعرض الكود HTML التالي في المتصفح كالتالي:

القطة كانت تلعب في الحديقة.

العنصر <button>

<button> يحدد العنصر <button> العنصر القابل للنقرالزر:

مثال

<button type="button" onclick="alert('Hello World!')">انقر هنا!</button>

جربها بنفسك

يُعرض الكود HTML التالي في المتصفح كالتالي:

عناصر النموذج HTML5

أضاف HTML5 العناصر التالية في النموذج:

  • <datalist>
  • <keygen>
  • <output>

ملاحظة:بشكل افتراضي، لن يظهر المتصفح العناصر غير المعروفة. لن تؤدي العناصر الجديدة إلى تدمير صفحتك.

عنصر <datalist> لـ HTML5

<datalist> العنصر <datalist> يحدد قائمة الخيارات المسبقة للعنصر <input>.

سيتم عرض قائمة سقوط تحتوي على الخيارات المسبقة أمام المستخدمين عند إدخال البيانات.

العنصر <input> list يجب أن يشير الخاصية إلى عنصر <datalist> المحدد id خصائص

مثال

يُمكن تعيين قيم مسبقة للعناصر <input> باستخدام <datalist>:

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

جربها بنفسك