أنواع إدخال HTML
يصف هذا الفصل الأنواع المختلفة <input>لعنصر HTML.
أنواع مدخلات HTML
فيما يلي أنواع الإدخال المختلفة التي يمكنك استخدامها في HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
نصيحة: القيمة الافتراضية typeللسمة هي "نص".
إدخال نوع النص
<input type="text">يحدد
حقل إدخال نص أحادي السطر :
مثال
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
الاسم الاول:الكنية:
نوع الإدخال كلمة المرور
<input type="password">يحدد حقل كلمة المرور :
مثال
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
اسم المستخدم:كلمة المرور:
يتم إخفاء الأحرف الموجودة في حقل كلمة المرور (تظهر كعلامات نجمية أو دوائر).
نوع الإدخال إرسال
<input type="submit">يعرّف زرًا
لإرسال بيانات النموذج إلى معالج النموذج .
عادةً ما يكون معالج النموذج عبارة عن صفحة خادم بها برنامج نصي لمعالجة بيانات الإدخال.
تم تحديد معالج النموذج في action
سمة النموذج:
مثال
<form action="/action_page.php">
<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">
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
إذا حذفت سمة قيمة زر الإرسال ، فسيحصل الزر على نص افتراضي:
مثال
<form action="/action_page.php">
<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">
</form>
نوع الإدخال إعادة تعيين
<input type="reset">يحدد زر إعادة الضبط
الذي سيعيد تعيين جميع قيم النموذج إلى قيمها الافتراضية:
مثال
<form action="/action_page.php">
<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">
<input type="reset">
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
إذا قمت بتغيير قيم الإدخال ثم النقر فوق الزر "إعادة تعيين" ، فسيتم إعادة تعيين بيانات النموذج إلى القيم الافتراضية.
نوع الإدخال راديو
<input type="radio">يحدد زر الاختيار .
تتيح أزرار الاختيار للمستخدم تحديد خيار واحد فقط من بين عدد محدود من الخيارات:
مثال
<p>Choose your favorite Web language:</p>
<form>
<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>
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
خانة اختيار نوع الإدخال
<input type="checkbox">يحدد خانة الاختيار .
تتيح مربعات الاختيار للمستخدم تحديد خيارات صفرية أو أكثر من عدد محدود من الخيارات.
مثال
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
زر نوع الإدخال
<input type="button">يحدد زرًا :
مثال
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
هذه هي الطريقة التي سيتم بها عرض كود HTML أعلاه في المتصفح:
نوع الإدخال اللون
يتم <input type="color">استخدام حقول الإدخال التي يجب أن تحتوي على لون.
اعتمادًا على دعم المتصفح ، يمكن أن يظهر منتقي الألوان في حقل الإدخال.
مثال
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
نوع الإدخال التاريخ
يتم <input type="date">استخدام حقول الإدخال التي يجب أن تحتوي على تاريخ.
اعتمادًا على دعم المتصفح ، يمكن أن يظهر منتقي التاريخ في حقل الإدخال.
مثال
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
يمكنك أيضًا استخدام السمات minو maxلإضافة قيود على التواريخ:
مثال
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
نوع الإدخال محلي التاريخ والوقت
يحدد <input type="datetime-local">حقل إدخال التاريخ والوقت ، بدون منطقة زمنية.
اعتمادًا على دعم المتصفح ، يمكن أن يظهر منتقي التاريخ في حقل الإدخال.
مثال
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
نوع الإدخال بريد إلكتروني
يتم <input type="email">استخدام حقول الإدخال التي يجب أن تحتوي على عنوان بريد إلكتروني.
اعتمادًا على دعم المتصفح ، يمكن التحقق من صحة عنوان البريد الإلكتروني تلقائيًا عند إرساله.
تتعرف بعض الهواتف الذكية على نوع البريد الإلكتروني وتضيف ".com" إلى لوحة المفاتيح لمطابقة إدخال البريد الإلكتروني.
مثال
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
نوع الإدخال ملف
يحدد <input type="file">
حقل اختيار الملف وزر "استعراض" لعمليات تحميل الملف.
مثال
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
نوع الإدخال مخفي
يحدد <input type="hidden">
حقل الإدخال المخفي (غير مرئي للمستخدم).
يسمح الحقل المخفي لمطوري الويب بتضمين البيانات التي لا يمكن للمستخدمين رؤيتها أو تعديلها عند إرسال النموذج.
غالبًا ما يخزن الحقل المخفي سجل قاعدة البيانات الذي يحتاج إلى تحديث عند إرسال النموذج.
ملاحظة: على الرغم من عدم عرض القيمة للمستخدم في محتوى الصفحة ، إلا أنها مرئية (ويمكن تعديلها) باستخدام أدوات مطور أي متصفح أو وظيفة "عرض المصدر". لا تستخدم المدخلات المخفية كشكل من أشكال الأمن!
مثال
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
نوع الإدخال الشهر
يسمح <input type="month">للمستخدم بتحديد الشهر والسنة.
اعتمادًا على دعم المتصفح ، يمكن أن يظهر منتقي التاريخ في حقل الإدخال.
مثال
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
رقم نوع الإدخال
يحدد <input type="number">حقل الإدخال
الرقمي .
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<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}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |