خصائص input ،select ،output في HTML | دروس HTML5

 <button> ، <input> ،  <select> ، <textarea> ، <datalist> ، <keygen> ، <output>  في HTML

تستخدم النماذج عناصر لجمع البيانات. في هذا الدرس سوف نتعرف على هذه العناصر.

 العنصر <input>

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

يمكن عرض عنصر <input> بعدة طرق، اعتمادًا على القيمة الموجودة في سمة النوع.

العنصر <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 value="fiat" selected>Fiat</option>

لاحظ أنه من خلال وضع قائمة منسدلة في نموذج واستخدام زر الإرسال، يمكن إرسال الخيار الذي حدده المستخدم إلى الخادم.

العنصر <textarea>

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

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

تحدد سمة الصفوف عدد الأسطر المرئية لمنطقة النص.

تحدد السمة cols العرض المرئي لمنطقة النص.

العنصر <button>

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

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

في المثال أعلاه، يتم عرض رسالة في المتصفح بالنقر فوق الزر.

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

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

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

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

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

بهذه الطريقة، بالإضافة إلى القدرة على الكتابة في حقل الإدخال، يمكن للمستخدم أيضًا استخدام القائمة المنسدلة المتوفرة له.

لإنشاء هذا العنصر، يجب أن تكون سمة القائمة لعنصر <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>

العنصر <keygen> في HTML5

الغرض من العنصر <keygen> هو توفير طريقة آمنة لمصادقة المستخدمين.

يحدد العنصر <keygen> حقلاً يقوم بإنشاء أزواج المفاتيح في النموذج.

عند إرسال النموذج، يتم إنشاء مفتاحين: مفتاح عام ومفتاح خاص.

يتم تخزين المفتاح الخاص محليًا على كمبيوتر المستخدم ويتم إرسال المفتاح العام إلى الخادم.

سيتم استخدام المفتاح العام للتحقق من صحة المستخدمين في المستقبل:

<form action="/action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>

العنصر <output> في HTML5

يمثل العنصر <output> نتيجة عملية حسابية (مثل النتيجة التي تم الحصول عليها من نص برمجي).

قم بإجراء عملية حسابية واعرض النتيجة في العنصر <الإخراج>:

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">

0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

كلمات مفتاحية: