عناصر نموذج HTML

❮ سابق التالي ❯

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

عناصر <شكل> HTML

يمكن أن يحتوي عنصر HTML <form>على عنصر واحد أو أكثر من عناصر النموذج التالية:

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

عنصر <input>

يعد العنصر أحد أكثر عناصر النموذج استخدامًا <input>.

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

مثال

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

يتم تناول جميع القيم المختلفة type للسمة في الفصل التالي: أنواع إدخال HTML .

عنصر <label>

يحدد <label>العنصر تسمية للعديد من عناصر النموذج.

العنصر <label>مفيد لمستخدمي قارئ الشاشة ، لأن قارئ الشاشة سيقرأ الملصق بصوت عالٍ عندما يركز المستخدم على عنصر الإدخال.

يساعد العنصر <label>أيضًا المستخدمين الذين يجدون صعوبة في النقر فوق مناطق صغيرة جدًا (مثل أزرار الاختيار أو مربعات الاختيار) - لأنه عندما ينقر المستخدم على النص داخل <label>العنصر ، فإنه يبدل زر الاختيار / مربع الاختيار.

يجب أن تكون forسمة <label>العلامة مساوية idلسمة <input> العنصر لربطهما معًا.

عنصر <select>

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

مثال

<label for="cars">Choose a car:</label>
<select id="cars" 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السمة إلى الخيار:

مثال

القيم المرئية:

استخدم sizeالسمة لتحديد عدد القيم المرئية:

مثال

<label for="cars">Choose a car:</label>
<select id="cars" 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السمة للسماح للمستخدم بتحديد أكثر من قيمة واحدة:

مثال

<label for="cars">Choose a car:</label>
<select id="cars" 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العرض المرئي لمنطقة النص.

هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:

يمكنك أيضًا تحديد حجم منطقة النص باستخدام 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>

هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:

ملاحظة: حدد دائمًا typeسمة عنصر الزر. قد تستخدم المستعرضات المختلفة أنواعًا افتراضية مختلفة لعنصر الزر.

عنصرا <fieldset> و <legend>

يستخدم <fieldset>العنصر لتجميع البيانات ذات الصلة في نموذج.

يحدد <legend>العنصر تسمية توضيحية <fieldset> للعنصر.

مثال

<form action="/action_page.php">
<fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
</fieldset>
</form>

هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:

عنصر <datalist>

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

سيرى المستخدمون قائمة منسدلة بالخيارات المحددة مسبقًا أثناء قيامهم بإدخال البيانات.

يجب أن تشير سمة listالعنصر إلى سمة العنصر.<input>id<datalist>

مثال

عنصر <الإخراج>

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

مثال

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

تمارين HTML