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

أنواع المدخلات في HTML

أهم عناصر النموذج <form> هي المدخلات التي يمكننا من خلالها تلقي المعلومات التي يدخلها المستخدم. في هذا الدرس، سوف نتعرف على أنواع مختلفة من هذا العنصر.


إدخال النص Text input

يحدد العنصر <"input type =" text> حقل إدخال سطر واحد:

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

يستخدم هذا الحقل لإدخال بيانات نصية مثل الاسم.

إدخال كلمة المرور  Input of Password type

يحدد العنصر <"input type =" password> حقل إدخال كلمة المرور.

الأحرف التي يتم كتابتها في حقل كلمة المرور لاتضهر:

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

الإرسال Submit  

يحدد العنصر <input type = "submit"> زرًا لإرسال بيانات النموذج إلى إجراء (عادةً صفحة على الخادم).

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

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

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

في الصورة أدناه، يمكنك أن ترى إخراج الكود أعلاه:

بعد ملء حقول الاسم، سيؤدي النقر على زر إرسال إلى إرسال البيانات المدخلة في الحقول إلى صفحة تسمى "action_page.php". تتم معالجة البيانات بواسطة هذه الصفحة (قد يتم تسجيلها في قاعدة البيانات) ويتم إرسال النتيجة إلى المستخدم.

إذا لم تحدد قيمة لزر الإرسال، فسيتم استخدام القيمة الافتراضية له:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form>

إخراج الكود أعلاه كما يلي:

إعادة التعيين Reset 

يحدد العنصر <input type = "reset"> زر إعادة الضبط الذي يُرجع جميع قيم النموذج إلى قيمها الافتراضية:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

في المثال أعلاه، يتم توفير القيم الافتراضية لمدخلات الاسم الأول والاسم الأخير. إذا قمنا بتغيير هذه القيم والنقر على زر إعادة الضبط، فستعود المدخلات إلى القيم الافتراضية.



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