HTML <input> نوع السمة

مثال

نموذج HTML مع حقلي إدخال ؛ حقل نصي وزر إرسال واحد:

<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text" id="username" name="username"><br>
<input type="submit" value="Submit">
</form>

المزيد من الأمثلة "جربها بنفسك" أدناه.

التعريف والاستخدام

typeتحدد السمة نوع العنصر <input>المراد عرضه.

إذا typeلم يتم تحديد السمة ، فإن النوع الافتراضي هو "نص".

دعم المتصفح

Attribute
type	Yes	Yes	Yes	Yes	Yes

بناء الجملة

قيم السمات

Value	Description
button	Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox	Defines a checkbox
color	Defines a color picker
date	Defines a date control (year, month, day (no time))
datetime-local	Defines a date and time control (year, month, day, time (no timezone)
email	Defines a field for an e-mail address
file	Defines a file-select field and a "Browse" button (for file uploads)
hidden	Defines a hidden input field
image	Defines an image as the submit button
month	Defines a month and year control (no timezone)
number	Defines a field for entering a number
password	Defines a password field
radio	Defines a radio button
range	Defines a range control (like a slider control)
reset	Defines a reset button
search	Defines a text field for entering a search string
submit	Defines a submit button
tel	Defines a field for entering a telephone number
text	Default. Defines a single-line text field
time	Defines a control for entering a time (no timezone)
url	Defines a field for entering a URL
week	Defines a week and year control (no timezone)

مزيد من الأمثلة

نوع الإدخال: زر

زر ضغط ينشط JavaScript عند النقر فوقه:

نوع الإدخال: مربع الاختيار

تتيح مربعات الاختيار للمستخدم تحديد خيار واحد أو أكثر من عدد محدود من الخيارات:

نوع الإدخال: اللون

حدد لونًا من منتقي الألوان:

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">

نوع الإدخال: التاريخ

تحديد عنصر تحكم التاريخ:

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

نوع الإدخال: تاريخ محلي

تحديد عنصر تحكم التاريخ والوقت (بدون منطقة زمنية):

<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">

نوع الإدخال: بريد إلكتروني

حدد حقلاً لعنوان البريد الإلكتروني (سيتم التحقق من صحته تلقائيًا عند الإرسال):

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">

نوع الإدخال: ملف

حدد حقل اختيار ملف وزر "تصفح ..." (لتحميلات الملف):

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">

نوع الإدخال: مخفي

حدد حقلاً مخفيًا (غير مرئي للمستخدم).

غالبًا ما يخزن الحقل المخفي سجل قاعدة البيانات الذي يحتاج إلى تحديث عند إرسال النموذج:

نوع الإدخال: صورة

حدد الصورة كزر إرسال:

نوع الإدخال: شهر

حدد شهرًا وسنة تحكم (بدون منطقة زمنية):

<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">

نوع الإدخال: رقم

حدد حقلاً لإدخال رقم (يمكنك أيضًا تعيين قيود على الأرقام المقبولة):

<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

استخدم السمات التالية لتحديد القيود:

max - تحدد القيمة القصوى المسموح بها
min - يحدد الحد الأدنى للقيمة المسموح بها
الخطوة - تحدد فترات العدد القانوني
القيمة - تحدد القيمة الافتراضية

نوع الإدخال: كلمة المرور

حدد حقل كلمة المرور (الأحرف مقنعة):

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">

نوع الإدخال: راديو

تتيح أزرار الاختيار للمستخدم تحديد خيار واحد فقط من عدد محدود من الخيارات:

<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

نوع الإدخال: النطاق

حدد عنصر تحكم لإدخال رقم قيمته الدقيقة ليست مهمة (مثل عنصر تحكم شريط التمرير). النطاق الافتراضي هو من 0 إلى 100. ومع ذلك ، يمكنك تعيين قيود على الأرقام المقبولة باستخدام سمات الحد الأدنى والحد الأقصى والخطوة:

<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">

استخدم السمات التالية لتحديد القيود:

max - تحدد القيمة القصوى المسموح بها
min - يحدد الحد الأدنى للقيمة المسموح بها
الخطوة - تحدد فترات العدد القانوني
القيمة - تحدد القيمة الافتراضية

نوع الإدخال: إعادة تعيين

حدد زر إعادة تعيين (إعادة تعيين جميع قيم النموذج إلى القيم الافتراضية):

نصيحة: استخدم زر إعادة الضبط بعناية! يمكن أن يكون مزعجًا للمستخدمين الذين يقومون بتنشيط زر إعادة الضبط عن طريق الخطأ.

نوع الإدخال: بحث

حدد حقل البحث (مثل بحث الموقع أو بحث Google):

<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">

نوع الإدخال: إرسال

حدد زر إرسال:

نوع الإدخال: هاتف

حدد حقلاً لإدخال رقم الهاتف:

<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

نوع الإدخال: نص

حدد حقلين نصيين أحاديي السطر يمكن للمستخدم إدخال نص فيهما:

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

نوع الإدخال: الوقت

حدد عنصر تحكم لإدخال وقت (بدون منطقة زمنية):

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">

نوع الإدخال: url

حدد حقلاً لإدخال عنوان URL:

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">

نصيحة: يتعرف Safari على iPhone على نوع إدخال عنوان url ، ويغير لوحة المفاتيح على الشاشة لمطابقته (يضيف خيار .com).

نوع الإدخال: أسبوع

حدد أسبوعًا وعامًا للتحكم (بدون منطقة زمنية):

<label for="week">Select a week:</label>
<input type="week" id="week" name="week">

❮ HTML علامة <input>

مرجع HTML

HTML Tags