أنواع المدخلات
يصف هذا الفصل أنواع المدخلات من <input> العنصر.
نوع الإدخال: النص
<input type="text"> يحدد حقل إدخال سطر واحد لإدخال النص:
مثال
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
الاسم الاول:
الكنية:
نوع الإدخال: كلمة المرور
<input type="password"> يحدد حقل كلمة المرور:
مثال
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
اسم المستخدم:
المستخدم كلمة السر:
وملثمين الأحرف في حقل كلمة المرور (shown as asterisks or circles) .
نوع الإدخال: تقديم
<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> انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
الاسم الاول:
الكنية:
إذا قمت بحذف السمة القيمة على زر الإرسال، وسوف الزر الحصول على النص الافتراضي:
مثال
<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> انها محاولة لنفسك » نوع الإدخال: radio
<input type="radio"> تعرف على radio زر واحدة.
Radio أزرار تتيح للمستخدم اختيار واحد فقط من عدد محدود من الخيارات:
مثال
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
الذكر
إناثا
آخر
نوع الإدخال: checkbox
<input type="checkbox"> تعرف على checkbox .
Checkboxes السماح لمستخدم تحديد ZERO أو أخرى خيارات لعدد محدود من الخيارات.
مثال
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
عندي دراجة
لدي سيارة
نوع الإدخال: button
<input type="button"> تعرف على button :
هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
HTML5 Input أنواع
وأضاف HTML5 عدة جديدة input أنواع:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input وأنواعها، لا تدعمها متصفحات الويب القديمة، وتتصرف كما input نوع النص.
Input النوع: number
و <input type="number"> يستخدم لحقول الإدخال التي يجب أن تحتوي على قيمة رقمية.
يمكنك وضع قيود على أرقام.
اعتمادا على دعم المتصفح، يمكن تطبيق القيود على حقل الإدخال.
مثال
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> انها محاولة لنفسك » Input قيود
وهنا لائحة من بعض مشترك input قيود (some are new in HTML5) :
| الصفات | وصف |
|---|---|
| disabled | يحدد أن حقل الإدخال يجب تعطيل |
| max | يحدد الحد الأقصى لقيمة حقل الإدخال |
| >maxlength | يحدد الحد الأقصى لعدد الأحرف لحقل الإدخال |
| min | تحديد الحد الأدنى لقيمة لحقل الإدخال |
| pattern | يحدد تعبير عادي للتحقق من قيمة المدخلات ضد |
| readonly | يحدد أن حقل الإدخال للقراءة فقط (cannot be changed) |
| required | يحدد ما هو مطلوب حقل المدخلات (must be filled out) |
| size | يحدد عرض (in characters) من حقل الإدخال |
| step | يحدد فترات عدد القانونية لحقل الإدخال |
| value | تحدد القيمة الافتراضية لحقل الإدخال |
سوف تتعلم المزيد عن input قيود في الفصل التالي.
مثال
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> انها محاولة لنفسك » Input نوع: date
و <input type="date"> يستخدم لحقول الإدخال التي يجب أن تحتوي على التاريخ.
اعتمادا على دعم المتصفح، يمكن للمنتقي التاريخ تظهر في حقل الإدخال.
يمكنك إضافة القيود المفروضة على input :
مثال
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> انها محاولة لنفسك » Input نوع: لون
و <input type="color"> يستخدم لحقول الإدخال التي يجب أن تحتوي على اللون.
اعتمادا على دعم المتصفح، يمكن للمنتقي الألوان تظهر في حقل الإدخال.
مثال
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> انها محاولة لنفسك » Input نوع: النطاق
و <input type="range"> يستخدم لحقول الإدخال التي يجب أن تحتوي على قيمة ضمن مجموعة.
اعتمادا على دعم المتصفح، يمكن عرضها في حقل الإدخال كما السيطرة على شريط التمرير.
يمكنك استخدام following سمات لتحديد القيود: دقيقة، كحد أقصى، خطوة، وقيمة.
Input نوع: month
و <input type="month"> يسمح للمستخدم لاختيار الشهر والسنة.
اعتمادا على دعم المتصفح، يمكن للمنتقي التاريخ تظهر في حقل الإدخال.
مثال
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> انها محاولة لنفسك » Input نوع: week
و <input type="week"> يسمح للمستخدم بتحديد مدة أسبوع والسنة.
اعتمادا على دعم المتصفح، يمكن للمنتقي التاريخ تظهر في حقل الإدخال.
Input نوع: time
و <input type="time"> يسمح للمستخدم بتحديد وقت (no time zone) .
اعتمادا على دعم المتصفح، يمكن منتقي وقت تظهر في حقل الإدخال.
Input نوع: datetime
و <input type="datetime"> يسمح للمستخدم لاختيار التاريخ والوقت (with time zone) .
مثال
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> انها محاولة لنفسك »  | تتم إزالة نوع الإدخال التاريخ والوقت من معيار HTML. استخدام التاريخ والوقت المحلي بدلا من ذلك. |
|---|
نوع الإدخال: التاريخ والوقت المحلي
و <input type="datetime-local"> يسمح للمستخدم لاختيار التاريخ والوقت (no time zone) .
اعتمادا على دعم المتصفح، يمكن للمنتقي التاريخ تظهر في حقل الإدخال.
مثال
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> انها محاولة لنفسك » نوع الإدخال: البريد الإلكتروني
و <input type="email"> يستخدم لحقول الإدخال التي يجب أن تحتوي على عنوان البريد الإلكتروني.
اعتمادا على دعم المتصفح، وعنوان البريد الإلكتروني ويمكن التحقق من صحة تلقائيا عندما قدم.
بعض الهواتف الذكية تعترف نوع البريد الإلكتروني، ويضيف ".com" على لوحة المفاتيح لمطابقة إدخال البريد الإلكتروني.
إدخال النوع: بحث
و <input type="search"> يستخدم لحقول البحث (a search field behaves like a regular text field) .
إدخال نوع: الهاتف
و <input type="tel"> يستخدم لحقول الإدخال التي يجب أن تحتوي على رقم الهاتف.
يتم اعتماد نوع الهاتف حاليا فقط في سفاري 8.
نوع الإدخال: رابط
و <input type="url"> يستخدم لحقول الإدخال التي يجب أن تحتوي على عنوان URL.
اعتمادا على دعم المتصفح، مجال رابط يمكن التحقق من صحة تلقائيا عندما قدم.
بعض الهواتف الذكية تعترف نوع رابط، ويضيف ".com" على لوحة المفاتيح لمطابقة إدخال URL.