HTML Input سمات

في value السمة

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

و readonly سمة

و readonly تحدد السمة التي حقل الإدخال للقراءة فقط (cannot be changed) :

و readonly سمة لا يحتاج إلى القيمة. هذا هو نفس الكتابة للقراءة فقط = "للقراءة فقط".

ل disabled السمة

و disabled تحدد السمة التي حقل الإدخال يتم تعطيل.

وثمة عنصر تعطيل وإلغاء صالحة للاستعمال وبرنامج الأمم المتحدة للنقر.

لن يتم تقديم عناصر للمعاقين.

و disabled سمة لا يحتاج إلى القيمة. هذا هو نفس الكتابة تعطيل = "معطل".

و size سمة

و size تحدد السمة حجم (in characters) لحقل الإدخال:

و maxlength سمة

و maxlength تحدد السمة الحد الأقصى المسموح به لطول حقل الإدخال:

مع maxlength السمة، فإن مراقبة المدخلات لا تقبل أكثر من العدد المسموح به من الحروف.

السمة لا تقدم أي ردود فعل. إذا كنت ترغب في تنبيه المستخدم، يجب أن تكتب شفرة جافا سكريبت.

سمات HTML5

وأضاف HTML5 ل following سمات <input> :

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

و following سمات <form> :

• autocomplete
• novalidate

و autocomplete سمة

و autocomplete تحدد السمة ما إذا كان ينبغي أن يكون نموذج أو إدخال حقل autocomplete أو إيقاف تشغيله.

عندما autocomplete في وضع التشغيل، ومتصفح القيم كاملة تلقائيا استنادا إلى القيم التي قام المستخدم بإدخال قبل.

Tip: من الممكن أن يكون autocomplete "on" للنموذج، و "off" لحقول الإدخال محددة، أو العكس بالعكس.

و autocomplete تعمل السمة مع <form> ويلي <input> أنواع: text, search, url, tel, email, password, datepickers, range, and color .

مثال

شكل HTML مع autocomplete على (and off for one input field) :

<form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

انها محاولة لنفسك »

نصيحة: في بعض المتصفحات قد تحتاج إلى تفعيل autocomplete وظيفة لهذا العمل.

و novalidate سمة

و novalidate السمة هي <form> السمة.

عندما تكون موجودة، novalidate تنص على أن لا ينبغي التحقق من صحة بيانات النموذج عندما قدم.

مثال

يشير إلى أن النموذج لا يمكن التحقق من صحتها على تقديم ما يلي:

<form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

انها محاولة لنفسك »

و autofocus السمة

و autofocus السمة هي السمة المنطقية.

عندما تكون موجودة، وهي تحدد أن <input> يجب أن العنصر تلقائيا على التركيز عند تحميل الصفحة.

مثال

دع "First name" حقل الإدخال تلقائيا على التركيز عند تحميل الصفحة:

First name:<input type="text" name="fname" autofocus>

انها محاولة لنفسك »

و form سمة

و form تحدد سمة واحدة أو أكثر من أشكال و <input> عنصر ينتمي إليها.

Tip: للإشارة إلى شكل أكثر من واحد، واستخدام قائمة مفصولة مساحة من form ids .

مثال

على input field تقع خارج النموذج HTML (but still a part of the form) :

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

انها محاولة لنفسك »

و formaction سمة

و formaction تحدد السمة URL الملف الذي سيقوم بمعالجة مراقبة المدخلات عندما يتم إرسال النموذج.

و formaction السمة يتجاوز action سمة من <form> عنصر.

و formaction يستخدم سمة مع نوع = "إرسال" واكتب = "صورة".

مثال

شكل HTML مع اثنين من يقدم أزرار، مع إجراءات مختلفة:

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

انها محاولة لنفسك »

و formenctype سمة

و formenctype تحدد السمة الكيفية التي ينبغي أن ترميز البيانات النموذج عند تقديمه إلى خادم (only for forms with method="post" ) .

و formenctype السمة يتجاوز enctype سمة من <form> عنصر.

و formenctype يستخدم سمة مع type="submit" و type="image" .

مثال

إرسال form-data التي الافتراضي المشفرة (the first submit button) ، وترميزها كما "multipart/form-data" (the second submit button) :

<form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

انها محاولة لنفسك »

و formmethod سمة

و formmethod تحدد السمة طريقة HTTP لإرسال form-data إلى URL عمل.

و formmethod السمة يتجاوز method سمة من <form> عنصر.

و formmethod السمة يمكن استخدامها مع type="submit" و type="image" .

مثال

على زر الثانية يتجاوز طريقة HTTP النموذج:

<form action="action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

انها محاولة لنفسك »

و formnovalidate سمة

و novalidate السمة هي السمة المنطقية.

عندما تكون موجودة، وهي تحدد أن <input> عنصر لا ينبغي التحقق من صحة عندما قدم.

و formnovalidate السمة يتجاوز novalidate سمة من <form> عنصر.

و formnovalidate السمة يمكن استخدامها مع type="submit" .

مثال

وهناك شكل مع اثنين من أزرار تقديم (with and without validation) :

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

انها محاولة لنفسك »

و formtarget سمة

و formtarget تحدد السمة اسم أو الكلمة التي تشير إلى مكان عرض الاستجابة التي يتم تلقيها بعد تقديم النموذج.

و formtarget السمة يتجاوز target سمة من <form> عنصر.

و formtarget السمة يمكن استخدامها مع نوع = "إرسال" واكتب = "صورة".

مثال

وهناك شكل مع اثنين من يقدم أزرار، مع مختلف النوافذ الهدف:

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

انها محاولة لنفسك »

و height و width سمات

و height الصفات وعرض تحدد الطول والعرض من <input> العنصر.

و height و width تستخدم سمات فقط مع <input type="image"> .

مثال

تحديد صورة كما على زر إرسال، مع ارتفاع العرض والصفات:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

انها محاولة لنفسك »

في list سمة

ل list تشير السمة إلى <datalist> العنصر الذي يحتوي على خيارات محددة مسبقا ل <input> العنصر.

مثال

و <input> العنصر مع القيم المحددة مسبقا في <datalist> :

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

انها محاولة لنفسك »

في min و max سمات

في min و max سمات تحديد الحد الأدنى والحد الأقصى لقيمة ل <input> العنصر.

في min و max سمات العمل مع أنواع المدخلات التالية: number, range, date, datetime, datetime-local, month, time and week .

مثال

<إدخال> العناصر مع دقيقة والقيم ماكس:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

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

انها محاولة لنفسك »

و multiple Attribute

و multiple السمة هي السمة المنطقية.

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

و multiple تعمل السمة مع الأنواع التالية المدخلات: email ، و file .

مثال

حقل تحميل الملف الذي يقبل قيم متعددة:

Select images: <input type="file" name="img" multiple>

انها محاولة لنفسك »

على pattern السمة

على pattern تحدد السمة تعبير عادي أن <input> محددا قيمة العنصر ضده.

على pattern تعمل السمة مع أنواع المدخلات التالية: text, search, url, tel, email, and password .

نصيحة: استخدم العالمية اللقب سمة لوصف نمط لمساعدة المستخدم.

Tip: تعلم المزيد عن التعابير العادية في لدينا البرنامج التعليمي جافا سكريبت.

مثال

حقل المدخلات التي يمكن أن تحتوي سوى ثلاثة حروف (no numbers or special characters) :

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

انها محاولة لنفسك »

و placeholder سمة

و placeholder تحدد السمة تلميحا أن يصف القيمة المتوقعة لحقل إدخال (a sample value or a short description of the format) .

يتم عرض التلميح في حقل الإدخال قبل المستخدم بإدخال قيمة.

و placeholder تعمل السمة مع أنواع المدخلات التالية: text, search, url, tel, email, and password .

مثال

حقل الإدخال مع نص العنصر النائب:

<input type="text" name="fname" placeholder="First name">

انها محاولة لنفسك »

و required سمة

و required السمة هي السمة المنطقية.

عندما تكون موجودة، وهي تحدد أن حقل الإدخال يجب ملء قبل اعتماد النموذج.

و required تعمل السمة مع الأنواع التالية المدخلات: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .

مثال

حقل المدخلات المطلوبة:

Username: <input type="text" name="usrname" required>

انها محاولة لنفسك »

في step سمة

في step تحدد السمة فترات عدد القانونية ل <input> العنصر.

مثال: إذا خطوة = "3"، وأرقام القانونية يمكن أن يكون -3، 0، 3، 6، الخ

Tip: إن step السمة يمكن استخدامها جنبا إلى جنب مع max و min سمات لخلق مجموعة من القيم القانونية.

في step تعمل السمة مع أنواع المدخلات التالية: number, range, date, datetime, datetime-local, month, time and week .

مثال

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

<input type="number" name="points" step="3">

انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»