jQuery Mobile kifaa cha kuingia cha formu

jQuery Mobile kuingia cha maandiko

Mawazo yanatokana na muundo wa kichwa cha kuingia kwa HTML kimeandikwa, jQuery Mobile inasababisha muundo wa mawazo unaofanana na kina na kina kwa kifaa cha mkononi. Pia, unaweza kutumia aina ya kichwa cha kuingia cha kipya cha HTML5:

Mifano

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Jina kuu:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Kuzaliwa:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Barua pepe:</label>
    <input type="email" name="email" id="email" placeholder="Jina lako la barua pepe..">
  </div>
</form>

Tafutufe Kupima

Tahara:Tumia placeholder kusaidia kumekua maelezo mazito ya jina kinachotumika kwa kuingia, kusoma na kufikia ujumbe wa jina kinachotumika kwa kuingia:

<input placeholder="sometext">

Kipato cha maandiko

Tumia <textarea> kusafirisha kuingia ya maandiko mingi.

Tahadhari:Kipato cha maandiko kinatambulika kwa mawasiliano yako, kwa sababu huna uharibifu wa kufikirika.

Mifano

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Tafutufe Kupima

Kipato cha utafutaji

Tofauti ya kichwa cha kuingia type="search" inaangaliwa katika HTML5 kwa kuzingatia kiwango cha jina kinachotumika kwa kuingia kipato cha utafutaji:

Mifano

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

Tafutufe Kupima

Mtiririko wa uchaguzi

Inatumiwa mtiririko wa uchaguzi kwa sababu inafikia kiwango cha chaguo kidogo cha chaguo kimoja kinachotumika na msingi.

Kwa kusafirisha kikamilifu cha ukubuni mtiririko wa uchaguzi, tafuta elementi ya input na type="radio" na label yaliyofanana. Pata kwenye elementi ya <fieldset> ya mtiririko. Pia, unaweza kuongeza elementi ya <legend> ili kubadilisha kichwa cha <fieldset>.

Tahara:Tumia kiparamu data-role="controlgroup" kusambaza viungo hivi:

Mifano

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Chagua jinsia ya mengine:</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>

Tafutufe Kupima

Kichwapa

Inatumiwa kwa kuzingatia msingi wa chumba kama mtumiaji anachagua chaguo kimoja kwenye mabomu au matumizi mengi:

Mifano

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Chagua rangi zilizokusikia zaidi kama unavyofikia:</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>

Tafutufe Kupima

Mfano wa mawili

Kwa kugawaza msingi au mabomu kwa ukurasa wa kati, tumia kiparamu data-type="horizontal":

Mifano

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

Tafutufe Kupima

Inaendelea kutumia kina kuu kubadilisha <fieldset>:

Mifano

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Chagua jinsia ya mengine:</legend>
  </fieldset>
</div>

Tafutufe Kupima

Ikiwa unataka kuingia kiwango kimoja, tumekuwa na uwanja wa <input> wa HTML kwa uongezaji checked:

Mifano

<input type="radio"> checked>
<input type="checkbox"> checked>

Tafutufe Kupima