عناصر إدخال نماذج jQuery Mobile

إدخال نصي jQuery Mobile

تُكتب حقول الإدخال باستخدام عناصر HTML القياسية، حيث يُطبق jQuery Mobile على تصميمات جذابة وسهلة الاستخدام للهواتف المحمولة. يمكنك أيضًا استخدام أنواع جديدة من HTML5 <input>:

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">الاسم الكامل:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">ميلاد:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" name="email" id="email" placeholder="بريدك الإلكتروني..">
  </div>
</form>

جرب بنفسك

نصيحة:استخدم placeholder لتقديم توجيهات قصيرة لتوصيف القيمة المتوقعة للسجل المطلوب إدخاله:

<input placeholder="sometext">

حقل النص

استخدم <textarea> لتحقيق إدخال نصي متعدد الأسطر.

ملاحظة:سيكبر حقل النص تلقائيًا ليتناسب مع عدد الأسطر النصية التي تدرجها.

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">معلومات إضافية:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

جرب بنفسك

حقل البحث

نوع الإدخال type="search" هو نوع جديد في HTML5 يستخدم لتحديد حقل نصي مخصص لإدخال كلمات البحث:

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">البحث:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

جرب بنفسك

الأزرار الإدارية

يستخدم الأزرار الإدارية عندما يختار المستخدم من عدد محدود من الخيارات.

لإنشاء مجموعة من الأزرار الإدارية، يرجى إضافة عنصر input يحتوي على type="radio" بالإضافة إلى label المطلوب. احاطِ الأزرار الإدارية بـ element <fieldset>. يمكنك أيضًا إضافة عنصر <legend> لتحديد عنوان <fieldset>.

نصيحة:استخدم خاصية data-role="controlgroup" لدمج هذه الأزرار:

مثال

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>اختر جنسك:</legend>
      <label for="male">ذكر</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">أنثى</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

جرب بنفسك

مربعات الاختيار

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

مثال

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>اختر كل الألوان المفضلة لديك:</legend>
      <label for="red">أحمر</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">أخضر</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">أزرق</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

جرب بنفسك

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

للتحكم في مجموعات الاختيار أو المربعات الم croisées بشكل أفقي، استخدم خاصية data-type="horizontal":

مثال

<fieldset data-role="controlgroup" data-type="horizontal">

جرب بنفسك

يمكنك أيضًا استخدام وحدة الحقل لضمان <fieldset>:

مثال

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>اختر جنسك:</legend>
  </fieldset>
</div>

جرب بنفسك

إذا كنت ترغب في "تحديد" أحد الأزرار، استخدم خاصية checked من علامة <input> HTML:

مثال

<input type="radio"> مقذوف>
<input type="checkbox"> مقذوف>

جرب بنفسك