jQuery Mobile ਫਾਰਮ ਇੰਪੂਟ ਇਲੈਕਟ੍ਰੋਨ

jQuery Mobile ਟੈਕਸਟ ਇੰਪੂਟ

ਇੰਪੂਟ ਫੀਲਡ ਨੂੰ ਸਟੈਂਡਰਡ ਹੈਲਥੀ ਇਲੈਕਟ੍ਰੋਨ ਲਈ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ, 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">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

خود کو چک کریئن

ਖੋਜ ਬਕਸਾ

ਇੰਪੂਟ ਟਾਈਪ type="search" ਹੈਲਥੀ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਟਾਈਪ ਹੈ ਜੋ ਖੋਜ ਕਰਨ ਵਾਲੇ ਟੈਕਸਟ ਫੀਲਡ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ:

مثال

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

خود کو چک کریئن

ਸਿੰਗਲ ਰੇਡੀਓ ਬਟਨ

ਜਦੋਂ ਯੂਜ਼ਰ ਸਿਰਫ਼ ਸੀਮਿਤ ਸਿਆਚਿਨ ਵਿਕਲਪਾਂ ਵਿੱਚੋਂ ਇੱਕ ਚੁਣਦਾ ਹੈ, ਤਾਂ ਸਿੰਗਲ ਰੇਡੀਓ ਬਟਨ ਦਾ ਉਪਯੋਗ ਹੁੰਦਾ ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਸਿੰਗਲ ਰੇਡੀਓ ਬਟਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ type="radio" ਦਾ input ਇਲੈਕਟ੍ਰੋਨ ਅਤੇ ਸਬੰਧਤ label ਜੋੜੋ। <fieldset> ਇਲੈਕਟ੍ਰੋਨ ਵਿੱਚ ਸਿੰਗਲ ਰੇਡੀਓ ਬਟਨ ਨੂੰ ਪੈਕ ਕਰੋ। ਤੁਸੀਂ ਇੱਕ <legend> ਇਲੈਕਟ੍ਰੋਨ ਵੀ ਜੋੜ ਸਕਦੇ ਹੋ ਤਾਕਿ <fieldset> ਦਾ ਟਾਈਟਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。

ਸੁਝਾਅ:ਇਨ੍ਹਾਂ ਬਟਨਾਂ ਨੂੰ data-role="controlgroup" ਪ੍ਰਤੀਯੋਗਿਤਾ ਨਾਲ ਕੰਮ ਕਰੋ:

مثال

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>ਚੁਣੋ ਆਪਣਾ ਜ਼ਿਲਤ:</legend>
      <label for="male">Male</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">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">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

خود کو چک کریئن

ਹੋਰ ਉਦਾਹਰਣ

ਜੇਕਰ ਤੁਸੀਂ ਰੈਡੀਓ ਬਟਨਾਂ ਨੂੰ ਹੌਰਿਜ਼ੋਂਟਲ ਗਰੁੱਪ ਵਿੱਚ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ data-type="horizontal" ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਤੋਂ ਕਰੋ:

مثال

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

خود کو چک کریئن

ਤੁਸੀਂ ਵੀ <fieldset> ਨੂੰ ਡੌਮੇਨ ਕੰਟੇਨਰ ਵਿੱਚ ਰੱਖ ਸਕਦੇ ਹੋ:

مثال

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>ਚੁਣੋ ਆਪਣਾ ਜ਼ਿਲਤ:</legend>
  </fieldset>
</div>

خود کو چک کریئن

اگر آپ کسی بٹن کو‘پیش نهاد’کرنا چاہتے ہیں تو، وہیں اچھا ہوگا کہ آپ جی کوئی ان موبائل <input> تیگ کی چکڈ اٹری بیوٹ کا استعمال کریں:

مثال

<input type="radio"> چکڈ>
<input type="checkbox"> چکڈ>

خود کو چک کریئن