HTML نموذج عناصر
شكل HTML على صفحة ويب يسمح للمستخدم بإدخال البيانات التي يتم إرسالها إلى خادم للمعالجة. يمكن أشكال تشبه ورقة أو قاعدة بيانات نماذج لمستخدمي الشبكة ملء الاستمارات باستخدام خانات، وأزرار الراديو، أو حقول النص.
على سبيل المثال، ونماذج يمكن استخدامها لإدخال الشحن أو بطاقة الائتمان البيانات لطلب المنتج، أو يمكن استخدامها لاسترداد نتائج البحث من محرك البحث.
يصف هذا الفصل جميع عناصر النموذج HTML.
و <input> العنصر
عنصر الشكل الأكثر أهمية هو <input> العنصر.
و <input> عنصر يمكن أن تختلف في نواح كثيرة، وهذا يتوقف على type السمة.
وتغطي جميع أنواع المدخلات HTML في الفصل التالي.
و <select> العنصر (Drop-Down List)
و <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> عناصر تحدد خيارات لتحديد.
سوف تظهر قائمة عادة في البند الأول على النحو المحدد.
يمكنك إضافة السمة المحددة لتحديد خيار محدد مسبقا.
و <textarea> العنصر
و <textarea> يعرف عنصر حقل إدخال متعدد الخطوط ( a text area ) :
مثال
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea> انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
و <button> العنصر
و <button> عنصر يحدد زر نقر:
هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
HTML5 نموذج عناصر
وأضاف HTML5 العناصر الشكل التالي:
- <datalist>
- <keygen>
- <output>
افتراضيا، المتصفحات لا تعرض عناصر مجهولة. سوف عناصر جديدة لا يدمر صفحتك.
HTML5 <datalist> العنصر
و <datalist> يحدد عنصر قائمة من الخيارات المحددة مسبقا ل <input> العنصر.
وسيكون للمستخدمين رؤية القائمة المنسدلة من خيارات محددة مسبقا وإدخال البيانات فيها.
في list سمة من <input> عنصر، يجب أن تشير إلى id سمة من <datalist> العنصر.
مثال
و <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> انها محاولة لنفسك » HTML5 <keygen> العنصر
الغرض من <keygen> العنصر هو توفير وسيلة آمنة لمصادقة المستخدمين.
و <keygen> يحدد عنصر حقل مولد مفتاح الزوج في النموذج.
عند إرسال النموذج، يتم إنشاء مفتاحين، أحدهما خاص والجمهور واحد.
يتم تخزين المفتاح الخاص محليا، ويتم إرسال المفتاح العمومي إلى الملقم.
يمكن استخدام المفتاح العمومي لتوليد شهادة عميل لمصادقة المستخدم في المستقبل.
مثال
نموذج مع حقل كجن:
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form> انها محاولة لنفسك » HTML5 <output> العنصر
و <output> العنصر يمثل نتيجة عملية حسابية (مثل واحد يقوم بها البرنامج النصي).
مثال
تنفيذ عملية حسابية وتظهر النتيجة في <output> العنصر:
<form action="action_page.asp"
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> انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 »
HTML نموذج عناصر
= الجديد في HTML5.
| بطاقة | وصف |
|---|---|
| <form> | يحدد شكل HTML لإدخال المستخدم |
| <input> | تعرف على مراقبة المدخلات |
| <textarea> | يحدد عنصر تحكم متعدد المدخلات (text area) |
| <label> | يعرف تسمية ل <input> العنصر |
| <fieldset> | مجموعة العناصر ذات الصلة في شكل |
| <legend> | تعرف توضيحية ل <fieldset> العنصر |
| <select> | تعرف القائمة المنسدلة |
| <optgroup> | يحدد مجموعة من الخيارات ذات الصلة في القائمة المنسدلة |
| <option> | يحدد خيار في قائمة منسدلة |
| <button> | تعرف على زر نقر |
| <datalist> | تحديد قائمة من الخيارات المحددة مسبقا لعناصر المدخلات |
| <keygen> | يعرف حقل مفتاح الزوج مولد (for forms) |
| <output> | يحدد نتيجة عملية حسابية |