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

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

عنصر <input>

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

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

<output>في الفصل القادم سنتحدث عن جميع أنواع المدخلات HTML.

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

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

مثال

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

جربها بنفسك

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

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

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

مثال

<option value="fiat" selected>Fiat</option>

جربها بنفسك

عنصر <textarea>

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

مثال

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

جربها بنفسك

<button type="button" onclick="alert('Hello World!')">تضغط هنا!</button>

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

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

مثال

:

جربها بنفسك

<button type="button" onclick="alert('Hello World!')">تضغط هنا!</button>

تضغط هنا!

عناصر استمارة HTML5

  • عنصر <datalist> في HTML5
  • أضاف HTML5 العناصر التالية للاستمارة:
  • <keygen>

<output>ملاحظة:

بافتراض، لا يعرض المتصفح العناصر غير المعروفة. العناصر الجديدة لن تؤذي صفحتك.

عنصر <datalist> في HTML5 <datalist>

العنصر <datalist> يحدد قائمة النقاط المحددة المسبقًا للعنصر <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>

جربها بنفسك