HTML input Tag

HTML input Tag – يحدد الوسم <input> حقل إدخال تفاعلى داخل النموذج <form> للسماح للمستخدم بإدخال البيانات. وهو العنصر الأساسى فى نماذج HTML.

HTML input Tag

مثال للتوضيح

شغل إيدك

فى هذا المثال ستجد 3 أنواع من حقول الإدخال (text – password – submit) داخل form:

<form action="/actions/test.php">
<fieldset>
        <legend>Login</legend>
        <p>
          <label for="username">Username:</label>
          <input type="text" name="username" id="username">
        </p>
        <p>
          <label for="pass">Password:</label>
          <input type="password" name="pass" id="pass">
        </p>
        <input type="submit" value="Login">
    </fieldset>
</form>

إذا لاحظت فى المثال السابق، ستجد حقول الإدخال إختلفت فى المظهر الخارجى، وفى طريقة العرض، وإذا ادخلت بيانات بها ستجد شكل القيم بداخلها مختلف أيضًا رغم إستخدام نفس الوسم <input>!

يرجع ذلك لقيمة سمة type حيث تحدد هذه السمة نوع الإدخال سواء كان (نص – بريد إلكترونى – كلمة مرور – زر إرسال – ..إلخ)، وعلى حسب كل نوع سيتم عرض حقل الإدخال. لمعرفة جميع أنواع المدخلات المختلفة + أمثلة لكل نوع راجع هذه الفصول: HTML Forms & HTML5 New Input Types.

يتعدد شكل عرض العنصر <input> اعتمادًا على سمة type المحدده.

فى المثال السابق، تم إستخدم الوسم <label> لتحديد تسميات حقول الإدخال، وهذا ما يجعل النموذج أكثر سهولة بالنسبة للمستخدم. للمزيد <label>.

السمات المحددة – Specific Attributes

يدعم الوسم <input> هذه السمات:

السمة	القيمة	الوصف
accept	file_extension media_type audio/* (sound files) video/* (video files) image/* (image files)	يحدد أنواع الملفات التي يقبلها الخادم [تستخدم فقط مع النوع (type) “file“].
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	يحدد نوع حقل الإدخال المراد إنشاؤه.
alt	text	يحدد نصًا بديلاً (alternate) للصور [تستخدم فقط مع النوع (type) “image“].
autocomplete	on off	يحديد ما إذا كان يجب تمكين الإكمال التلقائي لعنصر الإدخال <input> أم لا.
checked	checked	تحدد أنه يجب تحديد عنصر مسبقًا عند تحميل الصفحة بشكل افتراضي [مع النوع (type) “checkbox” و “radio“].
disabled	disabled	يحدد أنه يجب تعطيل عنصر الإدخال <input>.
formaction	URL	يحدد عنوان URL للملف الذي سيعالج عنصر تحكم الإدخال عند إرسال النموذج. [مع النوع (type) “submit” و “image“].
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	يحدد كيفية تشفير بيانات النموذج عند إرسالها إلى الخادم. [مع النوع (type) “submit” و “image“].
formmethod	get post	يحدد طريقة HTTP التي سيستخدمها المستعرض لإرسال بيانات النموذج. [مع النوع (type) “submit” و “image“].
formnovalidate	formnovalidate	يحدد أنه لا يجب التحقق من صحة عناصر النموذج عند إرسالها.
formtarget	blank_ self_ parent_ top_ framename	يحدد مكان عرض الاستجابة التي تم تلقيها بعد إرسال النموذج. [مع النوع (type) “submit” و “image“].
height	pixels	يحدد ارتفاع عنصر الإدخال <input>.
list	datalist_id	يشير إلى عنصر <datalist> الذي يحتوي على خيارات محددة مسبقًا لعنصر الإدخال <input>.
max	number date-time	يحدد الحد الأقصى لقيمة عنصر الإدخال <input>.
maxlength	number	يحدد الحد الأقصى لعدد الأحرف المطلوبة في عنصر الإدخال.
min	number date-time	يحدد الحد الأدنى لقيمة عنصر الإدخال <input>.
minlength	number	يحدد الحد الأدنى لعدد الأحرف المطلوبة في عنصر الإدخال <input>.
multiple	multiple	يحدد أن المستخدم يمكنه إدخال أكثر من قيمة في عنصر الإدخال <input>.
name	text	يحدد اسم لعنصر الإدخال <input>.
pattern	regular expression	يحدد تعبيرًا عاديًا regular expression يتم التحقق من قيمة عنصر الإدخال عليه.
placeholder	text	يحدد تلميحًا قصيرًا يصف القيمة المتوقعة لعنصر الإدخال <input>.
readonly	readonly	يحدد أن حقل الإدخال للقراءة فقط.
required	required	يحدد أنه يجب ملء حقل الإدخال قبل إرسال النموذج.
size	number	يضبط العرض لعنصر الإدخال بالأحرف. القيمة الافتراضية 20.
src	URL	يحدد عنوان URL للصورة لاستخدامه كزر إرسال. [تستخدم فقط مع النوع (type) “image“].
step	number any	يحدد الفاصل الزمني بين الأرقام الصالحة في حقل الإدخال.
value	text	يحدد قيمة إفتراضية لعنصر الإدخال <input>.
width	pixels	يحدد عرض عنصر الإدخال <input>.
dirname	nameinput.dir	يحدد أن اتجاه النص سيتم تقديمه. يجب أن تكون قيمتة اسم حقل الإدخال، متبوع بـ “dir.”.