يصف هذا الفصل جميع عناصر نموذج HTML.
عنصر <input>
العنصر الأكثر أهمية هو <input>.
<input>يمكن عرض عنصر في عدة طرق، اعتمادا على type.
<input name="firstname" type="text">
إذا تم حذف type ، فسيحصل حقل الإدخال على النوع الافتراضي: “نص”.
العنصر <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> تحدد خيارا يمكن أن يكون محددا.
افتراضيًا ، يتم تحديد العنصر الأول في القائمة المنسدلة.
لتحديد خيار محدد مسبقًا ، أضف selected إلى الخيار:
<option value="fiat" selected>Fiat</option>
القيم المرئية:
استخدم size لتحديد عدد القيم المرئية:
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
السماح بتحديدات متعددة:
استخدم multiple للسماح للمستخدم بتحديد أكثر من قيمة واحدة:
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
عنصر <textarea>
<textarea>يحدد عنصر حقل إدخال متعدد الخطوط ( منطقة النص ):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
rowsتحدد السمة عدد المرئي من خطوط في منطقة النص.
colsتحدد السمة العرض المرئي من منطقة النص.
يمكنك أيضًا تحديد حجم مساحة النص باستخدام CSS:
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
عنصر <button>
<button>يحدد العنصر ونقر زر :
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
ملاحظة: حدد دائمًا سمة type لعنصر الزر. قد تستخدم المتصفحات المختلفة أنواعًا افتراضية مختلفة لعنصر الزر.
عناصر نموذج HTML5
أضاف HTML5 عناصر النموذج التالية:
<datalist><output>
ملاحظة: لا تعرض المتصفحات عناصر غير معروفة. العناصر الجديدة غير المدعومة في المتصفحات القديمة لن “تدمر” صفحتك على الويب
HTML5 <datalist> العنصر
<datalist>يحدد عنصر قائمة من الخيارات المحددة مسبقا ل <input>.
سيرى المستخدمون قائمة منسدلة بالخيارات المحددة مسبقًا عند إدخال البيانات.
list للـ <input>، يجب أن تشير إلى id من <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 <output> العنصر
<output>يمثل عنصرا نتيجة عملية حسابية (مثل واحد يقوم بها البرنامج النصي).
إجراء عملية حسابية وإظهار النتيجة في <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>
عناصر نموذج HTML
| السمة | الوصف |
|---|---|
| <form> | يحدد نموذج HTML لإدخال المستخدم |
| <input> | يحدد عنصر تحكم الإدخال |
| <textarea> | يعرّف عنصر تحكم إدخال متعدد الأسطر (مساحة النص) |
| <label> | يحدد تسمية لعنصر <input> |
| <fieldset> | مجموعات العناصر ذات الصلة في نموذج |
| <legend> | يعرف تسمية توضيحية لعنصر <fieldset> |
| <select> | يحدد قائمة منسدلة |
| <optgroup> | يحدد مجموعة من الخيارات ذات الصلة في قائمة منسدلة |
| <option> | يحدد خيارًا في قائمة منسدلة |
| <button> | يحدد زر قابل للنقر |
| <datalist> | يحدد قائمة بالخيارات المحددة مسبقًا لعناصر التحكم في الإدخال |
| <output> | يحدد نتيجة عملية حسابية |
One Comment